When building modern web apps, it is essential to provide a smooth user experience by keeping users logged in even if they reload the page or close and reopen the browser. Firebase Authentication offers flexible session persistence options that allow you to control how long a user's authentication state is remembered. Understanding these options is key to managing user sessions effectively in your React app.

Firebase provides three main session persistence options:

• Local persistence: this is the default setting. The authentication state is stored in the browser's local storage, so users remain signed in across page reloads and browser restarts. This is ideal for apps where you want users to stay logged in until they explicitly sign out;
• Session persistence: with this option, the authentication state is stored in the browser's session storage. Users stay signed in as long as the browser tab or window remains open, but are signed out if they close the tab or window. This is useful for apps that require more security or when you want to limit session duration;
• None: when you use this option, the authentication state is kept in memory only. Users will be signed out as soon as the page is reloaded or navigated away from. This is suitable for highly sensitive apps or for one-time login flows.

It is important to choose the persistence mode that matches your app's security and usability requirements. For example, banking apps might prefer session or none, while social media apps usually choose local persistence.

First, import the required Firebase Authentication functions and the persistence constants from the Firebase SDK:

import {
  getAuth,
  setPersistence,
  browserLocalPersistence,
  browserSessionPersistence,
  browserNonePersistence,
  signInWithEmailAndPassword
} from "firebase/auth";

Then, before you sign in a user, set the desired persistence mode. For example, to use session persistence:

const auth = getAuth();

setPersistence(auth, browserSessionPersistence)
  .then(() => {
    // Now sign in the user
    return signInWithEmailAndPassword(auth, email, password);
  })
  .then((userCredential) => {
    // User is signed in with session persistence
    console.log("Signed in with session persistence");
  })
  .catch((error) => {
    // Handle errors here
    console.error(error);
  });

You can replace browserSessionPersistence with browserLocalPersistence or browserNonePersistence depending on your needs. Always call setPersistence before the sign-in operation to ensure the session is stored in the desired way. If you do not call setPersistence, Firebase uses local persistence by default.