Firebase Authentication

In this chapter, we're going to cover the following recipes:

• Implementing email/password authentication
• Implementing anonymous authentication
• Implementing Facebook login
• Implementing Twitter login
• Implementing Google Sign-in
• Implementing user metadata retrieval
• Implementing the linking of multiple authentication providers

Introduction

If you're a web developer, you will have recognized that building a secure, well balanced, and proven authentication system is a really tedious job to do even though it's just emails and passwords.

Nowadays, web applications are using social login and it's one of the most used and requested features in today's web scene. It's an easy and quick way to authenticate and login to a web application using your daily OAuth, from Facebook to Google Plus and Twitter, even GitHub if you're building a community-based application.

"OAuth or Open Authentication is an open protocol that allows secure authorization in a simple and standard method from web, mobile and desktop applications."

- OAuth community

Firebase is here to help you with secure login by providing multi-authentication methods, for example, an email/password and social...

Implementing email/password authentication

In this recipe, we're going to demonstrate how we can implement password authentication from a really simple, widespread example scenario that is present in many different web applications. The following is a screenshot of the Firebase application supporting email/password authentication:

Figure 1: Basic application supporting email/password authentication

How to do it...

1. In the previous figure, we saw a simple login page with Email and Password fields and another button for anonymous login. First, let's see the code behind it:

      <div class="container">
        <div class="jumbotron">
          <div class="text-center"...

Implementing anonymous authentication

You might wonder why we need this. Since it's anonymous, it means that we don't have an identity on our system. That is true, but sometimes we want to have protected content that we deliver to our authorized users. So by using this method, we allow non-users to have a temporary account to experience the app. But if they, for instance, decide to create an account, we can provide them the option of linking their sign-in account to an anonymous one.

How to do it...

1. In order to do this, we will use the Firebase auth APIs like we did previously, as shown in the following code snippet:

      //Get a button reference.
      let anonLogin =    
       document.getElementById('anonymousLogin...

Implementing Facebook login

If you have tried surfing recent web apps, you will definitely be able to recognize the famous Sign in with Facebook. It is a really lovely, easy, and fast way to authenticate a user nowadays. We can bring all the basic metadata such as full name, image, email address, and basic information directly from the Facebook servers.

In this recipe, we're going to see how we can implement the Facebook login functionality in our application.

Getting ready 

Before starting, we'll need to create a Facebook app. To do so, please head directly to the Facebook Developer platform at https://developers.facebook.com. You will see a dashboard, as shown in the following screenshot:

Figure 4: Facebook...

Implementing Twitter login

Twitter is the most used social media platform in the world, with more than 300 million active users. We can't simply forget about incorporating it into our application. In this recipe, we're going to see how we can activate and implement Twitter authentication using the Firebase API.

Getting ready

Before we start the coding part, we need to make some configurations within our application. Head to your Firebase Console | Authentication | SIGN-IN METHOD tab and activate the Twitter option as shown in the following screenshot:

Figure 11: Activating Twitter authentication from the Firebase project console

Now, we will need to create a Twitter application so we can get the app key and secret...

Implementing Google Sign-in

Google mails, or simply Gmail, accounts are widely used nowadays. This is also one of the most prominent authentication methods for a large number of websites and mobile apps, as it uses the secure Google authentication system to make the secure authentication happen. It's fast, reliable, and can be a source of basic metadata for account creation. In this recipe, we're going to see how we can configure and implement Google Sign-in authentication within our application.

Getting ready

Before we write any code, we need to configure our application to host the Google Sign-in functionality within our Firebase console. To do this, you need to head to Firebase Console | Authentication | SIGN...

Implementing user metadata retrieval

In many cases, having a user dashboard populated with the user's profile information is the way to go. This works well, especially if you have a Firebase-powered business application. The Firebase auth API offers an easy way to retrieve the currently authenticated user's metadata information, and in this recipe, we're going to see how we can do just that.

How to do it...

1. In the authentication section within your code, exploit the currentUser() function, as shown in the following code block:

      var user = firebase.auth().currentUser;
      var currentUser = {};
      if (user != null) {
       currentUser.name = user.displayName;
       currentUser.email = user.email;
  ...

Implementing the linking of multiple authentication providers

Let's suppose the following: a user created a new profile with email/password authentication, then they filled in their profile information to be saved their profile, and then the operation was performed. But what will happen once they log out and want to log back in again, and find that OAuth button on the login screen? The normal behavior is that they will simply want to use the different OAuth-based authentication methods instead of adding their email/password again.

Choosing one of the many present OAuth authentication options will result in a problem. A new account will be automatically created, and that means more work for the user. From here, we come to the idea of linking multiple accounts into one.

This means that a given user will link all their OAuth authentication profiles into one. This would imply...