Authentication flow in Angular 2

Question

How would you implement the following flow in Angular 2?

I suppose this is a fairly standard scenario in an application requiring authentication.

The config data required by the application is defined in an injectable service.

When the application starts (bootstraps), check localStorage.
If localstorage contains valid JWT token, make http call to retrieve config data. When response is received and stored in the service, route to Home.
If localstorage does not contain valid JWT token, route to login. When user submits login, http call, put received JWT in localstorage, make another http call (same as above) and when response is received and stored in the service, route to Home.
Later, the protected components have a routerOnActivate that verifies that the config data is present in the service (meaning the user is logged in). If not, route to login.

Do you think of a better approach?

Where exactly should I implement the logic that checks the localstorage and asynchronously fetches the config via http call?

In the constructor of the App component that is bootstrapped?

How to prevent further execution of the other components (they rely on the presence of this config data)?

Here's [an example](https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492#.a714r26b4) — Sasxa, Jun 13 '16 at 10:14
Thanks Sasxa, I'll check this example. At first sight it seems to match the architecture I want to achieve. — Quentin Gillet, Jun 13 '16 at 10:51
@sasxa Good article but it still uses the deprecated router. It would be nice to see example using the new router. — Sam, Jun 17 '16 at 19:18

score 2 · Accepted Answer · edited May 23 '17 at 11:54

Yes, in my opinion it sounds like a good approach!

Where exactly should I implement the logic that checks the localstorage and asynchronously fetches the config via http call? In the constructor of the App component that is bootstrapped?

First, do not use the constructor of the App component.

You should use constructor() to setup Dependency Injection and not much else. Mostly we use ngOnInit for all the initialization/deceleration and avoid stuff to work in the constructor. The constructor should only be used to initialize class members but shouldn't do actual "work". More info in this answer.

Second, let's see where exactly to implement the logic. Create an AuthenticationService.

Implement login() method and add isUserLoggedIn boolean on the AuthenticationService. When user logs-in, store the JWT token inside the LocalStorage. Additionally, switch the isUserLoggedIn to true.
Implement isUserLogged() method on the AuthenticationService. Call this method always when the application starts, for example inside the App's ngOnInit lifecycle hook. The isUserLogged() method logic should be the following:
- First, check if there is a login token in the LocalStorage. If no -> user is not logged in. Switch the isUserLoggedIn to false.
- Second, if there is a login token in the LocalStorage - you must check if it is still valid (or it has expired). Your API should provide you a method for that, something like /check-if-user-is-logged. Call it and based on the result - switch the isUserLoggedIn.
Implement logout() method on the AuthenticationService. When user logs-in, wipe-out the JWT token from the LocalStorage. Additionally, switch the isUserLoggedIn to false.

Then, implement an auth guard on all of the protected routes.

How to prevent further execution of the other components (they rely on the presence of this config data)?

Use the isUserLoggedIn boolean on the AuthenticationService. Additionally, you can apply other methods on the AuthenticationService that check for a specific config present.

Plus, use the auth guard on all of the protected routes.

Authentication flow in Angular 2

1 Answers1