fix #4 and add token expiration check

Author: MacKentoch

docs/assets/app.bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-graphql-apollo-bootstrap-webpack-starter",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "react js + redux + graphQL + Apollo + react router4 + hot reload + devTools + bootstrap + webpack 3 starter",
   "main": "src/index.js",
   "scripts": {
@@ -120,6 +120,7 @@
     "history": "^4.6.3",
     "jquery": "^2.2.1",
     "js-base64": "^2.1.9",
+    "jwt-decode": "^2.2.0",
     "moment": "^2.18.1",
     "pretty-error": "^2.1.1",
     "prop-types": "^15.5.10",

docs/assets/app.vendor.bundle.js

@@ -30,13 +30,14 @@ class PrivateRoute extends Component {
     const { location } = this.props;
 
     const isUserAuthenticated = this.isAuthenticated();
+    const isTokenExpired      = this.isExpired();
 
     return (
       <Route
         {...rest}
         render={
           props => (
-            isUserAuthenticated
+            !isTokenExpired && isUserAuthenticated
               ? <Component {...props} />
               : <Redirect to={{ pathname: "/login", state: { from: location } }} />
           )
@@ -53,6 +54,10 @@ class PrivateRoute extends Component {
 
     return isAuthenticated;
   }
+
+  isExpired() {
+    return auth.isExpiredToken(auth.getToken());
+  }
 }
 
 export default withRouter(PrivateRoute);

package.json

@@ -1,23 +1,48 @@
-// @flow weak
+// @flow
+
+import type {
+  Storage,
+  TokenKey,
+  UserInfoKey,
+  STORES_TYPES
+}                 from './type';
+import decode     from 'jwt-decode';
+import moment     from 'moment';
+
 
 const TOKEN_KEY = 'token';
 const USER_INFO = 'userInfo';
 
-const APP_PERSIST_STORES_TYPES = ['localStorage', 'sessionStorage'];
+const APP_PERSIST_STORES_TYPES: Array<STORES_TYPES> = [
+  'localStorage',
+  'sessionStorage'
+];
 
-const parse = JSON.parse;
+const parse     = JSON.parse;
 const stringify = JSON.stringify;
+
 /*
   auth object
   -> store "TOKEN_KEY"
   - default storage is "localStorage"
   - default token key is 'token'
  */
 export const auth = {
-  // -------------------------
-  // token
-  // -------------------------
-  getToken(fromStorage = APP_PERSIST_STORES_TYPES[0], tokenKey = TOKEN_KEY) {
+  // /////////////////////////////////////////////////////////////
+  // TOKEN
+  // /////////////////////////////////////////////////////////////
+
+  /**
+   * get token from localstorage
+   *
+   * @param {'localStorage' | 'sessionStorage'} [fromStorage='localStorage'] specify storage
+   * @param {any} [tokenKey=TOKEN_KEY]  optionnal parameter to specify a token key
+   * @returns {string} token value
+   */
+  getToken(
+    fromStorage: Storage  = APP_PERSIST_STORES_TYPES[0],
+    tokenKey: TokenKey = TOKEN_KEY
+  ): ?string {
     // localStorage:
     if (fromStorage === APP_PERSIST_STORES_TYPES[0]) {
       return (localStorage && localStorage.getItem(tokenKey)) || null;
@@ -30,7 +55,19 @@ export const auth = {
     return null;
   },
 
-  setToken(value = '', toStorage = APP_PERSIST_STORES_TYPES[0], tokenKey = TOKEN_KEY) {
+  /**
+  * set the token value into localstorage (managed by localforage)
+  *
+  * @param {string} [value=''] token value
+  * @param {'localStorage' | 'sessionStorage'} [toStorage='localStorage'] specify storage
+  * @param {any} [tokenKey='token'] token key
+  * @returns {boolean} success/failure flag
+  */
+  setToken(
+    value: string = '',
+    toStorage: Storage = APP_PERSIST_STORES_TYPES[0],
+    tokenKey: TokenKey = TOKEN_KEY
+  ): ?string {
     if (!value || value.length <= 0) {
       return;
     }
@@ -47,19 +84,33 @@ export const auth = {
       }
     }
   },
-  /*
-      Note: 'isAuthenticated' just checks 'tokenKey' on store (localStorage by default or sessionStorage)
 
-      You may think: 'ok I just put an empty token key and I have access to protected routes?''
-          -> answer is:  YES^^
-       BUT
-       -> : your backend will not recognize a wrong token so private data or safe and you protected view could be a bit ugly without any data.
 
-       => ON CONCLUSION: this aim of 'isAuthenticated'
-          -> is to help for a better "user experience"  (= better than displaying a view with no data since server did not accept the user).
-          -> it is not a security purpose (security comes from backend, since frontend is easily hackable => user has access to all your frontend)
+  /**
+   * check
+   * - if token key contains a valid token value (defined and not an empty value)
+   * - if the token expiration date is passed
+   *
+   *
+   * Note: 'isAuthenticated' just checks 'tokenKey' on store (localStorage by default or sessionStorage)
+   *
+   * You may think: 'ok I just put an empty token key and I have access to protected routes?''
+   *    -> answer is:  YES^^
+   * BUT
+   * -> : your backend will not recognize a wrong token so private data or safe and you protected view could be a bit ugly without any data.
+   *
+   * => ON CONCLUSION: this aim of 'isAuthenticated'
+   *    -> is to help for a better "user experience"  (= better than displaying a view with no data since server did not accept the user).
+   *    -> it is not a security purpose (security comes from backend, since frontend is easily hackable => user has access to all your frontend)
+   *
+   * @param {'localStorage' | 'sessionStorage'} [fromStorage='localStorage'] specify storage
+   * @param {any} [tokenKey=TOKEN_KEY] token key
+   * @returns {bool} is authenticed response
    */
-  isAuthenticated(fromStorage = APP_PERSIST_STORES_TYPES[0], tokenKey = TOKEN_KEY) {
+  isAuthenticated(
+    fromStorage: Storage = APP_PERSIST_STORES_TYPES[0],
+    tokenKey: TokenKey = TOKEN_KEY
+  ): boolean {
     // localStorage:
     if (fromStorage === APP_PERSIST_STORES_TYPES[0]) {
       if ((localStorage && localStorage.getItem(tokenKey))) {
@@ -80,22 +131,82 @@ export const auth = {
     return false;
   },
 
-  clearToken(tokenKey = TOKEN_KEY) {
+  /**
+   * delete token
+   *
+   * @param {any} [tokenKey='token'] token key
+   * @returns {bool} success/failure flag
+   */
+  clearToken(
+    storage: Storage  = APP_PERSIST_STORES_TYPES[0],
+    tokenKey: TokenKey = TOKEN_KEY
+  ): boolean {
     // localStorage:
     if (localStorage && localStorage[tokenKey]) {
       localStorage.removeItem(tokenKey);
+      return true;
     }
     // sessionStorage:
     if (sessionStorage && sessionStorage[tokenKey]) {
       sessionStorage.removeItem(tokenKey);
+      return true;
     }
+
+    return false;
   },
 
+  /**
+   * return expiration date from token
+   *
+   * @param {string} encodedToken - base 64 token received from server and stored in local storage
+   * @returns {date | null} returns expiration date or null id expired props not found in decoded token
+   */
+  getTokenExpirationDate(
+    encodedToken: any
+  ): Date {
+    if (!encodedToken) {
+      return new Date(0); // is expired
+    }
 
-  // -------------------------
+    const token = decode(encodedToken);
+    if (!token.exp) {
+      return new Date(0); // is expired
+    }
+    const expirationDate = new Date(token.exp*1000);
+    return expirationDate;
+  },
+
+  /**
+   * tell is token is expired (compared to now)
+   *
+   * @param {string} encodedToken - base 64 token received from server and stored in local storage
+   * @returns {bool} returns true if expired else false
+   */
+  isExpiredToken(
+    encodedToken: any
+  ): boolean {
+    const expirationDate = this.getTokenExpirationDate(encodedToken);
+    const rightNow       = moment();
+    const isExpiredToken = moment(rightNow).isAfter(moment(expirationDate));
+
+    return isExpiredToken;
+  },
+
+
+  // /////////////////////////////////////////////////////////////
   // USER_INFO
-  // -------------------------
-  getUserInfo(fromStorage = APP_PERSIST_STORES_TYPES[0], userInfoKey = USER_INFO) {
+  // /////////////////////////////////////////////////////////////
+  /**
+   * get user info from localstorage
+   *
+   * @param {'localStorage' | 'sessionStorage'} [fromStorage='localStorage'] specify storage
+   * @param {any} [userInfoKey='userInfo']  optionnal parameter to specify a token key
+   * @returns {string} token value
+   */
+  getUserInfo(
+    fromStorage: Storage = APP_PERSIST_STORES_TYPES[0],
+    userInfoKey: UserInfoKey = USER_INFO
+  ): ?string {
     // localStorage:
     if (fromStorage === APP_PERSIST_STORES_TYPES[0]) {
       return (localStorage && parse(localStorage.getItem(userInfoKey))) || null;
@@ -108,7 +219,19 @@ export const auth = {
     return null;
   },
 
-  setUserInfo(value = '', toStorage = APP_PERSIST_STORES_TYPES[0], userInfoKey = USER_INFO) {
+  /**
+   * set the userInfo value into localstorage
+   *
+   * @param {object} [value=''] token value
+   * @param {'localStorage' | 'sessionStorage'} [toStorage='localStorage'] specify storage
+   * @param {any} [userInfoKey='userInfo'] token key
+   * @returns {boolean} success/failure flag
+   */
+  setUserInfo(
+    value: string = '',
+    toStorage:Storage = APP_PERSIST_STORES_TYPES[0],
+    userInfoKey:UserInfoKey = USER_INFO
+  ): any {
     if (!value || value.length <= 0) {
       return;
     }
@@ -126,7 +249,15 @@ export const auth = {
     }
   },
 
-  clearUserInfo(userInfoKey = USER_INFO) {
+  /**
+   * delete userInfo
+   *
+   * @param {string} [userInfoKey='userInfo'] token key
+   * @returns {bool} success/failure flag
+   */
+  clearUserInfo(
+    userInfoKey: UserInfoKey = USER_INFO
+  ): any {
     // localStorage:
     if (localStorage && localStorage[userInfoKey]) {
       localStorage.removeItem(userInfoKey);
@@ -138,10 +269,15 @@ export const auth = {
   },
 
 
-  // ---------------------------
-  // common
-  // ---------------------------
-  clearAllAppStorage() {
+  // /////////////////////////////////////////////////////////////
+  // COMMON
+  // /////////////////////////////////////////////////////////////
+
+  /**
+   * forget me method: clear all
+   * @returns {bool} success/failure flag
+   */
+  clearAllAppStorage(): any {
     if (localStorage) {
       localStorage.clear();
     }

src/app/components/privateRoute/PrivateRoute.js

@@ -0,0 +1,10 @@
+
+// @flow
+
+export type STORES_TYPES =
+| 'localStorage'
+| 'sessionStorage';
+
+export type Storage       = STORES_TYPES
+export type TokenKey      = string;
+export type UserInfoKey   = string;

src/app/services/auth/index.js

@@ -5,6 +5,7 @@ import React, {
 }                     from 'react';
 import PropTypes      from 'prop-types';
 import Jumbotron      from '../../components/jumbotron/Jumbotron';
+import cx             from 'classnames';
 
 class PageNotFound extends PureComponent {
   static propTypes = {

src/app/services/auth/type.js

@@ -4556,6 +4556,10 @@ jsx-ast-utils@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
 
+jwt-decode@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-2.2.0.tgz#7d86bd56679f58ce6a84704a657dd392bba81a79"
+
 keycode@^2.1.2:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.1.9.tgz#964a23c54e4889405b4861a5c9f0480d45141dfa"