feat(auth): [#4] Implement route guards for authentication

apps/backend/package.json

@@ -24,11 +24,13 @@
     "@nestjs/config": "^4.0.2",
     "@nestjs/core": "^11.0.1",
     "@nestjs/jwt": "^11.0.1",
+    "@nestjs/passport": "^11.0.5",
     "@nestjs/platform-express": "^11.0.1",
     "@nestjs/typeorm": "^11.0.0",
     "bcryptjs": "^3.0.3",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.3",
+    "passport": "^0.7.0",
     "passport-jwt": "^4.0.1",
     "pg": "^8.16.3",
     "reflect-metadata": "^0.2.2",
@@ -45,6 +47,7 @@
     "@types/express": "^5.0.0",
     "@types/jest": "^30.0.0",
     "@types/node": "^22.10.7",
+    "@types/passport": "^1.0.17",
     "@types/passport-jwt": "^4.0.1",
     "@types/supertest": "^6.0.2",
     "eslint": "^9.18.0",

apps/backend/src/auth/auth.controller.spec.ts

@@ -49,6 +49,7 @@ describe('AuthController', () => {
         id: 1,
         name: 'Test User',
         email: 'test.user@test.com',
+        access_token: 'SomeReallyLongAccessTokenText',
       };
       (authService.register as jest.Mock).mockResolvedValue(
         mockUserResponseDto,

apps/backend/src/auth/auth.controller.ts

@@ -1,9 +1,17 @@
-import { Body, Controller, Post } from '@nestjs/common';
+import {
+  Body,
+  Controller,
+  Get,
+  Post,
+  UseGuards,
+  Request,
+} from '@nestjs/common';
 import { RegisterUserDto } from '@shared/dtos/auth/register-user.dto';
 import { AuthService } from '@/auth/auth.service';
 import { UserResponseDto } from '@shared/dtos/user/user-response.dto';
 import { LoginUserDto } from '@shared/dtos/auth/login-user.dto';
 import { AccessTokenDto } from '@shared/dtos/auth/access-token.dto';
+import { JwtAuthGuard } from './guards/jwt-auth.guard';
 
 @Controller('auth')
 export class AuthController {
@@ -20,4 +28,10 @@ export class AuthController {
   async login(@Body() loginUserDto: LoginUserDto): Promise<AccessTokenDto> {
     return this.authService.login(loginUserDto);
   }
+
+  @UseGuards(JwtAuthGuard)
+  @Get('profile')
+  getProfile(@Request() req: { user: { userId: number; email: string } }) {
+    return req.user;
+  }
 }

apps/backend/src/auth/auth.module.ts

@@ -4,10 +4,13 @@ import { AuthService } from '@/auth/auth.service';
 import { UsersModule } from '@/users/users.module';
 import { JwtModule } from '@nestjs/jwt';
 import { ConfigModule, ConfigService } from '@nestjs/config';
+import { PassportModule } from '@nestjs/passport';
+import { JwtStrategy } from '@/auth/jwt.strategy';
 
 @Module({
   imports: [
     UsersModule,
+    PassportModule,
     JwtModule.registerAsync({
       imports: [ConfigModule],
       useFactory: (configService: ConfigService) => ({
@@ -21,6 +24,6 @@ import { ConfigModule, ConfigService } from '@nestjs/config';
     }),
   ],
   controllers: [AuthController],
-  providers: [AuthService],
+  providers: [AuthService, JwtStrategy],
 })
 export class AuthModule {}

apps/backend/src/auth/auth.service.ts

@@ -45,10 +45,17 @@ export class AuthService {
       savedUser = await queryRunner.manager.save(user);
       await queryRunner.commitTransaction();
 
+      const payload = {
+        sub: savedUser.id,
+        email: savedUser.email,
+      };
+      const accessToken = await this.jwtService.signAsync(payload);
+
       const response: UserResponseDto = {
         id: savedUser.id,
         name: savedUser.name,
         email: savedUser.email,
+        access_token: accessToken,
       };
 
       return response;

apps/backend/src/auth/guards/jwt-auth.guard.ts

@@ -0,0 +1,5 @@
+import { Injectable } from '@nestjs/common';
+import { AuthGuard } from '@nestjs/passport';
+
+@Injectable()
+export class JwtAuthGuard extends AuthGuard('jwt') {}

apps/backend/src/auth/jwt.strategy.ts

@@ -0,0 +1,19 @@
+import { PassportStrategy } from '@nestjs/passport';
+import { ConfigService } from '@nestjs/config';
+import { Strategy, ExtractJwt } from 'passport-jwt';
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class JwtStrategy extends PassportStrategy(Strategy) {
+  constructor(configService: ConfigService) {
+    super({
+      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+      ignoreExpiration: false,
+      secretOrKey: configService.getOrThrow<string>('JWT_SECRET'),
+    });
+  }
+
+  validate(payload: { sub: number; email: string }) {
+    return { userId: payload.sub, email: payload.email };
+  }
+}

apps/frontend/src/app/app.config.ts

@@ -5,14 +5,15 @@ import {
 } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
-import { routes } from './app.routes';
-import { provideHttpClient } from '@angular/common/http';
+import { routes } from '@/app/app.routes';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { tokenInterceptor } from '@/app/auth/interceptors/token-interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
-    provideHttpClient(),
+    provideHttpClient(withInterceptors([tokenInterceptor])),
   ],
 };

apps/frontend/src/app/app.routes.ts

@@ -1,8 +1,15 @@
 import { Routes } from '@angular/router';
+import { Dashboard } from '@/app/pages/dashboard/dashboard';
+import { authGuard } from '@/app/auth/guards/auth-guard';
 
 export const routes: Routes = [
   {
     path: 'auth',
     loadChildren: () => import('./auth/auth-module').then((m) => m.AuthModule),
   },
+  {
+    path: 'dashboard',
+    component: Dashboard,
+    canActivate: [authGuard],
+  },
 ];

apps/frontend/src/app/auth/components/login/login.ts

@@ -8,6 +8,7 @@ import {
 import { EMAIL_REGEX_STRING } from '@shared/validation/email.constants';
 import { LoginUserDto } from '@shared/dtos/auth/login-user.dto';
 import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-login',
@@ -18,6 +19,7 @@ import { CommonModule } from '@angular/common';
 export class Login {
   private formBuilder = inject(FormBuilder);
   private authService = inject(Auth);
+  private router = inject(Router);
 
   loginForm = this.formBuilder.group({
     email: ['', [Validators.required, Validators.pattern(new RegExp(EMAIL_REGEX_STRING))]],
@@ -43,10 +45,10 @@ export class Login {
 
     const userData = this.loginForm.value as LoginUserDto;
     this.authService.login(userData).subscribe({
-      next: (response) => {
+      next: () => {
         this.errorMessage = null;
-        localStorage.setItem('access_token', response.access_token);
-        console.log('Login successful!', response);
+        this.loginForm.reset();
+        this.router.navigate(['/dashboard']);
       },
       error: (err) => {
         if (err.error && err.error.message) {

apps/frontend/src/app/auth/components/register/register.spec.ts

@@ -89,6 +89,7 @@ describe('Register', () => {
         id: 1,
         name: 'Test',
         email: 'email@test.com',
+        access_token: 'access_token',
       };
       authService.register.and.returnValue(of(mockResponse));
 

apps/frontend/src/app/auth/components/register/register.ts

@@ -8,6 +8,7 @@ import {
 import { EMAIL_REGEX_STRING } from '@shared/validation/email.constants';
 import { Auth } from '@/app/auth/services/auth';
 import { RegisterUserDto } from '@shared/dtos/auth/register-user.dto';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-register',
@@ -18,6 +19,7 @@ import { RegisterUserDto } from '@shared/dtos/auth/register-user.dto';
 export class Register {
   private formBuilder = inject(FormBuilder);
   private authService = inject(Auth);
+  private router = inject(Router);
 
   registerForm = this.formBuilder.group({
     name: ['', [Validators.required]],
@@ -48,9 +50,10 @@ export class Register {
 
     const userData = this.registerForm.value as RegisterUserDto;
     this.authService.register(userData).subscribe({
-      next: (response) => {
+      next: () => {
         this.errorMessage = null;
-        console.log('Registration successful!', response);
+        this.registerForm.reset();
+        this.router.navigate(['/dashboard']);
       },
       error: (err) => {
         if (err.error && err.error.message) {

apps/frontend/src/app/auth/guards/auth-guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authGuard } from './auth-guard';
+
+describe('authGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+    TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

apps/frontend/src/app/auth/guards/auth-guard.ts

@@ -0,0 +1,15 @@
+import { CanActivateFn, Router } from '@angular/router';
+import { Auth } from '@/app/auth/services/auth';
+import { inject } from '@angular/core';
+
+export const authGuard: CanActivateFn = () => {
+  const authService = inject(Auth);
+  const router = inject(Router);
+
+  if (authService.isAuthenticated()) {
+    return true;
+  }
+
+  router.navigate(['/auth/login']);
+  return false;
+};

apps/frontend/src/app/auth/interceptors/token-interceptor.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpInterceptorFn } from '@angular/common/http';
+
+import { tokenInterceptor } from './token-interceptor';
+
+describe('tokenInterceptor', () => {
+  const interceptor: HttpInterceptorFn = (req, next) => 
+    TestBed.runInInjectionContext(() => tokenInterceptor(req, next));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(interceptor).toBeTruthy();
+  });
+});

apps/frontend/src/app/auth/interceptors/token-interceptor.ts

@@ -0,0 +1,18 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import { Auth } from '@/app/auth/services/auth';
+import { inject } from '@angular/core';
+
+export const tokenInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(Auth);
+  const token = authService.getToken();
+
+  if (token) {
+    const clonedRequest = req.clone({
+      setHeaders: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return next(clonedRequest);
+  }
+  return next(req);
+};

apps/frontend/src/app/auth/services/auth.spec.ts

@@ -42,6 +42,7 @@ describe('Auth', () => {
         id: 1,
         name: 'Test',
         email: 'email@test.com',
+        access_token: 'access_token',
       };
 
       service.register(mockRegisterData).subscribe((response) => {

apps/frontend/src/app/auth/services/auth.ts

@@ -5,20 +5,43 @@ import { RegisterUserDto } from '@shared/dtos/auth/register-user.dto';
 import { UserResponseDto } from '@shared/dtos/user/user-response.dto';
 import { LoginUserDto } from '@shared/dtos/auth/login-user.dto';
 import { AccessTokenDto } from '@shared/dtos/auth/access-token.dto';
-import { Observable } from 'rxjs';
+import { Observable, tap } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class Auth {
   private httpClient = inject(HttpClient);
   private apiUrl = `${environment.apiUrl}/auth`;
+  private readonly TOKEN_KEY = 'access_token';
 
   register(userData: RegisterUserDto): Observable<UserResponseDto> {
-    return this.httpClient.post<UserResponseDto>(`${this.apiUrl}/register`, userData);
+    return this.httpClient
+      .post<UserResponseDto>(`${this.apiUrl}/register`, userData)
+      .pipe(tap((response: UserResponseDto) => this.setSession(response)));
   }
 
   login(userData: LoginUserDto): Observable<AccessTokenDto> {
-    return this.httpClient.post<AccessTokenDto>(`${this.apiUrl}/login`, userData);
+    return this.httpClient
+      .post<AccessTokenDto>(`${this.apiUrl}/login`, userData)
+      .pipe(tap((response: AccessTokenDto) => this.setSession(response)));
+  }
+
+  logout() {
+    localStorage.removeItem(this.TOKEN_KEY);
+  }
+
+  isAuthenticated(): boolean {
+    return !!localStorage.getItem(this.TOKEN_KEY);
+  }
+
+  getToken(): string | null {
+    return localStorage.getItem(this.TOKEN_KEY);
+  }
+
+  private setSession(authResult: UserResponseDto | AccessTokenDto) {
+    if (authResult.access_token) {
+      localStorage.setItem(this.TOKEN_KEY, authResult.access_token);
+    }
   }
 }

apps/frontend/src/app/pages/dashboard/dashboard.html

@@ -0,0 +1,5 @@
+<div style="padding: 2rem">
+  <h1>Welcome to Dashboard</h1>
+  <p>If you see your profile data below, the Interceptor works! 🎉</p>
+  <pre>{{ profileData | json }}</pre>
+</div>

apps/frontend/src/app/pages/dashboard/dashboard.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Dashboard } from './dashboard';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+
+describe('Dashboard', () => {
+  let component: Dashboard;
+  let fixture: ComponentFixture<Dashboard>;
+  let httpMock: HttpTestingController;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Dashboard],
+      providers: [provideHttpClientTesting()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Dashboard);
+    component = fixture.componentInstance;
+    httpMock = TestBed.inject(HttpTestingController);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    httpMock.expectOne('/auth/profile').flush({ id: 1, name: 'Test', email: 'test@test.com' });
+    expect(component).toBeTruthy();
+  });
+});