Auth flows with #Firebase UI on the Web

Firebase Auth is a secure authentication system that allows users to sign up and sign in for your application. It allows you to use federated identity through providers, such as Facebook, Twitter, and of course – Google. When doing this, your users will demand a rich user experience, and the burden of implementing this will fall on you as a developer. In addition, creating apps that allow for sign in involves a lot more than just signing in — there are many other user flows, such as choosing from multiple accounts, signing up for new accounts, resetting passwords and more. This can be a lot of work!

Luckily, the open-source FirebaseUI libraries make all of this really easy. In this post, you’ll take a look at building a simple web site that allows for sign in and sign up. You’ll use two providers: The built-in Email/Password on Firebase, and federated identity using Google Sign-In.

Getting Started

To use FirebaseUI, you need a Firebase app or site, and you created these on the Firebase Console. From here, select ‘Authentication’ on the left (1).
When you select ‘Sign-In Method’ at the top, you’ll be given a list of Sign-in providers. Choose ‘Email/Password’ and ‘Google’ (2). Make sure they’re enabled.

Additionally, if you are going to host these pages on your own domain, make sure the domain is added to the list of OAuth redirect domains at the bottom of the screen. (3).

Now, back on the Overview screen for your project, click ‘Add Firebase to your Web app’, and you’ll see a popup like this:

This contains all the code you need to initialize Firebase on your web site. Let’s take a look at a simple 2-page web site next: one page for signing in, and one page for after you’ve signed in.

A simple site with Sign In

I’ve built and hosted a simple site using FirebaseUI Auth here. The first page you see when you go to this site looks like this:
As you can see, it’s pretty straightforward, with two sign-in options — Google and Email, matching what we configured in the Firebase console.

Clicking Sign-In with Google can have multiple effects based on the context:

If you’ve signed in previously on this browser, you’ll be taken straight back into the site
If you have multiple Google accounts, you’ll be given the account chooser, with the choice to pick a different account, or create a new one, like this:
If you haven’t signed in on this browser, and don’t have a Google account, you’ll be given the option to enter one, or create a new one, like this:
Clicking on the Create account link will take you through the standard user flow for creating an account, which will return you to your site to sign in when you’re done.

Similarly when using Email/Password auth, you’ll get the full user flow.

If you’ve signed in with an Email/Password combination before, and you’re the only user, you’ll go straight into the site.

If you’ve signed in with an Email/Password combination before, but aren’t the only user, you’ll get a list of accounts to choose from, like this:

This also gives you the facility to add a new account, and doing so creates a new account on firebase that you can use to sign in in future. There are many scenarios, with a very complex flow. To see a detailed flowchart of these, click here.

So let’s look at the code needed to implement this!

Coding the Log In Page

Here’s the full source code for the Log In page you’ve seen in this post. You’ll see that there are two highlighted blocks. The first is the initialization code that you got from the Firebase console earlier. The second uses the FirebaseUI open source code to create the user interface widgets.

The things to note in the second block are the signInSuccessUrlparameter, which is the address of the page to redirect to once the sign in is successful. Also, note the signInOptions setting where Google Sign-In and Email Sign-In are configured.

Note that this is all the code you need to implement to get the user flows mentioned earlier. Everything is encapsulated in the open source library.

The Signed-In page will need the first block of code in order to ensure that it uses Firebase, and then, when the firebase.auth().onAuthStateChanged event fires, you know the user is signed in, and you can query their exposed metadata.

Here’s the code:

 

And that’s it! Hopefully this primer will help you understand the power that you get with the FirebaseUI Auth libraries, and how they make it much easier for you to build web apps that sign in!