Can you control when a user logs out? What happens if you want to log out a user when they refresh the page or close the browser?

Persistent authentication is excellent because our users can access our app without needing to log in every time they visit, but there are times when it’s not a good idea.

Users can be careless and leave their sessions open in shared computers, or maybe they lost their phone, and someone found it, that someone can now access any web app our users had active.

If your app handles sensitive user data, then you should know about Authentication State Persistence in Firebase. It means that you can decide on which point you force a user to log out.

By default, Firebase Authentication default behavior is to persist a user’s session even after the user closes the browser, but that’s not the only option you have, you can set firebase authentication to:

  • Persist the auth session indefinitely. This keeps your user logged in even if they close the browser, and requires an explicit log out from the user to close the session. (This is the default)
  • Persist the auth session in the current window. This keeps your user logged in as long as the browser is open, think of it like a browser’s incognito mode, as soon as you close the browser the session gets terminated.
  • And not persist at all, this keeps your user logged in only while he’s doing what he needs to do on the page, the user’s state is stored in memory, so if the page refreshes, then the auth state is cleared.

To use it, you can call the setPersistence() function in Firebase authentication and pass it one of 3 values:

  • .setPersistence(browserLocalPersistence) to keep the user logged in at all times.
  • .setPersistence(browserSessionPersistence) to only keep the session active while the browser is open.
  • .setPersistence(inMemoryPersistence) => To keep the session in memory and clear it if the user reloads.

The place to add this to your code is ideally before calling the login function, the setPersistence() method returns a void promise, so you can create a login function that sets the persistence and then logs in the user like this:

import { Component } from '@angular/core';
import {
  Auth,
  signInWithEmailAndPassword,
  setPersistence,
  browserLocalPersistence,
  browserSessionPersistence,
  inMemoryPersistence,
  UserCredential,
} from '@angular/fire/auth';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private readonly auth: Auth) {}

  login(email: string, password: string): Promise<UserCredential> {
    return setPersistence(this.auth, browserLocalPersistence).then(() =>
      signInWithEmailAndPassword(this.auth, email, password)
    );
  }
}

And that’s it. With that one line of code, you can make your users' data more secure (or you can annoy them a lot 😄).

You can check out the full project if you have any doubts on initializing Firebase Link to code on Github

Make sure to check out the Firebase Security Course, a more complete guide that’ll help you understand and secure your application and API keys.