Authentication with Firebase

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

Adding Authentication with Firebase

In this tutorial we will show you how to 

1. Enable Container (view) that allows the user to sign in if they are signed out.

2. Create a form that can log users into Firebase Auth from your sign in Container element.

3. Create a separate Container for logged in users and enable that when there is a user signed in.

4. Create different views based on what type of user is signed in (admins vs employees)

5. Add the ability to sign up as well as sign in.

Before You Log In

Because we want the logged in status of the user to determine what the user sees first in the application, we want to put the Firebase Auth element at the app level of our hierarchy. This element will automatically check if a user is signed in or not. In our user's first step of their authentication journey, this element should trigger the event onSignedOut since no authentication has taken place. 

So the first thing we need to do is ensure that when onSignedOut is triggered, we have a login view. We can drop a Container called login into our flow panel and activate that element while deactivating any views that we want reserved only for signed in users.

In this example, I have a container to hold the view for employees, one to hold the view for admin users, and one for the login screen. When my Firebase Auth element triggers onSignedOut, as it will when the app first loads and we don't have a current user, it will first activate (set the display to active) the login Container and then deactivate (set display to none) the admin and employee Containers.

Logging In

For the simplest implementation, in my login Container I am going to add a form that holds two text inputs: one for the user's password and one for their email. OnSubmit I am going to get these values and use them with the signInWithEmail element on another Firebase Auth element I have placed in this container. 
The Firebase Auth elements can be used in different parts of your app, but they will all work the same. Signing into Firebase Auth inside of the login Container as we have shown here will stop triggering onSignedOut at our app level and instead trigger onSignedIn

After Sign In

For the simplest implementation of authentication, we can deactivate the login screen and activate a new Container to show information that is customized to the current user. We are getting information about the user based on the method getCurrentUser from our Firebase Auth element. This returns an object that will hold all of the information you store about each user.

For Different Levels of Access

To make this one step more complicated, you can have different views for admins by looking for whitelisted emails and using the Switch element to show some users a separate view. 

Showing Different Views for Log In and Sign Up

There are a number of ways you could go about this, but I will show one implementation where the form remains the same for log in or sign up and we just switch the text. In Firebase Auth, signInWithEmail and signUpWithEmail require the same information so we can just reuse the same form. The implementation will look something like this: 

In our login form, we will add two text inputs- one for the user to input their email and another for their password. I will also add a submit button, and below it I will add a smaller button with a text label that will change on click to also change the functionality of the submit button. 

In the form, we will change the text by setting a variable and using a Switch label to decide if we want to use the text "Sign Up" or "Sign In". Each string of text will also have it's own variable.

Now all we need to do is change the value of onSubmit for the form based on the value of the Text Label Variable. We can do this at the level of the login Container using another Switch 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