Authentication checkpoint within an Angular application using a JWT cookie

Question

Authentication checkpoint within an Angular application using a JWT cookie

After searching extensively, I was unable to find a question that directly addresses my specific concern. Currently, I am working on a project involving an angular application that utilizes jwt and http-only cookies for authentication. In order to authenticate requests on the backend, the jwt cookie is sent with each request. While everything is functioning properly, I am curious about the most effective method for verifying user authentication - particularly the WHERE.

From my research, it seems that the common approach involves using AuthGuards and a custom AuthService to validate Authentication and secure routes. In my case, I can verify authentication by utilizing an endpoint /api/users/currentuser which is solely dedicated to checking the jwt token and responding with a user object if the user is authenticated. This method works well, but I am uncertain about the optimal location within an angular application to trigger this request.

Should I place the request in the constructor of my AuthService, ensuring it is the first operation executed and then set a BehaviorSubject<boolean> that other components can subscribe to?

 export class AuthService {
 isLoggedIn$ = new BehaviorSubject < boolean > (this.isLoggedIn);
 ...
 constructor() {
   // initiate call to /api/users/currentuser backend 
   // set isLoggedin$ to true/false based on currentuser response
   this.isLoggedIn$.next(value);
 }

Should the AuthGuard responsible for protecting one or more routes perform its own request to the backend within canActivate method?

 canActivate(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ):
     | Observable<boolean | UrlTree>
     | Promise<boolean | UrlTree>
     | boolean
     | UrlTree {
     if (!this.authService.getCurrentUser()) {
       console.log('NOT authenticated');
       this.router.navigate(['']);
       return false;
     }

     console.log('AUTHENTICATED');
     return true;
   }

Or should the AuthGuard subscribe to the AuthService BehaviorSubject like this:

 canActivate(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ):
     | Observable<boolean | UrlTree>
     | Promise<boolean | UrlTree>
     | boolean
     | UrlTree {
     if (!this.authService.isLoggedIn$.getValue()) {
       console.log('auth guard NOT authenticated');
       this.router.navigate(['']);
       return false;
     }

     console.log('AUTHENTICATED');
     return true;
   }

Should the call to /api/users/currentuser be executed using async ... await ... at the beginning of the page load to ensure authentication is verified before the page is rendered?
Particularly after a page refresh - where is the ideal location for the authentication process to occur?

Is there a definitive location within the application where a single call to /api/users/currentuser should occur? Should this call be made multiple times from various places (authservice, authguard, different components, etc) for security reasons or is there a more efficient approach to sharing the authentication status among components?

Current app.component.html:

<app-navbar></app-navbar>
<router-outlet></router-outlet>

angular typescript authentication jwt

Answer 1

Answer №1

Most individuals prioritize authentication as the first step in using an app. To achieve this, it is recommended to integrate authentication within a "preload" service.

You can create a service like this:

@Injectable({
    providedIn: 'root',
})
export class PreloadService {
    constructor(
        private authService: AuthService
        // add any other necessary imports
    ) {}

    public async initializeApp() {
        if (!this.authService.isLoggedIn()) {
            await this.authService.login() // or any other required action
        }     
    }
}

export function PreloadFactory(preloadService: PreloadService) {
    return () => preloadService.initializeApp();
}

Next, in the app.module:

    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: PreloadFactory,
            deps: [PreloadService],
            multi: true,
        },
    ]

By implementing this preload service, you can ensure that the user is authenticated during the App initialization process, before any routes are loaded.

Answer 2

Most individuals prioritize authentication as the first step in using an app. To achieve this, it is recommended to integrate authentication within a "preload" service.

You can create a service like this:

@Injectable({
    providedIn: 'root',
})
export class PreloadService {
    constructor(
        private authService: AuthService
        // add any other necessary imports
    ) {}

    public async initializeApp() {
        if (!this.authService.isLoggedIn()) {
            await this.authService.login() // or any other required action
        }     
    }
}

export function PreloadFactory(preloadService: PreloadService) {
    return () => preloadService.initializeApp();
}

Next, in the app.module:

    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: PreloadFactory,
            deps: [PreloadService],
            multi: true,
        },
    ]

By implementing this preload service, you can ensure that the user is authenticated during the App initialization process, before any routes are loaded.

Authentication checkpoint within an Angular application using a JWT cookie

Answer №1

Similar questions

Picture fails to load on Ionic app on the device

Tips for creating a draggable Angular Material dialog

akka-http integrated with angular2 routing

Is it possible to utilize AngularfireList without observables? In other words, can I retrieve an AngularfireList object directly from Firebase and then process it in

Obtain a reference to a class using a method decorator

The ultimate guide to loading multiple YAML files simultaneously in JavaScript

Issue with Angular 7: In a ReactiveForm, mat-select does not allow setting a default option without using ngModel

Customizing modal window HTML in ng-bootstrapNeed to override the default modal window

What is the best way to sift through slug data?

My route seems to be malfunctioning, can someone please help me troubleshoot the

Transferring data between components in React by passing parameters through Links

Using Checkbox from material-UI to add and remove strikethrough on a to-do list task

Ecommerce Template for Next.js

Can we break down and explain iterative dynamic imports with conditions in JavaScript?

Issues with implementing routing children in Angular 8

Don't forget to save the selected tab in Angular 5 using a bootstrap tabset

Ionic - What is the correct way to import ViewController? - Uncaught (in promise): Error: ViewController provider not found

The issue here pertains to npm's inability to successfully retrieve a required dependency for download

What role do the esm directories serve within Angular 2 modules?

Can you merge two TypeScript objects with identical keys but different values?