Learn how to reset, refresh, or terminate your users auth sessions

Tools used:
Backend: Firebase -- Version: 7.14.2
Helper Library: @angular/fire -- Version: 6.0.0

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?

Prefer the video version?

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('local) to keep the user logged in at all times.
  • .setPersistence('session') to only keep the session active while the browser is open.
  • .setPersistence('none) => 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 promise, so you can create a login function that sets the persistence and then logs in the user like this:

constructor(afAuth: AngularFireAuth){}

login(email: string, password: string) {
  return this.afAuth.setPersistence('local').then(_ => {
    return this.afAuth.signInWithEmailAndPassword(email, password);
  });
}

Also, note that Firebase also provides with constants you can use for the values, that way we avoid passing string values that who knows if they change in the future, so instead of passing directly 'local' you can use the constant like this:

constructor(afAuth: AngularFireAuth){}

login(email: string, password: string) {
  return this.afAuth.setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(_ => {
    return this.afAuth.signInWithEmailAndPassword(email, password);
  });
}

The constant names are the same as the values, but they’re all uppercase.

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 😄).