Full Angular 7 Firebase Authentication System

Full Angular 7 Firebase Authentication
System

Hello folks! in this tutorial, I am going to share with you How to create a full step
by step Angular 7 Firebase Authentication System from scratch using Firebase
API?
In this article, you’ll be able to create Firebase authentication system using social
auth provider
For the demo purpose, I’m going to create a basic app in which a user can
perform the following tasks.
Angular 7 Firebase Authentication System’s
Functionalities:
● Sign in with Google
● Sign in with username/password
● Sign up with username/password
● Recover forget password
● Send email verification to a newly created user

● Protect app’s inner pages URL using route guard’s canActivate method
● Prevent user to access sign in and sign up URL when a user is already
logged in
● Maintain logged in state of Firebase user in localStorage
Step by step Explanation
1. Technologies used
2. GitHub project files + project demo link
3. Prerequisite
4. Firebase account set up and AngularFire2 library integration
5. Generate required Angular components
6. Setup router service for navigating between components
7. Create firebase authentication service using Firebase API
8. Create Sign in authentication service using AuthService API
○ Create sign in with Username/Password
○ Create sign in with Google
○ Create sign in with Facebook
9. Create Firebase sign up service using Firebase API in Angular 7
10.Create Firebase forgot password service using Firebase API in Angular 7
11.How to send email Verification using Firebase API in Angular 7?
12.How to use CanActivate method to prevent Access of URLs in Angular 7 app
using route guards?
13.How to maintain logged in state of Firebase user in localStorage with Angular 7?
1. Technologies used
● Node 8.11.1
● Angular CLI 7.0.7
● Angular 7.0.7
● Firebase 5.7.0
● RxJS 6.3.3
● Typescript 3.1.6
2. GitHub Project Files + Project Demo Link

GitHub ResourcesProject Demo
3. Prerequisite
– Setup Node JS development environment
Before we move ahead I’m assuming you already have Node JS development
environment set up in your system.
Please follow this link How to Set up Node JS Development Environment?
– Install Angular CLI
Install Angular CLI, Ignore if Angular CLI is already installed.
npm install -g @angular/cli
– Angular 7 Project Set up
Use the given below cmd to setup the Angular project.
ng new angularfiebase-authentication
Once the project is downloaded, get into the project directory.
cd angularfirebase-authentication
Congrats! You are in your project directory.
For the demo purpose, we’ll be using Bootstrap4, use the given below command
to install Bootstrap4 in your project.
npm install bootstrap
Go to angular.json file and replace the given below code with “styles”: [ ] array.

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Run the following command to start your project.
ng serve --open
How to Setup Angular 7 Project using Bootstrap 4, SASS, Font Awesome, and
Ng Bootstrap?
4. Firebase Account Set up and AngularFire2 Library
Integration
I assume you have already created a basic project in Firebase account, if not then
follow this tutorial How to setup a basic Firebase account and set up a Firebase
Project?
How to include Firebase AngularFire2 library in your Angular app?
Include AngularFire2 library in your Angular 7 app from Node Package
Manager(NPM).
Run the given below command using Angular CLI.
npm install firebase @angular/fire --save
Once the AngularFire2 library included in the app then go to
src/app/app.module.ts file and add the given below code.
// Firebase services + enviorment module
import { AngularFireModule } from "@angular/fire";

import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFirestoreModule,
]
})
5. Generate Required Angular Components
In order to create a complete Angular 7 Firebase Authentication system, we are
required to generate components, services, route guards, routing services etc.
Generate Components for Angular 7 Firebase Authentication System App
ng g c components/dashboard
ng g c components/sign-in
ng g c components/sign-up
ng g c components/forgot-password

ng g c components/verify-email

6. Setup Router Service for Navigating between
Components
Create Angular router service for navigating between components in Auth app.
When we initially create a new project using Angular CLI. Angular CLI asks to
create routing service where you have to simply choose yes and hit enter.
Digambers-MacBook-Pro:Desktop digambersingh$ ng new
angularfirebase-authentication
? Would you like to add Angular routing? (y/N)

This will create src/app-routing.module.ts file. In our project, we have kept this
file in the src/shared/routing/app-routing.module.ts folder for the better
manageability purpose.
Go to src/shared/routing/app-routing.module.ts file, paste the given below code
for creating navigation service in your Angular 7 Firebase authentication system
app.
import { NgModule } from '@angular/core';
// Required services for navigation
import { Routes, RouterModule } from '@angular/router';

