Firebase Auth

Modified on Wed, 22 Jun 2022 at 10:36 AM

Using Firebase

To access your Firebase account, on any Firebase element you will need to add your apiKey, authDomain, and projectId.


For authentication you will need to select your type of auth persistence. Firebase allows three options here:


TypeDescription
localThe state will be persisted even after the browser window is closed. Signing out requires an explicit event.
sessionThe state will only persist in the current session or tab and and will be cleared when the tab or window is closed.
noneThe state will only be stored in memory and will be cleared on refresh.


User Sign In

There are three ways to access Firebase with the Firebase Auth element. You can use an auth provider, an email and password, or a token.


signin > authProvider:

Firebase offers authentication with the following providers:

  • Google
  • Facebook
  • Twitter
  • Github
  • Microsoft
  • Apple
  • Yahoo

signinWithEmail:



signInWithToken:


Sign in with token requires the use of the AuthO Login and AuthO Firebase elements.


The flow starts with something activating the login action in AuthO Login. This element requires your domain and clientId and will automatically bring up a login modal.


We can connect the onTokenGen action from AuthO Login to the setToken action on AuthO Firebase to create a Firebase token. This may be passed off to the Firebase Auth element using the onFirebaseToken action.


From here you can use actions like onAuthStateChangedonReady, or onSignedIn to redirect your user.


Creating Different Levels of Access


When the Firebase Auth element instantializes, the element will check for the existence of a cookie to determine if the user is signed in or not. Based on this, you may redirect the user to different pages depending on the sign in state using the actions onSignedIn, onSignedOut, and getCurrentUser. 


Example:



This is a complex example, where there are two trees of events:


1) onSignedOut: If the user is signed out, the Sequence element will ensure that the screen for admins and employees is deactivated and activate the login screen. 


2) onSignedIn: If the user is signed in, we will use the data from getCurrentUser and switch the use case based on which user we have using the Switch element. Regardless of whether the user is an admin or an employee, we will activate the appropriate screen and ensure the others are deactivated using the Sequence element.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article