Improve the user sign in session

Author: rickyhurtado

.env.dist

@@ -9,4 +9,4 @@ REACT_APP_API_VERIFY_TOKEN_URL=http://localhost:7770/verify-token
 REACT_APP_API_SESSIONS_URL=http://localhost:7770/sessions
 REACT_APP_API_USERS_URL=http://localhost:7770/users
 
-REACT_APP_API_JWT_SECRET=jwtsecretcode
+REACT_APP_HASH=356a192b7913b04c54574d18c28d46e6395428ab.da4b9237bacccdf19c0760cab7aec4a8359010b0.77de68daecd823babbb58edb1c8e14d7106e83bb.1b6453892473a467d07372d45eb05abc2031647a.ac3478d69a3c81fa62e60f5c3696165a4e5e6ac4

README.md

@@ -19,9 +19,13 @@ REACT_APP_API_SIGN_OUT_URL=http://localhost:7770/sign-out
 REACT_APP_API_VERIFY_TOKEN_URL=http://localhost:7770/verify-token
 REACT_APP_API_SESSIONS_URL=http://localhost:7770/sessions
 REACT_APP_API_USERS_URL=http://localhost:7770/users
-REACT_APP_API_JWT_SECRET=jwtsecretcode
+REACT_APP_HASH=sha1hash1.sha1hash2.sha1hash3
 ```
 
+NOTE: Generate random hashes and concatenate the hashes with “.”.
+The same hashes should also be used in the API app.
+The more hashes, the better.
+
 ### Config Files
 
 Copy `./src/Config.dist` folder to `Config` and change the configurations if needed.
@@ -71,20 +75,20 @@ Note: To view the Docker containers, open another terminal console then enter `d
 
 ### Docker
 
-| Command                                | Description                                                            |
-|----------------------------------------|------------------------------------------------------------------------|
-| `./bin/install`                        | Build the Docker container and start the app                           |
-| `./bin/reinstall`                      | Rebuild the Docker container with the current branch and start the app |
-| `./bin/start`                          | Start the client app service                                           |
-| `./bin/stop`                           | Stop the client app service                                            |
-| `./bin/console <container ID or Name>` | Access the terminal console of the container                           |
+| Command                              | Description                                                            |
+|--------------------------------------|------------------------------------------------------------------------|
+| `bin/install`                        | Build the Docker container and start the app                           |
+| `bin/reinstall`                      | Rebuild the Docker container with the current branch and start the app |
+| `bin/start`                          | Start the client app service                                           |
+| `bin/stop`                           | Stop the client app service                                            |
+| `bin/console <container ID or Name>` | Access the terminal console of the container                           |
 
 ### CSS
 
-| Command           | Description                                                         |
-|-------------------|---------------------------------------------------------------------|
-| `./bin/css/watch` | Watch and compile *.scss files on file changes (for Mac users only) |
-| `./bin/css/build` | Manually compile *.scss files                                       |
+| Command         | Description                                                         |
+|-----------------|---------------------------------------------------------------------|
+| `bin/css/watch` | Watch and compile *.scss files on file changes (for Mac users only) |
+| `bin/css/build` | Manually compile *.scss files                                       |
 
 ## Available API App Boilerplates
 

src/Components/Buttons/SignOut.js

@@ -11,7 +11,7 @@ export default class SignOut extends Component {
     Axios
       .post(process.env.REACT_APP_API_SIGN_OUT_URL)
       .then(response => {
-        Session.deleteToken()
+        Session.deleteTokens()
         closeNavbar()
         this.props.auth(false)
       })

src/Components/Forms/SignIn.js

@@ -35,14 +35,18 @@ export default class SignIn extends Component {
       showAlertMessage: true
     })
 
-    const token = JWT.sign(formData, process.env.REACT_APP_API_JWT_SECRET)
+    const hash  = Session.hash()
+    const token = JWT.sign(formData, hash[0])
+    const tkid  = hash[1]
 
     Axios
-      .post(process.env.REACT_APP_API_SIGN_IN_URL, { token })
+      .post(process.env.REACT_APP_API_SIGN_IN_URL, { token, tkid })
       .then(response => {
-        const { token, redirect } = response.data
+        const { token, data, redirect, tkid } = response.data
 
         Session.store({ token })
+        Session.store({ data })
+        Session.store({ tkid })
 
         this.setState({
           alertMessage: {

src/Lib/Helpers/Session.js

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import Store from 'store'
 import JWT from 'jsonwebtoken'
 import Axios from '../Common/Axios'
@@ -8,6 +9,18 @@ export function store(data) {
   }
 }
 
+export function hash(index) {
+  const hashList = process.env.REACT_APP_HASH.split('.')
+
+  if (index) index = parseInt(index.toString().charAt(index.toString().length - 1), 10)
+  else index = _.random(0, hashList.length - 1)
+
+  return [
+    hashList[index],
+    [_.random(1111111, 9999999), index].join('')
+  ]
+}
+
 export function isSignedIn() {
   token()
   ? Axios.defaults.headers.common['Authorization'] = `Bearer ${token()}`
@@ -46,8 +59,8 @@ export function userRole() {
 /* PAGE ACCESS */
 
 export function showPage(path) {
-  const allowedPaths = tokenData('allowedPaths')
-  const excludedPaths = tokenData('excludedPaths')
+  const allowedPaths = getData('allowedPaths')
+  const excludedPaths = getData('excludedPaths')
 
   if (excludedPaths && excludedPaths.length > 0 && excludedPaths.indexOf(path) > -1) return false
   if (allowedPaths && allowedPaths.toString() === '*') return true
@@ -75,28 +88,34 @@ export function verifyToken() {
     Axios
       .get(process.env.REACT_APP_API_VERIFY_TOKEN_URL)
       .catch(error => {
-        deleteToken()
+        deleteTokens()
         window.location.reload()
       })
   }, 1000);
 }
 
+export function dataToken() {
+  return Store.get('data')
+}
+
 export function token() {
   return Store.get('token')
 }
 
-export function deleteToken() {
+export function deleteTokens() {
+  Store.remove('data')
   Store.remove('token')
+  Store.remove('tkid')
 }
 
 export function decodedToken() {
-  if (token()) {
+  if (dataToken()) {
     return JWT.verify(
-      token(),
-      process.env.REACT_APP_API_JWT_SECRET,
+      dataToken(),
+      hash(Store.get('tkid'))[0],
       function(errors, decoded) {
         if (errors) {
-          deleteToken()
+          deleteTokens()
           return false
         }
 
@@ -106,6 +125,6 @@ export function decodedToken() {
   }
 }
 
-export function tokenData(data) {
+export function getData(data) {
   return decodedToken() && decodedToken()[data] ? decodedToken()[data] : null
 }