How to implement authentication in Angular 19 using JWT and Firebase

Authentication is essential for securing an Angular 19 application. JSON Web Tokens (JWT) and Firebase Authentication provide a scalable and secure way to manage user logins. This guide will walk you through integrating Firebase with Angular for authentication using JWT.

Step 1: Set Up Firebase Project

Go to Firebase Console.
Create a new project and enable Email/Password Authentication under Authentication > Sign-in method.
Register your app and get Firebase config settings.

Step 2: Install Firebase in Angular

Install Firebase and AngularFire:

npm install firebase @angular/fire

Add Firebase configuration to environment.ts:

export const environment = {
  firebase: {
    apiKey: 'YOUR_API_KEY',
    authDomain: 'your-app.firebaseapp.com',
    projectId: 'your-app-id',
    storageBucket: 'your-app.appspot.com',
    messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
    appId: 'YOUR_APP_ID'
  }
};

Step 3: Implement Authentication Service

Generate an authentication service:

ng generate service auth

Add authentication methods in auth.service.ts:

import { Injectable } from '@angular/core';
import { Auth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private auth: Auth) {}

  signUp(email: string, password: string) {
    return createUserWithEmailAndPassword(this.auth, email, password);
  }

  login(email: string, password: string) {
    return signInWithEmailAndPassword(this.auth, email, password);
  }

  logout() {
    return signOut(this.auth);
  }
}

Step 4: Create Login and Signup Components

Generate login and signup components:

ng generate component login
ng generate component signup

Update login.component.ts:

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  constructor(private authService: AuthService) {}

  login(email: string, password: string) {
    this.authService.login(email, password).then(user => {
      console.log('Logged in:', user);
    }).catch(error => console.error('Error:', error));
  }
}

Update signup.component.ts:

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html'
})
export class SignupComponent {
  constructor(private authService: AuthService) {}

  signUp(email: string, password: string) {
    this.authService.signUp(email, password).then(user => {
      console.log('Signed up:', user);
    }).catch(error => console.error('Error:', error));
  }
}

Step 5: Protect Routes with Firebase Authentication

Create an Auth Guard:

ng generate guard auth

Update auth.guard.ts:

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Auth } from '@angular/fire/auth';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private auth: Auth) {}

  canActivate(): Observable<boolean> {
    return this.auth.authState.pipe(map(user => !!user));
  }
}

Secure routes in app-routing.module.ts:

import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

Conclusion

By integrating Firebase Authentication and JWT, we have successfully implemented secure authentication in an Angular 19 application. With Firebase’s authentication services and Angular’s Auth Guards, user access is well-protected. You can extend this by adding Google Sign-In, token storage, and user role management for advanced security. 🚀