Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Firebase: Implementing FirebaseUI for Web Authentication

DZone's Guide to

Firebase: Implementing FirebaseUI for Web Authentication

If you're interested in implementing a better authentication process for you web application, read on to learn how to leverage FirebaseUI.

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

What's up guys, Eze is here. I wrote a post explaining how easy it is to implement Firebase Authentication in our AngularJS projects, in case you missed it here you go the link. As I told you, @lmoroney has written a bunch of posts about this topic. In one of his posts, he pointed out the need to have a good user experience during the login flow. Even if Firebase simplifies the login process we still need to write a good user interface to support the process. What if I told you that the Firebase team has this covered as well? Well, it is true, they have an amazing tool called FirebaseUI for web apps.

Adding the Component to Our Project

The first thing we need to do is to add this awesome component to our project. In order to do that we have several options:

  • CDN: Just reference the.js and the.css files from this location: https://cdn.firebase.com/libs/firebaseui/1.0.0/
  • npm Module: By executing this command you can get all the necessary files: $ npm install firebaseui --save
  • bower component: You can add the reference to your bower.json file or just execute the following command to the files: $ bower install firebaseui --save. And then reference those files in your project.

If you check my code here you can see that I have the reference in my bower.json file, but you can use the option that best fit for your needs.

Using FirebaseUI

Unfortunately, this component doesn't yet have a native version for Angular, but this doesn't stop us from using it in our Angular projects. If you remember from the last post, I'm using $firebaseAuth from the Angular Fire component. In order to use the same instance of the Firebase Authentication object, I made a small modification in my auth service, as you can see in the code below.

 var authObject = firebase.auth();
 var firebaseAuthObject = $firebaseAuth(authObject);
 var ui = new firebaseui.auth.AuthUI(authObject);

With the above code, the AuthUI and $firebaseAuth object are using the same reference to the Firebase Auth object. Then we need to add the following element to our HTML. FirebaseUI will use it to display the authentication flow.

<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

And finally, we need to configure FirebaseUI by passing a config object to the start method.

 vm.callback = function(currentUser, credential, redirectUrl) {
    $rootScope.$broadcast(AUTH_EVENTS.loginSuccess, {});
    $location.path('/citytimer');
    return false;
 };

 // FirebaseUI config.
 var uiConfig = {
    callbacks: {
       signInSuccess: vm.callback,
       uiShown: function() {
          document.getElementById('loader').style.display = 'none';
       }
    },
    redirectUrl: '',
    credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM,
    queryParameterForWidgetMode: 'mode',
    signInFlow: 'popup',
    signInOptions: [
       firebase.auth.EmailAuthProvider.PROVIDER_ID
    ]
 };

 // The start method will wait until the DOM is loaded.
 authService.firebaseUI.start('#firebaseui-auth-container', uiConfig);

As you can see, the config object has a lot of properties to define our authentication process.

  • callbacks: This property contains the callback functions to execute.
  • signInOptions: In this property, we define the list of providers we have enabled in our Firebase console.
  • signInFlow: This defines if we do a full redirect to login or we just open a popup. The full redirect option is recommended for mobile versions.
  • credentialHelper: I've configured the account chooser to let the customer select the email account of their choice.

login.png

As you can see, handling the authentication using Firebase Authentication is really simple and even simpler if you add FirebaseUI for the web. I have a working example that you can check here. As I said, I just covered the basics to get the authentication in our app up and running. It's up to you guys to continue reading the documentation to get more knowledge.

If you found this post useful please don't forget to press the like button and share it. If you are in doubt don't hesitate to ask a question and as always thank you for reading.

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:
authentication ,web dev ,web application development

Published at DZone with permission of Ezequiel Reyno. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}