Angular Authentication Using Route Guards

// user.component.ts

import { Component } from "@angular/core";
import { UserService } from "../user.service";
import { Router } from "@angular/router";
import { SharedService } from "../shared.service";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";

@Component({
    selector: "app-user",
    standalone: true,
    imports: [FormsModule, CommonModule],
    templateUrl: "./user.component.html",
    styleUrl: "./user.component.css",
})
export class UserComponent {
    username!: string;
    email!: string;
    password!: string;
    credentials: any = {};
    successMessage: string = "";
    errorMessage: string = "";
    loginActive: boolean = true;
    registerActive: boolean = false;
    constructor(
        private authService: UserService,
        private router: Router,
        private sharedService: SharedService
    ) { }
    ngOnInit(): void {
        this.sharedService.loginEvent.subscribe(() => {
            this.errorMessage = "";
            this.successMessage = "";
            this.loginActive = true;
            this.registerActive = false;
        });
        this.sharedService.registerEvent.subscribe(() => {
            this.errorMessage = "";
            this.successMessage = "";
            this.registerActive = true;
            this.loginActive = false;
        });
    }

    login(): void {
        const credentials = {
            email: this.email,
            password: this.password,
        };
        this.authService.login(credentials).subscribe(
            (response: any) => {
                const token = response.token;
                localStorage.setItem("token", token);
                this.authService.emitLoggedInEvent();
                this.loginActive = false;
                this.registerActive = false;
                this.email = "";
                this.password = "";
                this.successMessage = response.message;
            },
            (error: any) => {
                console.error("Error logging in:", error);
                this.errorMessage =
                    "Login unsuccessfull ! Please reload or try in incognito tab";
            }
        );
        this.errorMessage = "";
        this.successMessage = "";
        this.email = "";
        this.password = "";
    }

    register(): void {
        const userData = {
            username: this.username,
            email: this.email,
            password: this.password,
        };

        this.authService.register(userData).subscribe(
            (response: any) => {
                this.successMessage = response.message;
                this.loginActive = true;
                this.registerActive = false;
                this.username = "";
                this.email = "";
                this.password = "";
            },
            (error: any) => {
                console.error(error);
                this.errorMessage = "User not registered successfully";
            }
        );
        this.username = "";
        this.email = "";
        this.password = "";
    }
}

// admin.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-admin',
    standalone: true,
    imports: [],
    templateUrl: './admin.component.html',
    styleUrl: './admin.component.css'
})
export class AdminComponent {

}

// sidebar.component.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'app-sidebar',
    standalone: true,
    imports: [],
    templateUrl: './sidebar.component.html',
    styleUrl: './sidebar.component.css'
})
export class SidebarComponent {
    isLoggedIn: boolean = true;
    constructor() { }
    ngOnInit(): void {
        if (typeof localStorage !== 'undefined') {
            const token = localStorage.getItem('token');
            if (token) {
                this.isLoggedIn = true;
            }
        }
    }
    @Output() contentLoad = new EventEmitter<string>();

    loadContent(page: any) {
        console.log("Event emit");
        this.contentLoad.emit(page);
    }
}

// home.compoennt.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-home',
    standalone: true,
    imports: [],
    templateUrl: './home.component.html',
    styleUrl: './home.component.css'
})
export class HomeComponent {

}

// app.component.ts

import { Component } from "@angular/core";
import { Router, RouterOutlet } from "@angular/router";
import { UserService } from "./component/user.service";
import { SharedService } from "./component/shared.service";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { SidebarComponent } from "./component/sidebar/sidebar.component";

@Component({
    selector: "app-root",
    standalone: true,
    imports: [RouterOutlet, FormsModule, CommonModule, SidebarComponent],
    templateUrl: "./app.component.html",
    styleUrl: "./app.component.css",
})
export class AppComponent {
    title = "AuthGuard in Angular";
    isLoggedIn: boolean = false;
    constructor(
        private router: Router,
        private authService: UserService,
        private sharedService: SharedService
    ) { }
    ngOnInit(): void {
        this.authService.loggedInEvent.subscribe((data: any) => {
            this.isLoggedIn = true;
        });
        if (typeof localStorage !== "undefined" && localStorage.getItem("token")) {
            this.isLoggedIn = true;
        }
    }

