Getting Started with Firebase - Authentication
Tags: firebase, codenewbie, beginners
Published: 2019-08-06 15:40:23

---
title: Getting Started with Firebase - Authentication
published: true
description: Brief intro to get started with Firebase authentication services.
tags: Firebase, CodeNewbie, Beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6e8526kgk3g7y7zprmit.png
canonical_url: https://terabytetiger.com/lessons/getting-started-with-firebase-authentication/
---

_Note: I am not a Firebase affiliate_

## What is Firebase?

[Firebase](https://firebase.google.com/) is a collection of tools provided by Google including tools such as cloud databases, authentication, hosting, and serverless functions for use with web and mobile apps. One of the appeals of Firebase is the ability to get started with the free tier plan and only need to pay once your project hits certain usage numbers.

In this post, I'll walk through the basics of getting authentication working.

## Creating a project
A "Project" is how Firebase refers to your website/app and the connections back to Firebase's services. From [firebase.google.com](https://firebase.google.com), you can sign in (top right) and click "Go to console"(also top right corner).

### The Console
The console is the place where all your projects live. Once you've added projects to your account, they will appear here. Selecting a project card will take you to the dashboard for that project - that's where you'll adjust settings for your project. 

### Add a Project
Adding a project is a very quick process. Click the "Add Project" card, add your project name, adjust the location if needed, and accept the terms & conditions (after reading them, of course) - That's it!

!["Add a Project Card"](https://thepracticaldev.s3.amazonaws.com/i/5nddfohh5j9l2dst9v0b.PNG)

### A note on free projects
It's probably a good time to mention that each project gets its own plan, so you don't have to worry about your projects compounding to break past the free tier limits (although there is a limit on quantity of free projects allowed - [More Details](https://firebase.google.com/support/faq)). 

## Connecting our webpage
Before we can use Firebase's services, we have to create a link between our page and Firebase. To do this, click the icon that looks like an html closing tag (third white-background icon from the left): 

!["Firebase list of compatible platforms"](https://thepracticaldev.s3.amazonaws.com/i/0apq3izkgnkx9p0tktqv.PNG)

Here, you'll add your app's nickname (this can be anything) and add hosting if you'd like (deploy your website through Firebase - I won't be covering hosting in this article, so I left this unchecked).

Once you click "Register app", you'll be provided an HTML code block and instructions to add this to the end of your `<body>` (but before trying to use Firebase). 

I'll be adding this to a boilerplate HTML file (`index.html`):

**Note that you'll need to add the provided firebaseConfig object values**

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Firebase Example</title>
</head>
<body>
  <div id="firebaseui-auth-container">
    <!-- This is where the Login ui will load -->
  </div>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>
<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    REPLACE THIS WITH THE CODE PROVIDED BY FIREBASE
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
```
### A brief breakdown 
This block loads Firebase, similar to if you've ever used jQuery. 
```html
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
```

This block will be replaced with additional services that you want your page to load. In this case, we are loading the authentication services: 
```html
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>
```

Finally, this block provides the details to Firebase, creating a connection back to your project. This is like calling your friend on the phone and waiting for them to answer. Once they answer, you can talk their ear off! 
```html
<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    REPLACE THIS WITH THE CODE PROVIDED BY FIREBASE
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
```

---

Now that we have our project created, let's add Authentication. 

## Authentication

Many apps want to leverage the power of an authentication system, but trying to sort out connections to various services _and_ allowing an email login can be a lot of work. Thankfully, Firebase takes a lot of the work out of your hands and allows you to easily start with one service and add in additional services over time.

### Enable Authentication
To enable authentication, click the Authentication card or select "Authentication" from the left hand navigation, then "Set up sign-in method" once the page loads. This is where you can setup the providers you would like users to be able to sign in with. 

!["Authentication Card linking to Authentication configuration page"](https://thepracticaldev.s3.amazonaws.com/i/26cqysfdcw94fs3n0md0.PNG)

For this tutorial, I'll be touching on Email/Password and Google since these are the two options I've used in the past. 

#### Email/Password
The most basic sign in option, this allows users to use their email/password to sign up/in. Enabling this is as easy as flipping the first toggle switch after clicking "Email/Password" from the Sign-In providers list, then clicking "Save".

!["Setup Email Address Config within Authentication page."](https://thepracticaldev.s3.amazonaws.com/i/olj7eq07bcnb1vkot7yt.PNG)

#### Google Sign In
This will allow users to sign in with their Google account (similar to how you signed into Firebase). Similar to Email/Password, you'll be able to flip the enable switch to "Enabled", but there is an extra step here. You'll need to add a support email, which needs to be a valid Gmail account. This is for users to submit support emails if needed.

!["Google login config setup. Email address redacted."](https://thepracticaldev.s3.amazonaws.com/i/lzr3hi15uvrr9l2qaf3n.PNG)

#### Other options
For external services, details on connecting to providers can be found in the corresponding docs (linked here):

* [Facebook](https://firebase.google.com/docs/auth/web/facebook-login)
* [Twitter](https://firebase.google.com/docs/auth/web/twitter-login) 
* [GitHub](https://firebase.google.com/docs/auth/web/github-auth)
* [Microsoft](https://firebase.google.com/docs/auth/web/microsoft-oauth)
* [Yahoo](https://firebase.google.com/docs/auth/web/yahoo-oauth)
* [Phone Number](https://firebase.google.com/docs/auth/web/phone-auth)


## Authentication UI
Now that we have our connection setup to talk to Firebase, we need to add the interface for the user. I'll be using [Firebase UI](https://github.com/firebase/firebaseui-web) for this, which involves adding the following:
```diff
      // ...
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
    <!-- Firebase UI -->
+    <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css"
+    />    
+    <script src="./auth.js"></script>
  </body>
</html>
```

These additions will load the Firebase UI information we need, but we need to tell it what configuration to use (this is where the `auth.js` file comes in). 

### Auth.js
First, we'll need to create `auth.js` in the same directory as our `index.html` file. 

Within `auth.js`, we will be adding the following:

```javascript
// 1) Create a new firebaseui.auth instance stored to our local variable ui
const ui = new firebaseui.auth.AuthUI(firebase.auth());

// 2) These are our configurations.
const uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult(authResult, redirectUrl) {
      return true;
    },
    uiShown() {
      document.getElementById('loader').style.display = 'none';
    },
  },
  signInFlow: 'popup',
  signInSuccessUrl: 'signedIn',
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    // Additional login options should be listed here
    // once they are enabled within the console.
  ],
};

// 3) Call the 'start' method on our ui class
// including our configuration options. 
ui.start('#firebaseui-auth-container', uiConfig);
```

Now, if you open your `index.html` file in your browser, you should see the following loading on the page:

!["Buttons on page for logging in with email or google account."](https://thepracticaldev.s3.amazonaws.com/i/aewcmkoizxqwjxlus4o1.PNG)

🎉 Congrats! You've got an authentication UI ready to use! (Although it won't work until it's on a server; i.e. if you configured firebase hosting earlier)

{% github https://github.com/12vanblart/firebase-example %}