finish token renewal

Author: chenkie

05-Token-Renewal/src/Auth/Auth.js

@@ -4,6 +4,7 @@ import history from '../history';
 
 export default class Auth {
   userProfile;
+  tokenRenewalTimeout;
 
   auth0 = new auth0.WebAuth({
     domain: AUTH_CONFIG.domain,
@@ -21,6 +22,7 @@ export default class Auth {
     this.isAuthenticated = this.isAuthenticated.bind(this);
     this.getAccessToken = this.getAccessToken.bind(this);
     this.getProfile = this.getProfile.bind(this);
+    this.scheduleRenewal();
   }
 
   login() {
@@ -49,6 +51,10 @@ export default class Auth {
     localStorage.setItem('access_token', authResult.accessToken);
     localStorage.setItem('id_token', authResult.idToken);
     localStorage.setItem('expires_at', expiresAt);
+
+    // schedule a token renewal
+    this.scheduleRenewal();
+
     // navigate to the home route
     history.replace('/home');
   }
@@ -78,6 +84,7 @@ export default class Auth {
     localStorage.removeItem('expires_at');
     localStorage.removeItem('scopes');
     this.userProfile = null;
+    clearTimeout(this.tokenRenewalTimeout);
     // navigate to the home route
     history.replace('/home');
   }
@@ -90,17 +97,32 @@ export default class Auth {
   }
 
   renewToken() {
-    this.auth0.renewAuth({
-      audience: AUTH_CONFIG.apiUrl,
-      redirectUri: 'http://localhost:3001/silent',
-      usePostMessage: true
-    }, (err, result) => {
-      if (err) {
-        alert(`Could not get a new token using silent authentication (${err.error}).`);
-      } else {
-        alert(`Successfully renewed auth!`);
-        this.setSession(result);
+    this.auth0.renewAuth(
+      {
+        audience: AUTH_CONFIG.apiUrl,
+        redirectUri: AUTH_CONFIG.silentAuthRedirect,
+        usePostMessage: true
+      },
+      (err, result) => {
+        if (err) {
+          alert(
+            `Could not get a new token using silent authentication (${err.error}).`
+          );
+        } else {
+          this.setSession(result);
+          alert(`Successfully renewed auth!`);
+        }
       }
-    });
+    );
+  }
+
+  scheduleRenewal() {
+    const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
+    const delay = expiresAt - Date.now();
+    if (delay > 0) {
+      this.tokenRenewalTimeout = setTimeout(() => {
+        this.renewToken();
+      }, delay);
+    }
   }
 }

05-Token-Renewal/src/Auth/auth0-variables.js.example

@@ -2,5 +2,6 @@ export const AUTH_CONFIG = {
   domain: '{DOMAIN}',
   clientId: '{CLIENT_ID}',
   callbackUrl: 'http://localhost:3000/callback',
-  apiUrl: '{API_IDENTIFIER}'
+  apiUrl: '{API_IDENTIFIER}',
+  silentAuthRedirect: 'http://localhost:3001/silent'
 }

05-Token-Renewal/src/Home/Home.js

@@ -1,30 +1,38 @@
 import React, { Component } from 'react';
 
 class Home extends Component {
+  getExpiryDate() {
+    const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
+    return JSON.stringify(new Date(expiresAt));
+  }
   render() {
     const { isAuthenticated, login } = this.props.auth;
     return (
       <div className="container">
-        {
-          isAuthenticated() && (
-              <h4>
-                You are logged in!
-              </h4>
-            )
-        }
-        {
-          !isAuthenticated() && (
-              <h4>
-                You are not logged in! Please{' '}
-                <a style={{cursor:'pointer'}}
-                  onClick={login.bind(this)}
-                >
-                  Log In
-                </a>
-                {' '}to continue.
-              </h4>
-            )
-        }
+        {isAuthenticated() &&
+          <div>
+            <h4>You are logged in!</h4>
+            <h3>About Your Access Token</h3>
+            <p>
+              Your <code>access_token</code> has an expiry date of:{' '}
+              {this.getExpiryDate()}
+            </p>
+            <p>
+              The token has been scheduled for renewal using silent
+              authentication, but you can also renew it manually from the navbar
+              if you don't want to wait. This manual renewal button is really
+              just for demonstration and you probably won't want such a control
+              in your actual application.
+            </p>
+          </div>}
+        {!isAuthenticated() &&
+          <h4>
+            You are not logged in! Please{' '}
+            <a style={{ cursor: 'pointer' }} onClick={login.bind(this)}>
+              Log In
+            </a>{' '}
+            to continue.
+          </h4>}
       </div>
     );
   }

05-Token-Renewal/src/history.js

@@ -1,5 +1,3 @@
 import createHistory from 'history/createBrowserHistory'
 
-export default createHistory({
-  forceRefresh: true
-})
+export default createHistory()

05-Token-Renewal/src/routes.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Redirect, Route, BrowserRouter } from 'react-router-dom';
+import { Redirect, Route, Router } from 'react-router-dom';
 import App from './App';
 import Home from './Home/Home';
 import Profile from './Profile/Profile';
@@ -13,26 +13,29 @@ const handleAuthentication = (nextState, replace) => {
   if (/access_token|id_token|error/.test(nextState.location.hash)) {
     auth.handleAuthentication();
   }
-}
+};
 
 export const makeMainRoutes = () => {
   return (
-    <BrowserRouter history={history} component={App}>
-        <div>
-          <Route path="/" render={(props) => <App auth={auth} {...props} />} />
-          <Route path="/home" render={(props) => <Home auth={auth} {...props} />} />
-          <Route path="/profile" render={(props) => (
-            !auth.isAuthenticated() ? (
-              <Redirect to="/home"/>
-            ) : (
-              <Profile auth={auth} {...props} />
-            )
-          )} />
-          <Route path="/callback" render={(props) => {
+    <Router history={history} component={App}>
+      <div>
+        <Route path="/" render={props => <App auth={auth} {...props} />} />
+        <Route path="/home" render={props => <Home auth={auth} {...props} />} />
+        <Route
+          path="/profile"
+          render={props =>
+            !auth.isAuthenticated()
+              ? <Redirect to="/home" />
+              : <Profile auth={auth} {...props} />}
+        />
+        <Route
+          path="/callback"
+          render={props => {
             handleAuthentication(props);
-            return <Callback {...props} /> 
-          }}/>        
-        </div>
-      </BrowserRouter>
+            return <Callback {...props} />;
+          }}
+        />
+      </div>
+    </Router>
   );
-}
+};