Handle refresh token expiration

Author: robisim74

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Angular SPA Web API Changelog
 
+<a name="Sep 11, 2017"></a>
+### Sep 11, 2017
+* Handle refresh token expiration.
+
 <a name="Aug 21, 2017"></a>
 ### Aug 21, 2017
 * Create `BrowserStorage` class & store user's info.

EXPLANATION.md

@@ -25,7 +25,11 @@ public static IEnumerable<Client> GetClients()
                 "WebAPI",
                 "roles"
             },
-            AllowOfflineAccess = true // For refresh token.
+            AllowOfflineAccess = true, // For refresh token.
+            RefreshTokenUsage = TokenUsage.OneTimeOnly,
+            AbsoluteRefreshTokenLifetime = 86400,
+            SlidingRefreshTokenLifetime = 1800,
+            RefreshTokenExpiration = TokenExpiration.Sliding
         }
     };
 }
@@ -36,7 +40,8 @@ Our Angular app, identified as _AngularSPA_:
 - doesn't use a _secret_ key: in a client application it would be useless because visible;
 - has an _access token_ for 15 minutes, then need to refresh the token;
 - can access to the _scopes_: in this case our Web API, called _WebAPI_, and user roles;
-- has _OfflineAccess_ for refresh token.
+- has _OfflineAccess_ for _refresh token_;
+- _refresh token_ has a sliding lifetime of 30 minutes and a maximum lifetime of 1 day: the _refresh token_ has a longer lifetime than the _access token_ to allow the user to remain authenticated, but for a maximum of one day.
 
 The following are the resources:
 ```C#
@@ -296,7 +301,7 @@ public getUserInfo(): Observable<any> {
 In this example, we use a scheduler to request a new _access token_ before it expires through the _refresh token_:
 ```TypeScript
 /**
- * Optional strategy for refresh token through a scheduler.
+ * Strategy for refresh token through a scheduler.
  * Will schedule a refresh at the appropriate time.
  */
 public scheduleRefresh(): void {
@@ -312,8 +317,7 @@ public scheduleRefresh(): void {
                 // Scheduler works.
             },
             (error: any) => {
-                // Need to handle this error.
-                console.log(error);
+                this.handleRefreshTokenError();
             }
         );
     });
@@ -325,7 +329,7 @@ public scheduleRefresh(): void {
 public startupTokenRefresh(): void {
     // If the user is authenticated, uses the token stream
     // provided by angular2-jwt and flatMap the token.
-    if (this.signinStatus.getValue()) {
+    if (this.tokenNotExpired()) {
         const source = this.authHttp.tokenStream.flatMap(
             (token: string) => {
                 const now: number = new Date().valueOf();
@@ -343,24 +347,10 @@ public startupTokenRefresh(): void {
                     this.scheduleRefresh();
                 },
                 (error: any) => {
-                    // Need to handle this error.
-                    console.log(error);
+                    this.handleRefreshTokenError();
                 }
             );
         });
-    } else {
-        // Revokes tokens.
-        this.revokeToken();
-        this.revokeRefreshToken();
-    }
-}
-
-/**
- * Unsubscribes from the scheduling of the refresh token.
- */
-public unscheduleRefresh(): void {
-    if (this.refreshSubscription) {
-        this.refreshSubscription.unsubscribe();
     }
 }
 

src/AngularSPAWebAPI/Config.cs

@@ -50,7 +50,11 @@ public static IEnumerable<Client> GetClients()
                         "roles",
                         "WebAPI"
                     },
-                    AllowOfflineAccess = true // For refresh token.
+                    AllowOfflineAccess = true, // For refresh token.
+                    RefreshTokenUsage = TokenUsage.OneTimeOnly,
+                    AbsoluteRefreshTokenLifetime = 86400,
+                    SlidingRefreshTokenLifetime = 1800,
+                    RefreshTokenExpiration = TokenExpiration.Sliding
                 }
             };
         }

src/AngularSPAWebAPI/app/account/signin.ts

