In this tutorial, we are going to build an authentication system in Angular using Google’s Cloud Firestore. Most of the application we build require some kind of Authentication and the simplest and fastest way to get started with that is by using the Firestore. Firestore is a flexible, scalable database for mobile, web and server development.

Sponsor: Introducing Narrately- An AI powered Text to Speech engine – It’s FREE try Today 

WHAT YOU WILL LEARN

In this article, you will learn to develop a fully functioning authentication system in Angular using Firestore. We will be using the official tool for Angular and Firebase integration – AngularFire. AngularFire allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Real-time Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database.

PREREQUISITES

In order to follow along with this tutorial please ensure you have downloaded and installed the Angular IDE. Ensure that the latest version of Angular CLI is installed on your computer. You also need a Google account to be able to sign in to Firebase Console, where you will be creating the app which we will work with, in this tutorial.

CREATE AN ANGULAR PROJECT AND A FIREBASE APP

We’ll be using the latest version of all the tech libraries and stacks as at the time of this writing. Navigate to File -> New -> Angular Project. Then choose to Create a New Project with the following, versions of software as is in the screenshot below.

Create a New Angular Project from Angular IDE

Create a New Angular Project from Angular IDE

After setting up the project to use the versions and giving it a Project name of AngularAuth click finish to create and install, this will ideally take some time, depending on how fast your internet is, so be patient.

Create a New Angular Project from Angular IDE

Create a New Angular Project from Angular IDE

Once the project is created, the next thing to do is create an app in Firebase, so navigate to the Firebase Console and then click on Add Project to create a new project. Give it a name, I’ll call mine AngularAuth, then click on Create Project afterward.

Now after the project has been created, you will be redirected to the project’s overview page, there you are meant to choose the option – Add Firebase to your web app. On clicking that, you will get a pop up with all the info such as API key that you need to be able to interact with your newly created Firebase app from the Angular application that we created in Angular IDE. That’s it for now with Firebase, let’s go back to the Angular IDE to create some components.

We need a Homepage, Login page, and Sign Up page to showcase how our Authentication is working. So we need to create an Angular component for each of these pages. We will use one of the features that make Angular IDE so awesome, the Create Component shortcut, Navigate to File -> New -> Component to create a new component.

 

Give the first component a name – homepage as in the screenshot below and uncheck the Create Component with Unit Test flag, because Unit Testing is beyond the scope of this tutorial, but we can leave the Generate Component using the prefix location flag, which is the default from Angular. The prefix is simply the word that goes before the selector of every component you generate with the CLI. If you want to know more about it or change the prefix, read more about it on this StackOverflow question here.

Click Finish when you are done. This will automatically run the command ng g component homepage –spec false in Angular IDE’s terminal.

Now let us run our app to confirm everything is working. Go into the Angular IDE and type the command ng serve

On running ng serve I got the following error


~/Workspaces/Dunebook/AngularAuth
$ ng serve
You seem to not be depending on "@angular/core". This is an error.

If you got that same error, run npm install to install the npm packages required to get your app up and running. Check out this page to install yarn, if you don’t have it yet. After running npm install successfully, the ng serve command will now run successfully. Visit this link to see your app working.

Now, let’s go ahead and remove the default content that came with the new application. Navigate to src/app/app.component.html to see the code. Select all content of this file and delete it. When you hit save and check your browser now, the page should be blank. The app.component.html file now becomes the new base/host for our homepage. Go ahead and add the selector of the homepage component there. To do that, type the following code (for some unknown reason I could not paste the code so I’ll attach the screenshot). Save it now and your site should reload to show the content of homepage.component.html.

The app-homepage is the selector for the homepage component we created earlier.

Next, we will create the other two components needed to run the app and then install AngularFire2 and Firebase. Run the following commands to do that.


ng g c login --spec false && ng g c signup --spec false && npm install firebase angularfire2

The above command will create a LoginComponent, SignupComponent and then install firebase and angularfire2 npm packages.

Now, with the installed npm packages we need configure our Firebase application to enable it to be able to communicate with your Angular application.

Angular Authentication With Firebase

Firebase Config set up for Angular Authentication

First, we will import the AngularFire modules to the app.module.ts file. My app.module.ts file looks like this after the new config is added. The lines in bold need to be added to your app.module.ts

When you click on Add Firebase to your web app you should get a pop up similar to the image below.

Firebase Auth Config for Authentication in Angular

Firebase Auth Config for Authentication in Angular


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
 // Copy the firebaseConfig from your created project on the firebase console. Here, click on the project name and then on the project dashboard, click on Add firebase to your web app. Replace the values below with yours, values below will not work for you because I have removed some characters from it.
const firebaseConfig = {
apiKey: 'AIzaSyAywNGLBVmlk98jwaeqsFdm1hNMQ',
authDomain: 'angularauth-502.firebaseapp.com',
databaseURL: 'https://angularauth-502.firebaseio.com',
projectId: 'angularauth-502',
storageBucket: 'angularauth-502.appspot.com',
messagingSenderId: '11240551'
};
 
@NgModule({
declarations: [
AppComponent,
HomepageComponent,
LoginComponent,
SignupComponent
],
imports: [
BrowserModule,
FormsModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Next, we will set up the Authentication methods, by clicking on the Authentication link described in the screenshot above. Once there, enable Sign-in for Email/Password and Google and then save. To enable for other providers you need an API key and API secret. Which can be easily generated by visiting the developers’ section of each of the providers.

prevChapter 1 of 2