// Import all the components for which navigation service has to be activated
import { SignInComponent } from '../../components/sign-in/sign-in.component';
import { SignUpComponent } from '../../components/sign-up/sign-up.component';
import { DashboardComponent } from

'../../components/dashboard/dashboard.component';
import { ForgotPasswordComponent } from
'../../components/forgot-password/forgot-password.component';
import { AuthGuard } from "../../shared/guard/auth.guard";
import { VerifyEmailComponent } from
'../../components/verify-email/verify-email.component';

const routes: Routes = [
{ path: '', redirectTo: '/sign-in', pathMatch: 'full' },
{ path: 'sign-in', component: SignInComponent },
{ path: 'register-user', component: SignUpComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'forgot-password', component: ForgotPasswordComponent },
{ path: 'verify-email-address', component: VerifyEmailComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

export class AppRoutingModule { }
Go to app.module.ts file and include app routing service and also include in
imports array like given below.
// App routing modules
import { AppRoutingModule } from './shared/routing/app-routing.module';

@NgModule({
declarations: [...],
imports: [
AppRoutingModule
],
providers: [...],
bootstrap: [...]
})
7. Create Firebase Authentication Service using
Firebase API
Generate auth service and user interface files to create a Firebase authentication
system with Angular 7.
– Create user.ts file
ng generate interface shared/services/user
Go to shared/services/user.ts
This user interface class will hold the data types of the User class.
export interface User {
uid: string;
email: string;
displayName: string;
photoURL: string;

emailVerified: boolean;
}
– Create auth.service.ts file
This file holds the core logic of our authentication system. I’ll be covering up
social login using Firebase’s Google auth provider. You can also create the login
with Facebook, Twitter, and GitHub later on by following the same method.
I am also going to cover up the sign in and sign up using username/password,
reset forgot password, email verification, route protection using canActivate auth
guard method.
import { Injectable, NgZone } from '@angular/core';
import { User } from "../services/user";
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore, AngularFirestoreDocument } from
'@angular/fire/firestore';
import { Router } from "@angular/router";

@Injectable({
providedIn: 'root'
})

export class AuthService {
userData: any; // Save logged in user data

constructor(
public afs: AngularFirestore, // Inject Firestore service
public afAuth: AngularFireAuth, // Inject Firebase auth service

public router: Router,
public ngZone: NgZone // NgZone service to remove outside scope warning
) {
/* Saving user data in localstorage when
logged in and setting up null when logged out */
this.afAuth.authState.subscribe(user => {
if (user) {
this.userData = user;
localStorage.setItem('user', JSON.stringify(this.userData));
JSON.parse(localStorage.getItem('user'));
} else {
localStorage.setItem('user', null);
}
})
}

// Sign in with email/password
SignIn(email, password) {
return this.afAuth.auth.signInWithEmailAndPassword(email, password)
.then((result) => {
this.ngZone.run(() => {
this.router.navigate(['dashboard']);
});
this.SetUserData(result.user);
}).catch((error) => {
window.alert(error.message)

})
}

// Sign up with email/password
SignUp(email, password) {
return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then((result) => {
/* Call the SendVerificaitonMail() function when new user sign
up and returns promise */
this.SendVerificationMail();
})
}

// Send email verfificaiton when new user sign up
SendVerificationMail() {
return this.afAuth.auth.currentUser.sendEmailVerification()
.then(() => {
this.router.navigate(['verify-email-address']);
})
}

// Reset Forggot password
ForgotPassword(passwordResetEmail) {
return this.afAuth.auth.sendPasswordResetEmail(passwordResetEmail)

.then(() => {
window.alert('Password reset email sent, check your inbox.');
window.alert(error)
})
}

// Returns true when user is looged in and email is verified
get isLoggedIn(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
return (user !== null && user.emailVerified !== false) ? true : false;
}

// Sign in with Google
GoogleAuth() {
return this.AuthLogin(new auth.GoogleAuthProvider());
}

// Auth logic to run auth providers
AuthLogin(provider) {
return this.afAuth.auth.signInWithPopup(provider)
.then((result) => {
})

window.alert(error)
})
}

/* Setting up user data when sign in with username/password,
sign up with username/password and sign in with social auth
provider in Firestore database using AngularFirestore +
AngularFirestoreDocument service */
SetUserData(user) {
const userRef: AngularFirestoreDocument<any> =
this.afs.doc(`users/${user.uid}`);
const userData: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
emailVerified: user.emailVerified
}
return userRef.set(userData, {
merge: true
})
}

