fix issue with authentication redirect loop

Author: rjwats

interface/src/App.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Redirect, Route, Switch } from 'react-router';
 
 import AppRouting from './AppRouting';
 import SnackbarNotification from './components/SnackbarNotification';
@@ -33,19 +34,25 @@ const theme = createMuiTheme({
 // JSS instance
 const jss = create(jssPreset());
 
-class App extends Component {
-	render() {
-	   return (
-		 <StylesProvider jss={jss}>
-			<MuiThemeProvider theme={theme}>
-        <SnackbarNotification>
-				  <CssBaseline />
-          <AppRouting />
-        </SnackbarNotification>
-			</MuiThemeProvider>
-		 </StylesProvider>
-		)
-	}
+// this redirect forces a call to authenticationContext.refresh() which invalidates the JWT if it is invalid.
+const unauthorizedRedirect = () =>  <Redirect to="/" />;
+
+class App extends Component {  
+  render() {
+    return (
+      <StylesProvider jss={jss}>
+        <MuiThemeProvider theme={theme}>
+          <SnackbarNotification>
+            <CssBaseline />
+            <Switch>
+              <Route exact path="/unauthorized" component={unauthorizedRedirect} />
+              <Route component={AppRouting} />
+            </Switch>
+          </SnackbarNotification>
+        </MuiThemeProvider>
+      </StylesProvider>
+    );
+  }
 }
 
 export default App

interface/src/authentication/Authentication.js

@@ -47,7 +47,7 @@ export function redirectingAuthorizedFetch(url, params) {
   return new Promise(function (resolve, reject) {
     authorizedFetch(url, params).then(response => {
       if (response.status === 401) {
-        history.push("/");        
+        history.push("/unauthorized");        
       } else {
         resolve(response);
       }

interface/src/authentication/AuthenticationWrapper.js

@@ -89,11 +89,11 @@ class AuthenticationWrapper extends React.Component {
 
   signIn = (accessToken) => {
     try {
-      this.setState({ context: { ...this.state.context, user: jwtDecode(accessToken) } });
       localStorage.setItem(ACCESS_TOKEN, accessToken);
+      this.setState({ context: { ...this.state.context, user: jwtDecode(accessToken) } });
     } catch (err) {
       this.setState({ initialized: true, context: { ...this.state.context, user: undefined } });
-      this.props.raiseNotification("Failed to parse JWT " + err.message);
+      throw new Error("Failed to parse JWT " + err.message);
     }
   }
 

interface/src/containers/SignInPage.js

@@ -44,9 +44,9 @@ const styles = theme => {
     }
   }
 }
- 
 
-class LoginPage extends Component {
+
+class SignInPage extends Component {
 
   constructor(props) {
     super(props);
@@ -82,7 +82,6 @@ class LoginPage extends Component {
         }
       }).then(json => {
         authenticationContext.signIn(json.access_token);
-        this.setState({ processing: false });
       })
       .catch(error => {
         this.props.raiseNotification(error.message);
@@ -132,4 +131,6 @@ class LoginPage extends Component {
 
 }
 
-export default withAuthenticationContext(withNotifier(withStyles(styles)(LoginPage)));
+export default withAuthenticationContext(
+  withNotifier(withStyles(styles)(SignInPage))
+);