Angular 16 Firebase Sign Out or Logout Example Tutorial

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 @angular/fire firebase@9.16.0 --legacy-peer-deps

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 app.module.ts:

// Auth service
import { AuthenticationService } from './authentication.service';
 providers: [
    AuthenticationService
  ]

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',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(public authenticationService: AuthenticationService) {}
}

Update given code in app.component.html file.

<div class="authBlock">
  <h3>Angular Firebase Signout / Logout Example</h3>
  <!-- Calling SignOut Api from AuthenticationService -->
  <div class="formGroup">
    <input
      type="button"
      class="btn btn-primary"
      value="Log in"
      (click)="authenticationService.SignOut()"
    />
  </div>
</div>

We have imported the Firebase modules, however all are not useful for this guide. But for full auth system, these modules needs to be imported in the app module class.

Here is the final version of app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthenticationService } from './authentication.service';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { environment } from '../environments/environment';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule,
  ],
  providers: [AuthenticationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

The following command will start a development server, compile and run your app.

ng serve --open

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