Writing new token to sessionstorage

Author: c-simpson

src/client/src/App.js

@@ -10,7 +10,7 @@ import About from './pages/About';
 import Login from './components/Login/Login';
 import CDialog from './components/CDialog';
 import Check from './pages/Check/Check';
-
+import Refresh from './components/Refresh';
 
 import useToken from './components/Login/useToken';
 var jwt = require('jsonwebtoken');
@@ -71,6 +71,7 @@ function AuthenticatedApp() {
 
     const { access_token, setToken } = useToken();
 
+    console.log("AA - token = " + String(access_token).slice(-8))
 
     var decoded = jwt.decode(access_token, { complete: true });
 
@@ -119,6 +120,11 @@ function AuthenticatedApp() {
                 <Route path="/check"> 
                   <Check />
                 </Route>
+
+                <Route path="/ref">
+                  <Refresh />
+                </Route>
+
             </Switch>
             }
 

src/client/src/components/CDialog.js

@@ -6,16 +6,26 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 
-export default function CDialog() {
+import useToken from '../components/Login/useToken';
+
+import Refresh from './Refresh';
+
+export default function  CDialog() {
   const [open, setOpen] = React.useState(true);
+  const { access_token, setToken } = useToken();
+
 
   const handleClickOpen = () => {
     setOpen(true);
   };
 
-  const handleClose = (shouldRefresh) => {
+  const handleClose = async (shouldRefresh) => {
     setOpen(false);
     console.log("Refresh? " + String(shouldRefresh));
+    if (shouldRefresh){
+      const new_at =  await Refresh(access_token);
+      setToken(new_at);
+    }
   };
 
 
@@ -27,7 +37,7 @@ export default function CDialog() {
       </Button> */}
       <Dialog
         open={open}
-        onClose={handleClose}
+        onClose={() => handleClose(false)}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
       >

src/client/src/components/Refresh.js

@@ -1,118 +1,52 @@
 import React from 'react';
-import { useHistory } from "react-router-dom";
 import useToken from '../components/Login/useToken';
 var jwt = require('jsonwebtoken');
 
 
+export default async function Refresh(old_token) {
 
-export default function Refresh() {
+    
+        console.log("Top of Refresh, old_token = " + String(old_token).slice(-8) );
 
-    const { access_token, setToken } = useToken();
+        // get the decoded payload and header
+        var decoded = jwt.decode(old_token, { complete: true });
+        const expTime = decoded?.payload.exp
+        // console.log('User: ' + userName + ' / Role:' + userRole + '->' +  processStatus + ' @ ' + DateTime.local().toFormat('HH:mm:ss.SSS'))
 
-    const [processStatus, setProcessStatus] = React.useState('loading');
-    const [error, setError] = React.useState('');
-    const [data, setData] = React.useState('');
+    
 
-    let history = useHistory()
- 
-     
 
-   
-
-    // get the decoded payload and header
-    var decoded = jwt.decode(access_token, { complete: true });
-    const userName = decoded?.payload.sub
-    const userRole = decoded?.payload.role
-    const expTime = decoded?.payload.exp
-    // console.log('User: ' + userName + ' / Role:' + userRole + '->' +  processStatus + ' @ ' + DateTime.local().toFormat('HH:mm:ss.SSS'))
-
- 
-
-    React.useEffect(() => {
-
-        function doRefresh() {
-            //   console.log('authCheck startfetch @ ' + DateTime.local().toFormat('HH:mm:ss.SSS'))
-               fetch('http://localhost:5000/api/user/refresh',
-               {
-                   method: 'GET',
-                   headers: {
-                       'Content-Type': 'application/json',
-                       'Authorization': 'Bearer ' + access_token
-                   }
-               })
-           
-               .then((response) => {
-                //   console.log('authCheck handle response @ ' + DateTime.local().toFormat('HH:mm:ss.SSS'))
-                   if (!response.ok) {
-                       //throw (String(response.status + ':' + response.statusText))
-                       throw (response)
-                   }
-                   return response.json()
-               } )
-               .then((data) => {
-                 //  console.log('authCheck data  @ ' + DateTime.local().toFormat('HH:mm:ss.SSS'))
-                   setProcessStatus('complete');
-                   setData(data);
-               })
-               .catch((e) => {
-                   let errCode = e.status
-                   let errText = e.statusText
-           
-                   setToken(null)  // Clear the token to force login again
-                   let errStr = String(e)
-                   setProcessStatus('error');
-                   setError(errStr);
-                   console.log(errCode + ':' + errText)
-                   history.push('/')
-                   return e
-               });
-           
-           }  //
-
-        
-        const handleRefresh = async e => {
-            const dr = await doRefresh();
-            const at = dr.access_token;
-            setToken(at);
-            };   
-
-
-        handleRefresh();
-           
-    }, 
-    // eslint-disable-next-line 
-    [ processStatus, access_token, history ]);
-
-    // if (processStatus === 'loading') {
-    //     console.log('Check: if pc=l loading...')
-    //     return <p>loading..</p>;
-    // }
-
-    if (processStatus === 'error') {
-        console.log('error')
-        return <p>ERROR: <i>{error}</i></p>;
-    }
+    //   console.log('authCheck startfetch @ ' + DateTime.local().toFormat('HH:mm:ss.SSS'))
+        const new_at = await fetch('http://localhost:5000/api/user/refresh',
+        {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer ' + old_token
+            }
+        })
 
+        .then((response) => {
+        //   console.log('authCheck handle response @ ' + DateTime.local().toFormat('HH:mm:ss.SSS'))
+            if (!response.ok) {
+                //throw (String(response.status + ':' + response.statusText))
+                throw (response)
+            }
+            return response.json()
+        } )
 
+        .catch((e) => {
+            // If it failed there's not much to do, probably got here after expiration 
+            console.log(String(e)); 
+            return '{}'
+        });
 
-    // console.log("About to return")
-    return (
-        <div>
-           
-            <h2>Refresh</h2>
-            <ul>
-               
-            <li>JWT expires: {-(Date.now()/1000 - expTime).toFixed(1)} secs</li>
-            <li>{data}</li>
+        console.log("New AT " + String(new_at.access_token).slice(-8) );
+            
+        return(new_at.access_token);
 
-            </ul>
-            {userRole === 'admin' &&
-                <h2>Welcome, admin!</h2>
-            }
-        </div>
-    );
 
 
 
-};
+}