// Sign out
SignOut() {
return this.afAuth.auth.signOut().then(() => {
localStorage.removeItem('user');

this.router.navigate(['sign-in']);
})
}

}
After that, go to src/app.module.ts file and import authentication service and
pass the AuthService class into providers: [AuthService] array. By doing this our
authentication service will be available throughout the application.
// Auth service
import { AuthService } from "./shared/services/auth.service";

@NgModule({
declarations: [...],
imports: [...],
providers: [AuthService],
bootstrap: [...]
})
8. Create Sign in Authentication Service using
AuthService API
It’s time to consume custom AuthService API, we’ll be consuming following
services using AuthService API.
● Create Sign in with Username and Password
● Create Sign in with Google
● Create Sign in with Facebook

In order to consume custom API from AuthService class we need to import
AuthService class into src/app/components/sign-in/sign-in.component.ts file and
then inject AuthService class into the constructor so that these services will be
available throughout the same template.
Go to src/app/components/sign-in/sign-in.component.ts file and paste the
following code.
import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../shared/services/auth.service";

@Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css']
})

export class SignInComponent implements OnInit {

constructor(
public authService: AuthService
) { }

ngOnInit() { }

}
We’ve already generated our components, go to
src/app/components/sign-in/sign-in.component.html file and paste the following
code.

<button type="button" class="btn googleBtn"
(click)="authService.GoogleAuth()">
<i class="fab fa-google-plus-g"></i>
Log in with Google
</button>
</div>

<div class="forgotPassword">
<span routerLink="/forgot-password">Forgot Password?</span>
</div>
</div>

<div class="redirectToLogin">
<span>Don't have an account?<span class="redirect"
routerLink="/register-user"> Sign Up</span></span>
</div>

</div>
</div>

9. How to Create Firebase Sign up Service using
Firebase API in Angular 7?
In this section, I am going to share with you, how to create Firebase sign up
service using Firebase API in Angular 7?
Go to src/app/components/sign-up/sign-up.component.ts file and add the
following code.


@Component({
selector: 'app-sign-up',
templateUrl: './sign-up.component.html',
styleUrls: ['./sign-up.component.css']
})

export class SignUpComponent implements OnInit {

constructor(
) { }

ngOnInit() { }

}
Go to src/app/components/sign-up/sign-up.component.html file and add the
following code.

<h3>Sign Up</h3>

<input type="email" class="formControl" placeholder="Email Address"
#userEmail required>
</div>

<input type="password" class="formControl" placeholder="Password"
#userPwd required>
</div>

<input type="button" class="btn btnPrimary" value="Sign Up"
(click)="authService.SignUp(userEmail.value, userPwd.value)">
</div>

<span class="or"><span class="orInner">Or</span></span>
</div>


<button type="button" class="btn googleBtn"
(click)="authService.GoogleAuth()">
<i class="fab fa-google-plus-g"></i>
Continue with Google
</button>

</div>


<button type="button" class="btn facebookBtn"
(click)="authService.FacebookAuth()">
<i class="fab fa-facebook"></i>
Continue with Facebook
</button>
</div>
</div>

<span>Already have an account? <span class="redirect"
routerLink="/sign-in">Log In</span></span>
</div>
</div>

</div>
10. How to Create Firebase Forgot Password Service
using Firebase API in Angular 7?
We are going to create Firebase forgot password service using Firebase API in
Angular 7using our custom made AuthService API.
Go to src/app/components/forgot-password/forgot-password.component.ts add
the following code.


@Component({
selector: 'app-forgot-password',
templateUrl: './forgot-password.component.html',
styleUrls: ['./forgot-password.component.css']
})

export class ForgotPasswordComponent implements OnInit {

constructor(
) { }

ngOnInit() {
}

}
Go to src/app/components/forgot-password/forgot-password.component.html
add the following code.
<h3>Reset Password</h3>

<p class="text-center">Please enter your email address to request a
password reset.</p>

<input type="email" class="formControl" placeholder="Email Address"
#passwordResetEmail required>
</div>


<input type="submit" class="btn btnPrimary" value="Reset Password"
(click)="authService.ForgotPassword(passwordResetEmail.value)">
</div>
</div>

<span>Go back to ? <span class="redirect" routerLink="/sign-in">Log
In</span></span>
</div>

</div>
</div>
11. How to Send Email Verification using Firebase
API in Angular 7?

