Angular 13 Firebase Sign Out or Logout Example Tutorial

Last updated on: by Digamber

In this tutorial, I am going to share with you How you can sign out from Angular 13 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.

Set up Angular App

You have to install an angular app with below command:

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

In order to remove strict type warnings or error make sure to set “strict”: false under compilerOptions property in tsconfig.json file.

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/environment.ts file in your project’s environments folder. Then add firebase configuration in environment file as given below.

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxx-xxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxx",
    appId: "xxxxx",
    measurementId: "xxxxxxxxxxxxxxxx"
  }
};

Create Auth Service

ng generate service authentication

Update code in authentication.service.ts:

// Auth service
import { AuthenticationService } from './authentication.service';
 providers: [
    AuthenticationService
  ]
Now, you have to head over to authentication.service.ts and update the code inside the file.

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
@Injectable({
  providedIn: 'root',
})
export class AuthenticationService {
  constructor(
    public afAuth: AngularFireAuth // Inject Firebase auth service
  ) {}
  // Sign in with email/password
  SignIn(email, password) {
    return this.afAuth
      .signInWithEmailAndPassword(email, password)
      .then((result) => {
        console.log(result);
      })
      .catch((error) => {
        window.alert(error.message);
      });
  }
  SignOut() {
    return this.afAuth.signOut().then(() => {
      window.alert('Logged out!');
    });
  }
}

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

  • 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.

Create Firebase Sign Out Service

Use the given below code to build the Firebase sign out feature in Angular. Update given code in app.component.ts file.

import { Component } from '@angular/core';
import { AuthenticationService } from '../app/authentication.service';
@Component({
  selector: 'app-root',
  template: ` <div class="authBlock">
    <h3>Angular Firebase Signout / Logout Example</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 {
  constructor(public authenticationService: AuthenticationService) {}
}
You can also check out my detailed article on Full Firebase Authentication System with Angular.

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

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.

GitHub Resources

You can also follow me on Twitter @ImDigamberSingh

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.