First things first, let's get Firebase up and running in your web app. You'll need to initialize it using a configuration object that includes your API key and other details. Pop this into your main file, like index.html or app.js.

// Import the Firebase packages
import firebase from 'firebase/app';
import 'firebase/auth';

// Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Next up, let's talk about session persistence. Firebase Authentication offers three types:

• firebase.auth.Auth.Persistence.SESSION: Only sticks around for the current session/tab. Close the tab, and it's gone.
• firebase.auth.Auth.Persistence.LOCAL: Stays even when you close the browser. This is the default.
• firebase.auth.Auth.Persistence.NONE: Doesn't persist at all.

You can set the persistence type with the setPersistence method.

firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
  .then(() => {
    // User's authentication state will now persist
  })
  .catch((error) => {
    console.error("Error setting persistence: ", error);
  });

Now, let's get users signed in. Firebase offers several methods, like email/password or third-party providers (Google, Facebook, etc.). The persistence type you set earlier will apply here.

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    const user = userCredential.user;
    console.log("User signed in: ", user);
  })
  .catch((error) => {
    console.error("Error signing in: ", error);
  });

It's important to keep an eye on the authentication state. This way, you can respond appropriately, whether the user is signed in or out.

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log("User is signed in: ", user);
    // Update UI for signed-in user
  } else {
    console.log("No user is signed in.");
    // Update UI for signed-out user
  }
});

When it's time for a user to sign out, just call the signOut method. This will clear any persisted session based on the persistence type you set.

firebase.auth().signOut()
  .then(() => {
    console.log("User signed out.");
    // Update UI accordingly
  })
  .catch((error) => {
    console.error("Error signing out: ", error);
  });

Sometimes, you might need to change the persistence type on the fly. Maybe you want to switch from LOCAL to SESSION for a specific part of your app. No problem, you can do that dynamically.

firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
  .then(() => {
    // The next sign-in attempt will use session persistence
    return firebase.auth().signInWithEmailAndPassword(email, password);
  })
  .catch((error) => {
    console.error("Error changing persistence: ", error);
  });

Keep an eye on your app's needs and make sure the persistence type fits the user experience and security requirements.