Firebase allows us to send email verification smoothly. I am going to show you
how you can achieve this functionality easily using Firebase API.
Go to src/app/components/verify-email/verify-email.component.ts file and add
the given below code.

@Component({
selector: 'app-verify-email',
templateUrl: './verify-email.component.html',
styleUrls: ['./verify-email.component.css']
})
export class VerifyEmailComponent implements OnInit {

constructor(
) { }

ngOnInit() {
}

}
Go to src/app/components/verify-email/verify-email.component.html file and add
the given below code.

<h3>Thank You for Registering</h3>

<div class="formGroup" *ngIf="authService.userData as user">
<p class="text-center">We have sent a confirmation email to
<strong>{{user.email}}</strong>.</p>
<p class="text-center">Please check your email and click on the link to
verfiy your email address.</p>
</div>


<button type="button" class="btn btnPrimary"
(click)="authService.SendVerificationMail()">
<i class="fas fa-redo-alt"></i>
Resend Verification Email
</button>
</div>

</div>

<span>Go back to?<span class="redirect" routerLink="/sign-in"> Sign
in</span></span>
</div>

</div>
</div>
12. How to Use CanActivate method to Prevent
Access of URL in Angular 7 App using Route
Guards?
In this section, I will be showing you how you can secure your app’s routes from
unauthorized access using canActivate() route guard method. This method is
pretty helpful when we need to secure our app’s URL.
First, go to src/app/shared/services/auth.service.ts file and look for the
isLoggedIn() method. This function returns the boolean result to true when the
user is logged in && user’s email is verified. If either condition doesn’t match it
will return false and doesn’t allow users to access the desired pages.


constructor(
) {
if (user) {

} else {
}
})
}

// Returns true when user is looged in and email is verified
get isLoggedIn(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
return (user !== null && user.emailVerified !== false) ? true : false;
}

}
We have to secure all the inner pages in the app which are only accessible to
logged in users.
To get this functionality, we have to generate route guard files. Run the below
command to create route guards.
ng generate guard shared/guard/auth
Go to src/app/shared/guard/auth.guard.ts file and include the following code.
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router }
from '@angular/router';

import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})

export class AuthGuard implements CanActivate {

constructor(
public authService: AuthService,
public router: Router
){ }

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> |
boolean {
if(this.authService.isLoggedIn !== true) {
this.router.navigate(['sign-in'])
}
return true;
}

}
We have successfully secured our app’s inner pages now if no user will be able
to access our app’s inner pages unless they are logged in. If anybody puts the

inner page’s URL in the browser directly then they will be redirected to the
sign-in page.
Let’s create another guard which will prevent access for sign in, sign up,
password recovery and email verification pages when the user is already logged
in.
Run the below command to generate route guard.
ng generate guard shared/guard/secure-inner-pages.guard.ts
Go to src/app/shared/guard/secure-inner-pages.guard.ts file and include the
following code.
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router }
from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})

export class SecureInnerPagesGuard implements CanActivate {

constructor(
public authService: AuthService,
public router: Router
) { }

canActivate(

next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> |
boolean {
if(this.authService.isLoggedIn) {
window.alert("You are not allowed to access this URL!");
this.router.navigate(['dashboard'])
}
return true;
}

}
We’ve successfully created canActivated guards now we have to include these
guards in routes services.
Go to src/app/shared/routing/app-routing.module.ts file.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Required components for which route services to be activated
import { SignInComponent } from '../../components/sign-in/sign-in.component';
import { SignUpComponent } from '../../components/sign-up/sign-up.component';
import { DashboardComponent } from
'../../components/dashboard/dashboard.component';
import { ForgotPasswordComponent } from
'../../components/forgot-password/forgot-password.component';
import { VerifyEmailComponent } from
'../../components/verify-email/verify-email.component';

// Import canActivate guard services
import { AuthGuard } from "../../shared/guard/auth.guard";
import { SecureInnerPagesGuard } from
"../../shared/guard/secure-inner-pages.guard";

// Include route guard in routes array
const routes: Routes = [
{ path: '', redirectTo: '/sign-in', pathMatch: 'full'},
{ path: 'sign-in', component: SignInComponent, canActivate:
[SecureInnerPagesGuard]},
{ path: 'register-user', component: SignUpComponent, canActivate:
[SecureInnerPagesGuard]},
{ path: 'dashboard', component: DashboardComponent, canActivate:
[AuthGuard] },
{ path: 'forgot-password', component: ForgotPasswordComponent,
canActivate: [SecureInnerPagesGuard] },
{ path: 'verify-email-address', component: VerifyEmailComponent, canActivate:
[SecureInnerPagesGuard] }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

export class AppRoutingModule { }
13. How to Maintain Logged in State of Firebase
User in localStorage with Angular 7?
I will be discussing with you how you can maintain the logged in user data in
Local Storage with Angular 7.
Our logic is pretty straightforward when the user is logged in we will save the
user data in Local Storage, user details will be available even if we refresh the
page. We will remove the user data from local storage if we log out from the
app.
Without wasting time let’s write our logic.
Go to src/app/services/auth.service.ts file and add the given below code.
import { Injectable, NgZone } from '@angular/core';
import { User } from "../services/user";
import { auth } from 'firebase/app';
import { AngularFirestore, AngularFirestoreDocument } from
'@angular/fire/firestore';
import { Router } from "@angular/router";

@Injectable({
providedIn: 'root'
})


constructor(
public afs: AngularFirestore, // Inject Firestore service
public router: Router,
public ngZone: NgZone // NgZone service to remove outside scope warning
) {
if (user) {
} else {
}
})
}

