Fix dev mode login/logout redirect

Author: Alex Chew

cloudformation/template.yaml

@@ -1121,20 +1121,20 @@ Resources:
       SupportedIdentityProviders: [ "COGNITO" ] # should (eventually) allow people to add values
       CallbackURL: !If [ DevelopmentMode,
         [
-          'http://localhost:3000/login',
-          !Join [ '', [ 'https://', !GetAtt DevPortalSiteS3Bucket.RegionalDomainName ]]
+          'http://localhost:3000/index.html?action=login',
+          !Join [ '', [ 'https://', !GetAtt DevPortalSiteS3Bucket.RegionalDomainName, '/index.html?action=login' ]]
         ],
         [
-          !Join [ '', [ 'https://', !If [ UseCustomDomainName, !Ref CustomDomainName, !GetAtt DefaultCloudfrontDistribution.DomainName ], '/login' ]]
+          !Join [ '', [ 'https://', !If [ UseCustomDomainName, !Ref CustomDomainName, !GetAtt DefaultCloudfrontDistribution.DomainName ], '/index.html?action=login' ]]
         ]
       ]
       LogoutURL: !If [ DevelopmentMode,
         [
-          'http://localhost:3000',
-          !Join [ '', [ 'https://', !GetAtt DevPortalSiteS3Bucket.RegionalDomainName]]
+          'http://localhost:3000/index.html?action=logout',
+          !Join [ '', [ 'https://', !GetAtt DevPortalSiteS3Bucket.RegionalDomainName, '/index.html?action=logout' ]]
         ],
         [
-          !Join [ '', [ 'https://', !If [ UseCustomDomainName, !Ref CustomDomainName, !GetAtt DefaultCloudfrontDistribution.DomainName ]]]
+          !Join [ '', [ 'https://', !If [ UseCustomDomainName, !Ref CustomDomainName, !GetAtt DefaultCloudfrontDistribution.DomainName ], '/index.html?action=logout' ]]
         ]
       ]
       AllowedOAuthFlowsUserPoolClient: true

dev-portal/package-lock.json

@@ -11,6 +11,7 @@
     "mobx": "^5.5.0",
     "mobx-react": "^5.2.8",
     "object-hash": "^1.3.1",
+    "query-string": "^6.8.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-markdown": "^4.0.3",

dev-portal/package.json

@@ -5,7 +5,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { Menu, Image } from 'semantic-ui-react'
 
-import { isAdmin, isAuthenticated, logout } from 'services/self'
+import { isAdmin, isAuthenticated, logout, getLoginRedirectUrl } from 'services/self'
 
 import { cognitoDomain, cognitoClientId } from '../services/api'
 
@@ -21,7 +21,7 @@ import Register from './Register'
 export const NavBar = observer(
   class NavBar extends React.Component {
     getCognitoUrl = (type) => {
-      let redirectUri = `${window.location.protocol}//${window.location.host}/login`
+      let redirectUri = getLoginRedirectUrl()
       return `${cognitoDomain}/${type}?response_type=token&client_id=${cognitoClientId}&redirect_uri=${redirectUri}`
     }
 

dev-portal/src/components/NavBar.jsx

@@ -5,14 +5,15 @@ import React from 'react'
 import {Menu} from 'semantic-ui-react'
 import {Redirect} from 'react-router-dom'
 
+import {getLoginRedirectUrl} from 'services/self'
 import {cognitoDomain, cognitoClientId} from '../services/api'
 
 export default class Register extends React.Component {
-    redirectUri = `${window.location.protocol}//${window.location.host}/login`
+    redirectUri = getLoginRedirectUrl()
 
     render() {
         return this.props.signedIn ? <Redirect to='/apis'/> : (
             <Menu.Item key="register" as="a"
                        href={`${cognitoDomain}/signup?response_type=token&client_id=${cognitoClientId}&redirect_uri=${this.redirectUri}`}>Register</Menu.Item>)
     }
-}
+}

dev-portal/src/components/Register.jsx

@@ -5,6 +5,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
 
+import * as queryString from 'query-string'
+
 // content-fragments (import here to start this ASAP)
 import 'services/get-fragments'
 
@@ -62,9 +64,15 @@ class App extends React.Component {
           <GlobalModal />
           <Switch>
             <Route exact path="/" component={Home} />
-            <Route exact path="/index.html" component={() =>
-              <Redirect to="/"/>
-            } />
+            <Route exact path="/index.html" component={() => {
+              const { action } = queryString.parse(window.location.search)
+              if (action === 'login') {
+                login()
+              } else if (action === 'logout') {
+                logout()
+              }
+              return <Redirect to="/" />
+            }} />
             <Route path="/getting-started" component={GettingStarted} />
             <Route path="/dashboard" component={Dashboard} />
             <AdminRoute path="/admin" component={Admin} />

dev-portal/src/index.js

@@ -77,6 +77,9 @@ export function login() {
   })
 }
 
+export const getLoginRedirectUrl = () => `${window.location.protocol}//${window.location.host}/index.html?action=login`
+export const getLogoutRedirectUrl = () => `${window.location.protocol}//${window.location.host}/index.html?action=logout`
+
 function setCredentials() {
   let preferred_role = jwt_decode(store.idToken)['cognito:preferred_role']
   let params = {
@@ -114,7 +117,8 @@ export function logout() {
 
     if (cognitoDomain) {
       // redirect to cognito to log out there, too
-      window.location = `${cognitoDomain}/logout?client_id=${cognitoClientId}&logout_uri=${window.location.protocol}//${window.location.host}`;
+      const redirectUrl = getLogoutRedirectUrl()
+      window.location = `${cognitoDomain}/logout?client_id=${cognitoClientId}&logout_uri=${redirectUrl}`
     }
   }
 }