@@ -19,7 +19,7 @@ export class Signin {
         this.authenticationService.signin(this.model.username, this.model.password)
             .subscribe(
             () => {
-                // Optional strategy for refresh token through a scheduler.
+                // Strategy for refresh token through a scheduler.
                 this.authenticationService.scheduleRefresh();
 
                 // Gets user's data.

src/AngularSPAWebAPI/app/app.component.ts

@@ -39,7 +39,7 @@ export class AppComponent implements OnInit {
                 this.isAdmin = this.authenticationService.isInRole("administrator");
             });
 
-        // Optional strategy for refresh token through a scheduler.
+        // Strategy for refresh token through a scheduler.
         this.authenticationService.startupTokenRefresh();
     }
 

src/AngularSPAWebAPI/app/services/authentication.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Http, Headers, RequestOptions, Response } from '@angular/http';
+import { Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import 'rxjs/add/operator/map';
@@ -26,7 +27,6 @@ import { BrowserStorage } from './browser-storage.service';
 
     /**
      * Behavior subjects of the user's status & data.
-     * https://netbasal.com/angular-2-persist-your-login-status-with-behaviorsubject-45da9ec43243#.14rltx9dh
      */
     private signinStatus = new BehaviorSubject<boolean>(this.tokenNotExpired());
     private user = new BehaviorSubject<User>(this.getUser());
@@ -50,10 +50,23 @@ import { BrowserStorage } from './browser-storage.service';
     private headers: Headers;
     private options: RequestOptions;
 
-    constructor(private http: Http, private authHttp: AuthHttp, private browserStorage: BrowserStorage) {
+    constructor(
+        private router: Router,
+        private http: Http,
+        private authHttp: AuthHttp,
+        private browserStorage: BrowserStorage
+    ) {
         // Creates header for post requests.
         this.headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
         this.options = new RequestOptions({ headers: this.headers });
+
+        if (!this.tokenNotExpired()) {
+            // Removes user's info.
+            this.browserStorage.remove("user_info");
+            // Revokes tokens.
+            this.revokeToken();
+            this.revokeRefreshToken();
+        }
     }
 
     public signin(username: string, password: string): Observable<any> {
@@ -86,7 +99,7 @@ import { BrowserStorage } from './browser-storage.service';
     }
 
     /**
-     * Optional strategy for refresh token through a scheduler.
+     * Strategy for refresh token through a scheduler.
      * Will schedule a refresh at the appropriate time.
      */
     public scheduleRefresh(): void {
@@ -102,8 +115,7 @@ import { BrowserStorage } from './browser-storage.service';
                     // Scheduler works.
                 },
                 (error: any) => {
-                    // Need to handle this error.
-                    console.log(error);
+                    this.handleRefreshTokenError();
                 }
             );
         });
@@ -115,7 +127,7 @@ import { BrowserStorage } from './browser-storage.service';
     public startupTokenRefresh(): void {
         // If the user is authenticated, uses the token stream
         // provided by angular2-jwt and flatMap the token.
-        if (this.signinStatus.getValue()) {
+        if (this.tokenNotExpired()) {
             const source = this.authHttp.tokenStream.flatMap(
                 (token: string) => {
                     const now: number = new Date().valueOf();
@@ -133,15 +145,10 @@ import { BrowserStorage } from './browser-storage.service';
                         this.scheduleRefresh();
                     },
                     (error: any) => {
-                        // Need to handle this error.
-                        console.log(error);
+                        this.handleRefreshTokenError();
                     }
                 );
             });
-        } else {
-            // Revokes tokens.
-            this.revokeToken();
-            this.revokeRefreshToken();
         }
     }
 
@@ -154,6 +161,15 @@ import { BrowserStorage } from './browser-storage.service';
         }
     }
 
+    /**
+     * Handles errors on refresh token, like expiration.
+     */
+    public handleRefreshTokenError(): void {
+        // In this sample, the user is forced to sign out.
+        this.signout();
+        this.router.navigate(['/home']);
+    }
+
     /**
      * Tries to get a new token using refresh token.
      */
@@ -321,11 +337,9 @@ import { BrowserStorage } from './browser-storage.service';
     }
 
     private getUser(): User {
-        if (this.tokenNotExpired() && this.browserStorage.get("user_info")) {
-            return JSON.parse(this.browserStorage.get("user_info"));;
+        if (this.tokenNotExpired()) {
+            return JSON.parse(this.browserStorage.get("user_info"));
         }
-        // Removes user's info if the token is expired.
-        this.browserStorage.remove("user_info");
         return new User();
     }