    login(): void {
        this.sharedService.triggerLoginEvent();
        this.router.navigate(["/"]);
    }

    register(): void {
        this.sharedService.triggerRegisterEvent();
        this.router.navigate(["/"]);
    }

    logout(): void {
        this.isLoggedIn = false;
        localStorage.removeItem("token");
        this.router.navigate(["/"]);
    }

    loadContent(page: any) {
        if (page === "home") {
            this.router.navigate(["/home"]);
        } else if (page === "admin") {
            this.router.navigate(["/admin"]);
        }
    }
}

// app.routes.ts

import { Routes } from '@angular/router';
import { UserComponent } from './component/user/user.component';
import { HomeComponent } from './component/home/home.component';
import { AuthGuardService } from './component/auth-guard.service';
import { AdminComponent } from './component/admin/admin.component';

export const routes: Routes = [
    { path: '', component: UserComponent },
    { path: 'home', component: HomeComponent },
    { path: 'admin', component: AdminComponent, canActivate: [AuthGuardService] },
];

// app.module.ts

import { InjectionToken, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';
import { UserComponent } from './component/user/user.component';
import { HomeComponent } from './component/home/home.component';
import { AdminComponent } from './component/admin/admin.component';
@NgModule({
    declarations: [
        AppComponent,
        UserComponent,
        HomeComponent,
        AdminComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(routes),
    ],
    exports: [RouterModule],
    providers: [{ provide: JWT_OPTIONS, useValue: JWT_OPTIONS }, JwtHelperService],
    bootstrap: [AppComponent]
})
export class AppModule { }

// user.service.ts

import { HttpClient } from "@angular/common/http";
import { EventEmitter, Injectable } from "@angular/core";
import { Observable, tap } from "rxjs";

@Injectable({
    providedIn: "root",
})
export class UserService {
    private baseUrl = "http://localhost:5000/api/auth";
    private readonly TOKEN_KEY = "token";
    constructor(private httpClient: HttpClient) { }

    register(userData: any): Observable<any> {
        return this.httpClient.post(`${this.baseUrl}/register`, userData);
    }

    login(credentials: any): Observable<any> {
        return this.httpClient.post(`${this.baseUrl}/login`, credentials).pipe(
            tap((response: any) => {
                if (response && response.token) {
                    localStorage.setItem(this.TOKEN_KEY, response.token);
                    this.emitLoggedInEvent();
                }
            })
        );
    }

    loggedInEvent: EventEmitter<any> = new EventEmitter();
    emitLoggedInEvent() {
        this.loggedInEvent.emit();
    }

    getToken(): string | null {
        if (typeof window !== "undefined") {
            return localStorage.getItem(this.TOKEN_KEY);
        }
        return null;
    }

    isAuthenticatedUser(): boolean {
        return !!this.getToken();
    }
}

// shared.service.ts

import { EventEmitter, Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class SharedService {
    loginEvent: EventEmitter<void> = new EventEmitter<void>();
    registerEvent: EventEmitter<void> = new EventEmitter<void>();
    constructor() { }

    triggerLoginEvent(): void {
        this.loginEvent.emit();
    }

    triggerRegisterEvent(): void {
        this.registerEvent.emit();
    }
}

// auth-guard.service.ts

import { Injectable } from '@angular/core';
import { UserService } from './user.service';
import { Router } from '@angular/router';

@Injectable({
    providedIn: 'root'
})
export class AuthGuardService {
    constructor(private authService: UserService, private router: Router) { }

    canActivate(): boolean {
        return this.checkLoggedIn();
    }

    private checkLoggedIn(): boolean {
        if (this.authService.isAuthenticatedUser()) {
            return true;
        } else {
            this.router.navigate(['/']);
            return false;
        }
    }
}