Angular 16 Store User State in Local Storage with Firebase

Create Auth Service in Angular

We are going to create an auth service file to create the login authentication service with Angular and Firebase.

In this service file, we’ll write the following methods to show you the demo for local storage in Angular.

• Login with Google
• Sign-in with email/password
• Storing user state in local storage when a user logged in
• Removing user state from local storage when a user logged out

Generate Angular Authentication Service File

Enter the below command to create the authentication service in Angular project.

ng g s shared/authentication

Importing AngularFire2 Authentication Service Libraries

Once the authentication.service.ts file is created, then you should get into the authentication file in shared folder and import the following AngularFire 2 services.

import { Injectable } from '@angular/core';
import { GoogleAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';

Now declare a variable in AuthenticationService class, this variable will hold the user state.

userState: any;

Angular Storing the User State in Local Storage

To store the user state in Angular local storage mechanism, inject the AngularFireAuth service in the constructor class.

As you can see in the below example if the user is signed in then, we are storing the user data as a JSON object in the local storage and removing the user data when the user is logged out.

constructor(
    public afAuth: AngularFireAuth
  ) {    
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.userState = user;
        localStorage.setItem('user', JSON.stringify(this.userState));
        JSON.parse(localStorage.getItem('user'));
      } else {
        localStorage.setItem('user', null);
        JSON.parse(localStorage.getItem('user'));
      }
    })
  }

Create Sign-in with Google

Let’s create Auth provider function, this function will help us to log-in with google auth service.

// Auth provider
AuthLogin(provider) {
  return this.afAuth.signInWithPopup(provider)
    .then((res) => {
      console.log(res)
    }).catch((error) => {
      console.log(error)
  })
}  

GoogleAuth() {
  return this.AuthLogin(new GoogleAuthProvider());
}

AngularFire2 Sign-in with email/password

Add the following code in authentication.service.ts file, to create sign-in with Google using Firebase auth and Angular.

// Sign-in with email/password
SignIn(email, password) {
   return this.afAuth.signInWithEmailAndPassword(email, password)
     .then((res) => {
       console.log(res)
   }).catch((error) => {
       console.log(error)
   })
}

Remove User State from Local Storage

In the following example you can check out how to remove user state from local storage when the user logged out from the Angular application.

SignOut() {
 return this.afAuth.signOut().then(() => {
   localStorage.removeItem('user');
 })
}

Final Authentication Service

Open the app.module.ts file, paste the below code line by line in the file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AngularFireModule } from '@angular/fire/compat';
import { environment } from './environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
  ],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

This is the final authentication.service.ts file for our Angular local storage tutorial.

import { Injectable } from '@angular/core';
import { GoogleAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Injectable({
  providedIn: 'root',
})

export class AuthenticationService {
  userState: any;

  constructor(public afAuth: AngularFireAuth) {
    this.afAuth.authState.subscribe((user) => {
      if (user) {
        this.userState = user;
        localStorage.setItem('user', JSON.stringify(this.userState));
        JSON.parse(localStorage.getItem('user'));
      } else {
        localStorage.setItem('user', null);
        JSON.parse(localStorage.getItem('user'));
      }
    });
  }

  // Auth provider
  AuthLogin(provider) {
    return this.afAuth
      .signInWithPopup(provider)
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
  }

  // Login with Google
  GoogleAuth() {
    return this.AuthLogin(new GoogleAuthProvider());
  }

  // Signin with email/password
  SignIn(email, password) {
    return this.afAuth
      .signInWithEmailAndPassword(email, password)
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
  }

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

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

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

export class AppComponent {
  constructor(public auth: AuthenticationService) {}
}

<!-- // Login with Google -->
<button (click)="auth.GoogleAuth()">Sign-in with Google</button>

<!-- // Logout -->
<button (click)="auth.SignOut()">Sign-out</button>

ng serve --open

 http://localhost:4200/