How to share Firebase authentication across subdomains?

Firebase has a strong feature known as Firebase authentication that allows users to log in with credentials such as email passwords, Google, Facebook, etc. However, it has a huge drawback which is supports only one subdomain. In this article, we will learn some of the ways that can be used to share Firebase authentication across subdomains.

How to share Firebase Authentication across subdomains?

When we have multiple subdomains on our website and we want our users to stay logged in throughout the whole journey across the subdomains by sharing Firebase authentication across subdomains can be helpful.

To solve this, we will utilize the below methods that Firebase has provided us with as well as make a couple of extra modifications. The methods are as follows:

1. Using signInWithEmailAndPassword
2. Using onAuthStateChanged
3. Using signOut

1. Using users-sign in

This process involves signing the user on each subdomain using the Firebase signInWithEmailAndPassword method.

The disadvantage of this method is that the user has to input credentials on every subdomain which can be a little inconvenient for the user.

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // Add user information to local storage or cookies
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // Handle errors
  });

Explanation:

• When a user navigates to a new subdomain, they are prompted to sign in.
• The signInWithEmailAndPassword method is used to authenticate the user.
• Upon successful authentication, the user's information can be stored in local storage or cookies for future use

2. Using users-checkAuthStatus

For the purpose of determining the current state of the user’s authentication on each subdomain, one can use Firebases onAuthStateChanged method.

This way the method can log when a user logs in or out and update the UI based on that.

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, add user information to local storage or cookies
  } else {
    // User is signed out
  }
});

Explanation:

• The onAuthStateChanged method is used to listen for changes in the authentication state.
• When a user signs in or out, the method is triggered, allowing us to update the UI accordingly.
• If the user is signed in, their information can be retrieved from local storage or cookies.

3. Using users-signout

When the user signs out on one subdomain, we need to ensure they are also signed out on other subdomains. This can be achieved by calling Firebase's signOut method.

firebase.auth().signOut().then(() => {
  // Sign-out successful
}).catch((error) => {
  // An error happened
});

Explanation:

• The signOut method is called when the user signs out.
• This method ensures that the user is signed out on all subdomains where they may be authenticated.

Conclusion

Firebase authentication across the subdomains is important since it improves on the user experience once they get to switch between the subdomains without the need to log in again. Using the provided methods in the examples above, you can add this functionality to your web application.