Implement auth-guard and interceptors

Removed those _guards and implemented as a service instead. Added a
guard to '/questions' so only logged in users with tokens that have not
expired can access it. If they are not logged in, users will be directed
to '/login' to log in.

Author: LimZiJia

frontend/src/_environments/environment.ts

@@ -1,4 +1,4 @@
 export const environment = {
     production: true,
-    UserServiceApiUrl: 'http://localhost:3001'
+    UserServiceApiUrl: 'http://localhost:8082'
 };

frontend/src/_guards/user-only.guard.spec.ts

@@ -17,7 +17,7 @@ export class ErrorInterceptor implements HttpInterceptor {
             }
 
             const error = err.error.message || err.statusText;
-            return throwError(error);
+            return throwError(() => new Error(error));
         }))
     }
 }

frontend/src/_guards/user-only.guard.ts

@@ -1,27 +1,28 @@
 import { Injectable } from '@angular/core';
 import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
 import { Observable } from 'rxjs';
-
 import { environment } from '../../_environments/environment';
 import { AuthenticationService } from '../../_services/authentication.service';
+import { User } from '../../_models/user.model';
 
 @Injectable()
 export class JwtInterceptor implements HttpInterceptor {
-    constructor(private authenticationService: AuthenticationService) { }
+    private currentUser: User | null | undefined;
+    constructor(private authenticationService: AuthenticationService) { 
+        this.authenticationService.user$.subscribe(user => {
+            this.currentUser = user;
+        })
+    }
 
     intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
         // add auth header with jwt if user is logged in and request is to the api url
-        const user = this.authenticationService.userValue;
-        const isLoggedIn = user?.accessToken;
+        const isLoggedIn = this.currentUser?.accessToken;
         const isApiUrl = request.url.startsWith(environment.UserServiceApiUrl);
         if (isLoggedIn && isApiUrl) {
             request = request.clone({
-                setHeaders: {
-                    Authorization: `Bearer ${user.accessToken}`
-                }
+                headers: request.headers.set('Authorization', `Bearer ${this.currentUser!.accessToken}`),
             });
         }
-
         return next.handle(request);
     }
 }

frontend/src/_helpers/interceptors/error.interceptor.ts

@@ -0,0 +1,36 @@
+import { Injectable } from "@angular/core";
+import { CanActivate, Router } from "@angular/router";
+import { AuthenticationService } from "./authentication.service";
+import { filter, map, Observable, of, switchMap } from 'rxjs';
+import { HttpClient } from "@angular/common/http";
+import { environment } from "../_environments/environment";
+
+@Injectable()
+export class AuthGuardService implements CanActivate{
+    constructor(
+        private authenticationService: AuthenticationService,
+        private http: HttpClient,
+        private router: Router
+    ) {}
+
+  canActivate() : Observable<boolean> {
+    return this.authenticationService.user$.pipe(
+        filter(user => user !== undefined),
+        switchMap((user) => { // switchMap to flatten the observable from http.get
+            if (user === null) {
+                // not logged in so redirect to login page with the return url
+                this.router.navigate(['/account/login']);
+                return of(false); // of() to return an observable to be flattened
+            }
+            // call to user service endpoint '/users/{user_id}' to check user is still valid
+            return this.http.get<any>(`${environment.UserServiceApiUrl}/users/${user.id}`, { observe: 'response' })
+            .pipe(map(response => {
+                if (response.status === 200) {
+                    return true;
+                }
+                return false;
+            }))
+        })
+    )
+  }
+}

frontend/src/_helpers/interceptors/jwt.interceptor.ts

@@ -9,15 +9,15 @@ import { User } from '../_models/user.model';
 
 @Injectable({ providedIn: 'root' })
 export class AuthenticationService {
-    private userSubject: BehaviorSubject<User | null>;
-    public user: Observable<User | null>;
+    private userSubject: BehaviorSubject<User | null | undefined>;
+    public user$: Observable<User | null | undefined>;
 
     constructor(
         private router: Router,
         private http: HttpClient
     ) {
         this.userSubject = new BehaviorSubject(JSON.parse(localStorage.getItem('user')!));
-        this.user = this.userSubject.asObservable();
+        this.user$ = this.userSubject.asObservable();
     }
 
     public get userValue() {
@@ -29,7 +29,15 @@ export class AuthenticationService {
             { "username": username, "password": password })
             .pipe(map(response => {
                 // store user details and jwt token in local storage to keep user logged in between page refreshes
-                const user = response.data;
+                const data = response.data;
+                const user: User = {
+                    id: data.id,
+                    username: data.username,
+                    email: data.email,
+                    accessToken: data.accessToken,
+                    isAdmin: data.isAdmin,
+                    createdAt: data.createdAt
+                }
                 localStorage.setItem('user', JSON.stringify(user));
                 this.userSubject.next(user);
                 return user;

frontend/src/_services/auth.guard.service.ts

@@ -32,10 +32,10 @@ export class LoginComponent {
         private router: Router,
         private route: ActivatedRoute
     ) {
-        // redirect to home if already logged in
-        // if (this.authenticationService.userValue) { 
-        //     this.router.navigate(['/']);
-        // }
+        //redirect to home if already logged in
+        if (this.authenticationService.userValue) { 
+            this.router.navigate(['/']);
+        }
     }
 
     userForm = {

frontend/src/_services/authentication.service.ts

@@ -1,18 +1,24 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
-import { HTTP_INTERCEPTORS, provideHttpClient } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { JwtInterceptor } from '../_helpers/interceptors/jwt.interceptor';
 import { ErrorInterceptor } from '../_helpers/interceptors/error.interceptor';
+import { AuthGuardService } from '../_services/auth.guard.service';
 
 export const appConfig: ApplicationConfig = {
     providers: [
         provideZoneChangeDetection({ eventCoalescing: true }),
         provideRouter(routes),
         provideAnimationsAsync(),
+        provideHttpClient(
+            // DI-based interceptors must be explicitly enabled.
+            withInterceptorsFromDi(),
+        ),
         { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
         { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
-        provideHttpClient()
+        provideHttpClient(),
+        AuthGuardService
     ],
 };

frontend/src/app/account/login.component.ts

@@ -1,5 +1,6 @@
 import { Routes } from '@angular/router';
 import { QuestionsComponent } from './questions/questions.component';
+import { AuthGuardService } from '../_services/auth.guard.service';
 
 const accountModule = () => import('./account/account.module').then(x => x.AccountModule);
 
@@ -11,5 +12,6 @@ export const routes: Routes = [
     {
         path: 'questions',
         component: QuestionsComponent,
+        canActivate: [AuthGuardService],
     },
 ];