Today let me add a proper logout, and before we move forward to more features, let's clean up and apply some of the lessons we learned before.
Follow along on StackBlitz
Logout, in the right places
Looking back at our Http interceptor, a 401 might happen more than once, signaling a bad refresh token. When that happens we can either toast the user about a dramatic failure, and give them the chance to login again, or we can force a redirect to the login page ourselves. May the force be with us.
The solution is to reroute in the Logout function in AuthState. We'll make it optional because the Logout function is called when a user fails to login, and when the AuthState returns an invalid access token on a page that does not necessarily need authentication.
// services/auth.state // reroute optionally Logout(reroute: boolean = false) { // remove leftover this.RemoveState(); // and clean localstroage localStorage.removeItem('user'); if (reroute) { this.router.navigateByUrl('/public/login'); } } In the AuthState constructor, do not reroute. If we do, we needlessly reroute users in safe routes. When it fails after a refresh token, that is a good place to redirect. With a but.
// http return this.authService.RefreshToken() .pipe( switchMap((result: boolean) => { if (result) { //... } }), catchError(error => { // exeption or simply bad refresh token, logout an reroute this.authState.Logout(true); return throwError(() => error); }), // ... ); Another location we want to logout and reroute is when the user clicks the Logout button intentionally.
// app.component Logout() { // logout and reroute this.authState.Logout(true); } What if we are on a safe route already?
There is a scenario where the API call needs user authentication but the page it displays itself, has a public version of it. For example, if you route to a public Twitter account while you have your own login, you can see the like button and use it. If for some reason the refresh token is no longer valid, then clicking on the like button, should somehow warn users of the lack of authentication, and it should ask the user if they want to login again. In situations like that, having a global redirect in the Http interceptor is not ideal. The solution is contextual. Some API calls need to redirect, and some need to toast only. Here is an example of a like button click.
// example this.tweetService.CreateLike(params).pipe( catchError(error => HandleSpecificError(error)) ); // somewhere in our common functions, or toast service HandleSpecificError(error: any): Observable<any> { // if error is of http response 401, show a toast with a button to relogin if (error instanceof HttpErrorResponse && error.status === 401) { ShowToastWithLogin(); return of(null); } else { // handle differently or rethrow return throwError(() => error); } } I would choose which way to go according to the type of project I am developing. There is no silver bullet. (You may use HttpContext token for that.)
We wrote about toast messages in Angular previously.
Clean up
Before we move on I would like to clean up the AuthState to allow extra properties. We are going to still use this service to manipulate the localStorage of the browser. You might be tempted to create a new service for that, but I see no great value because we only need private members for the authenticated user information. Accessing the localStorag directly is not ideal, but let's keep going.
// authState update, add all necessary functions to deal with localStorage private _SaveUser(user: IAuthInfo) { localStorage.setItem( ConfigService.Config.Auth.userAccessKey, JSON.stringify(user) ); } private _RemoveUser() { localStorage.removeItem(ConfigService.Config.Auth.userAccessKey); } private _GetUser(): IAuthInfo | null { const _localuser: IAuthInfo = JSON.parse( localStorage.getItem(ConfigService.Config.Auth.userAccessKey) ); if (_localuser && _localuser.accessToken) { return <IAuthInfo>_localuser; } return null; } Then we are going to tidy up the other methods to use these. We need a way to SaveSession, and UpdateSession. We also are going to write the logic for CheckAuth. Let's first go back to the IAuthInfo and talk about the expiresAt property,
Expires At
When the information comes back from the authorization server, it usually has a lifetime, rather than an exact date. This is easier to manage given different time zones on server and client. In the client, however, we need to determine the exact time it expires at. A pretty close one, and good enough for our use.
So the expected return model is:
// return from server upon login { accessToken: 'access_token', refreshToken: "refres_token", payload: { name: 'maybe name', id: 'id', email: 'username' }, // expires in is an absolute lifetime in seconds expiresIn: 3600 } In our model, it's time to properly map to our internal model
// in auth.model we need to properly map the expires at export const NewAuthInfo = (data: any): IAuthInfo => { return { payload: { email: data.payload.email, name: data.payload.name, id: data.payload.id, }, accessToken: data.accessToken, refreshToken: data.refreshToken, // map expiresIn value to exact time stamp expiresAt: Date.now() + data.expiresIn * 1000, }; }; And now in our Login in AuthService we properly map
// services/auth.service Login(username: string, password: string): Observable<any> { return this.http.post(this._loginUrl, { username, password }).pipe( map((response) => { // use our mapper const retUser: IAuthInfo = NewAuthInfo((<any>response).data); // ... }) ); } Now checking the authentication whenever we need, is a simple extra layer of precaution. We already send API calls with null tokens, and let the server handle it. So it is no harm to remove the token from localStorage whenever the browser thinks it's invalid.
// services/auth.state write the CheckAuth CheckAuth(user: IAuthInfo) { // if no user, or no accessToken, something terrible must have happened if (!user || !user.accessToken) { return false; } // if now is larger than expiresAt, it expired if (Date.now() > user.expiresAt) { return false; } return true; } Saving and updating session
The client-side simple solution is already in place, I call it session even though it is not really a session. This understanding will help us later figure out what to do when we implement SSR.
// services/auth.state service // add two methods: SaveSession and UpdateSession // new saveSessions method SaveSession(user: IAuthInfo): IAuthInfo | null { if (user.accessToken) { this._SaveUser(user); this.SetState(user); return user; } else { // remove token from user this._RemoveUser(); this.RemoveState(); return null; } } UpdateSession(user: IAuthInfo) { const _localuser: IAuthInfo = this._GetUser(); if (_localuser) { // only set accesstoken and refreshtoken _localuser.accessToken = user.accessToken; _localuser.refreshToken = user.refreshToken; this._SaveUser(_localuser); // this is a new function to clone and update current value // we will move these into their own state class later this.UpdateState(user); } else { // remove token from user this._RemoveUser(); this.RemoveState(); } } Notice how the UpdateSession is a tad bit different. After a RefreshToken request, we do not need much information from the server, and some servers do not return the payload with it. So it is a good practice to read only the new tokens. To use those two methods:
// services/auth.service // login method Login(username: string, password: string): Observable<any> { return this.http.post(this._loginUrl, { username, password }).pipe( map((response) => { // ... return after savi return this.authState.SaveSession(retUser); }) ); } RefreshToken(): Observable<boolean> { return ( this.http // FIX: get refresh token, not token .post(this._refreshUrl, { token: this.authState.GetRefreshToken() }) .pipe( map((response) => { if (!response) { throw new Error('Oh oh'); } // map first, then update session const retUser: IAuthInfo = NewAuthInfo((<any>response).data); this.authState.UpdateSession(retUser); return true; }) ) ); } We can also make use of our new private methods in the constructor of AuthState and Logout
// services/auth.state constructor(private router: Router) { // use our new _GetUser const _localuser: IAuthInfo = this._GetUser(); if (this.CheckAuth(_localuser)) { this.SetState(_localuser); } else { this.Logout(false); } } // ... Logout(reroute: boolean = false) { // use our new _RemoveUser this._RemoveUser(); //... } Now we're ready for a redirect URL. Let this all sink in first, we'll do that next episode. 😴
RELATED POSTS
Catching and displaying UI errors with toast messages in Angular