Create a auth service at angular side
AuthService (src/app/auth/auth.service.ts)

 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';

interface AuthResponse {
 token: string;
}

 

@Injectable({
 providedIn: 'root',
})
export class AuthService {

 private tokenSubject = new BehaviorSubject<string | null>(this.getToken());
 public token$ = this.tokenSubject.asObservable();
 public isLoggedIn$ = this.token$.pipe(
   map(token => !!token)
 );

 private apiUrl = environment.apiUrl + '/auth';

 constructor(private http: HttpClient, private router: Router) {}

 

 login(credentials: any): Observable<AuthResponse> {
   return this.http.post<AuthResponse>(`${this.apiUrl}/login`, credentials).pipe(
     tap(response => this.setToken(response.token))
   );
 }

 

 logout(): void {
   this.clearToken();
   this.router.navigate(['/login']);
 }

 

 getToken(): string | null {
   return localStorage.getItem('authToken');  // Get from Local Storage
 }

 

 private setToken(token: string): void {
   localStorage.setItem('authToken', token);  // Set in Local Storage
   this.tokenSubject.next(token);
 }

 

 private clearToken(): void {
   localStorage.removeItem('authToken');
   this.tokenSubject.next(null);
 }
}

 

 

Login Component for Authentication 
(src/app/auth/login/login.component.ts):

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

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

export class LoginComponent {

 credentials = {
   username: '',
   password: '',
 };
 errorMessage = '';

 

 constructor(private authService: AuthService, private router: Router) {}

 

 login(): void {
   this.authService.login(this.credentials).subscribe({
     next: () => {
       this.router.navigate(['/home']);
     },
     error: (error) => {
       this.errorMessage = 'Invalid username or password.';
       console.error('Login failed', error);
     },
   });
 }
}