// Sign in with email/password
SignIn(email, password) {
return this.afAuth.auth.signInWithEmailAndPassword(email, password)
.then((result) => {
});

})
}

// Sign up with email/password
SignUp(email, password) {
return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then((result) => {
/* Call the SendVerificaitonMail() function when new user sign
up and returns promise */
this.SendVerificationMail();
})
}

// Sign in with Google
GoogleAuth() {
return this.AuthLogin(new auth.GoogleAuthProvider());
}

// Auth logic to run auth providers
AuthLogin(provider) {
return this.afAuth.auth.signInWithPopup(provider)

.then((result) => {
})
window.alert(error)
})
}

/* Setting up user data when sign in with username/password,
sign up with username/password and sign in with social auth
provider in Firestore database using AngularFirestore +
AngularFirestoreDocument service */
SetUserData(user) {
const userRef: AngularFirestoreDocument<any> =
this.afs.doc(`users/${user.uid}`);
const userData: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
emailVerified: user.emailVerified
}
return userRef.set(userData, {
merge: true
})

}

// Sign out
SignOut() {
return this.afAuth.auth.signOut().then(() => {
localStorage.removeItem('user');
this.router.navigate(['sign-in']);
})
}

}
Consume AuthService API just go to
src/app/components/dashboard/dashboard.component.html file and add the
following code.

<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0
shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0"
routerLink="/register-student">
<img class="brand-logo" src="assets/logo-positronx-white.svg"
alt="positronX.io Logo">
<span class="dasboard-text">Dashboard</span>
</a>
</nav>

<div class="container-fluid">
<div class="row">

<nav class="col-md-2 d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active">
<i class="fas fa-user"></i>User Profile
</a>
</li>

<li class="nav-item">
<a class="nav-link" (click)="authService.SignOut()">
<i class="fas fa-sign-out-alt"></i>Log out
</a>
</li>
</ul>
</div>
</nav>


<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="inner-adjust">

<div class="pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">User Profile</h1>

</div>

<div class="row" *ngIf="authService.userData as user">
<div class="col-md-12">
<div class="media">
<img class="align-self-start mr-5 img-thumbnail rounded-circle"
src="{{(user.photoURL) ? user.photoURL : '/assets/dummy-user.png'}}"
alt="{{user.displayName}}">
<div class="media-body">
<h1>Hello: <strong>{{(user.displayName) ? user.displayName :
'User'}}</strong></h1>
<p>User ID: <strong>{{user.uid}}</strong></p>
<p>Email: <strong>{{user.email}}</strong></p>
<p>Email Verified: <strong>{{user.emailVerified}}</strong></p>
</div>
</div>
</div>
</div>

</div>
</main>

</div>
</div>
It will look like this.

You can check out the project file on my GitHub repo here and check out the
demo on this link.
Thank a lot for taking the time to read this article, I believe this tutorial has been
helpful to you. If you think this has helped you can put a star on my GitHub repo
here.
Thanks! Kindly share, this tutorial with others. You can also follow me on Twitter
@ImDigamberSingh

Full Angular 7 Firebase Authentication System

More Related Content

What's hot

Similar to Full Angular 7 Firebase Authentication System

Recently uploaded

Full Angular 7 Firebase Authentication System