Firebase Sign Out with Angular 7|8|9

By Digamber Rawat Last updated on

In this tutorial, I am going to share with you How you can sign out from Angular 7|8|9 App using Firebase Auth Service?

Firebase offers a plethora of features to build fast, reliable and secure authentication system. In order to build Firebase auth logout service, you must create a sign in service only after you can create Firebase signout service.

For the demo purpose, I will be setting up AngularFire2 library with your Angular application.

Step: 1 – Set up Angular App

ng new angularfirebaseproject

Your basic project will be set up after that don’t forget to get into the project directory by using the following command.

cd angularfirebaseproject

You can follow this detailed article to set up the Angular project with external dependencies like Bootstrap4, FontAwesome, SASS, and NgBootstrap.

Generate components for Angular app.

ng g c signup
ng g c signin
ng g c dashboard

Step: 2 – Setup AngularFire2 Library in Angular

Now setup Firebase (AngularFire2 library) in your Angular project.

npm install firebase @angular/fire --save

Once you are done setting up this library, make the connection between your Firebase account and your Angular app.

Go to src/environments/enviorment.ts and enviorment.prod.ts files in your project’s enviornments folder. Then add your firebase configuration details in both the environment files as given below.

Firebase Credentials Setting

Step: 3 – Create Auth Service authentication.service.ts

ng generate service authentication

Step: 4 – authentication.service.ts

// Auth service
import { AuthenticationService } from "./shared/services/auth.service";

 providers: [
    AuthenticationService
  ]

Step: 5 – Generate Authentication Service Core File

import { Injectable } from '@angular/core';
import { AngularFireAuth } from "@angular/fire/auth";

@Injectable({
  providedIn: 'root'
})

export class AuthenticationService {

  constructor(
    public afAuth: AngularFireAuth // Inject Firebase auth service
  ) { 
  }

  // Sign up with email/password
  SignUp(email, password) {
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .then((result) => {
        window.alert("You have been successfully registered!");
        console.log(result.user)
      }).catch((error) => {
        window.alert(error.message)
      })
  }

  // Sign in with email/password
  SignIn(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((result) => {
         this.router.navigate(['<!-- enter your route name here -->']);
      }).catch((error) => {
        window.alert(error.message)
      })
  }

  <!-- SignOut method for logging out from the Angular/Firebase app-->
  SignOut() {
    return this.afAuth.auth.signOut().then(() => {
      this.router.navigate(['sign-in']);
    })
  }

}

We’ve successfully created authentication.service.ts file. I’ve created 2 methods using FirebasecreateUserWithEmailAndPassword(email, password) and signInWithEmailAndPassword(email, password) APIs.

  • SignUp(email, password): This method creates a new user with email and password using Firebase API with Angular.
  • SignIn(email, password): This method allows a user to sign in with email and password.
  • SignOut(): This method logs out a user from Angular and Firebase app.

Step: 6 – Sign up with AuthenticationService API

Go to your signup.component.ts file and add the following code.

import { Component } from '@angular/core';
import { AuthenticationService } from "../../shared/services/authentication.service";

@Component({
  selector: 'app-sign-up',
  template: `
      <div class="authBlock">
        <h3>Sign Up</h3>
        <div class="formGroup">
          <input type="text" class="formControl" placeholder="Username" #userEmail required>
        </div>
        <div class="formGroup">
          <input type="password" class="formControl" placeholder="Password" #userPassword required>
        </div>
        <!-- Calling SignIn Api from AuthenticationService -->
        <div class="formGroup">
          <input type="button" class="btn btnPrimary" value="Sign Up" (click)="authenticationService.SignUp(userEmail.value, userPassword.value)">
        </div>
     </div>`
})

export class SignInComponent implements OnInit {

  constructor(public authenticationService: AuthenticationService) { }

}

Step: 7 – Create User Sign In Service

Go to your signin.component.ts file and add the following code.

import { Component } from '@angular/core';
import { AuthenticationService } from "../../shared/services/authentication.service";

@Component({
  selector: 'app-sign-in',
  template: `
      <div class="authBlock">
        <h3>Sign In</h3>
        <div class="formGroup">
          <input type="text" class="formControl" placeholder="Username" #email required>
        </div>
        <div class="formGroup">
          <input type="password" class="formControl" placeholder="Password" #password required>
        </div>
        <!-- Calling SignIn Api from AuthenticationService -->
        <div class="formGroup">
          <input type="button" class="btn btnPrimary" value="Log in" (click)="authenticationService.SignIn(email.value, password.value)">
        </div>
     </div>`
})

export class SignInComponent implements OnInit {

  constructor(public authenticationService: AuthenticationService) { }

}

Step: 8 – Create Firebase Sign Out Service

Once you are logged in your app you’ll be redirected to the dashboard component. then use the given below code to create Angular Firebase sign out service.

import { Component } from '@angular/core';
import { AuthenticationService } from "../../shared/services/authentication.service";

@Component({
  selector: 'app-dashboard',
  template: `
      <div class="authBlock">
        <h3>Hello User</h3>
        <!-- Calling SignOut Api from AuthenticationService -->
        <div class="formGroup">
          <input type="button" class="btn btnPrimary" value="Log in" (click)="authenticationService.SignOut()">
        </div>
     </div>`
})

export class SignInComponent implements OnInit {

  constructor(public authenticationService: AuthenticationService) { }

}
You can also check out my detailed article on Full Firebase Authentication System with Angular 7.

GitHub Project Files

GitHub Resources

I hope you must be able to create a sign in, sign up or sign out service using Firebase APIs with Angular 7|8|9.

Thanks a lot for taking the time to read this tutorial, I hope this tutorial has been helpful to you. If you think this tutorial has helped you then share this tutorial with others.

You can also follow me on Twitter @ImDigamberSingh

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.