Improve logout mechanism

api/src/routes/auth.js

@@ -109,7 +109,14 @@ router
       return res.redirect(baseUrl + '/login');
     }),
   )
-  .get((req, res) => res.render('logout'));
+  .get((req, res) => {
+    if (req.query.redirectTo) {
+      req.logout();
+      return res.redirect(req.query.redirectTo);
+    }
+
+    return res.render('logout')
+  });
 
 const isIp = (ip) =>
   typeof ip === 'string' &&

frontend/src/App.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {connect} from 'react-redux'
-import {List, Grid, Container, Menu, Icon, Button, Header, Dropdown} from 'semantic-ui-react'
+import {List, Grid, Container, Menu, Header, Dropdown} from 'semantic-ui-react'
 import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'
 
 import config from 'config.json'
@@ -24,32 +24,31 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
     <Router basename={process.env.PUBLIC_URL || '/'}>
       <Menu fixed="top">
         <Container>
-          <Menu.Item header className={styles.pageTitle}>
-            <Link to="/">OpenBikeSensor</Link>
-          </Menu.Item>
+          <Link to="/" component={Menu.Item} header className={styles.pageTitle}>
+            OpenBikeSensor
+          </Link>
 
           <Link component={Menu.Item} to="/tracks">
             Tracks
           </Link>
 
-            <Menu.Menu position="right">
-          {login ? (
-            <Dropdown item trigger={
-                <Avatar user={login} className={styles.avatar} />
-              }>
+          <Menu.Menu position="right">
+            {login ? (
+              <Dropdown item trigger={<Avatar user={login} className={styles.avatar} />}>
                 <Dropdown.Menu>
                   <Link to="/upload" component={Dropdown.Item} icon="cloud upload" text="Upload tracks" />
                   <Link to="/settings" component={Dropdown.Item} icon="cog" text="Settings" />
-                    <Dropdown.Divider />
+                  <Dropdown.Divider />
                   <Link to="/logout" component={Dropdown.Item} icon="sign-out" text="Logout" />
-              </Dropdown.Menu>
+                </Dropdown.Menu>
               </Dropdown>
-          ) : (
+            ) : (
               <Menu.Item>
-                <LoginButton as="a" compact />
+                Foo
+                {/* <LoginButton compact /> */}
               </Menu.Item>
-          )}
-            </Menu.Menu>
+            )}
+          </Menu.Menu>
         </Container>
       </Menu>
 
@@ -95,7 +94,7 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
           <Grid columns={4} stackable>
             <Grid.Row>
               <Grid.Column>
-                <Header as='h5'>About the project</Header>
+                <Header as="h5">About the project</Header>
                 <List>
                   <List.Item>
                     <a href="https://openbikesensor.org/" target="_blank" rel="noreferrer">
@@ -106,7 +105,7 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
               </Grid.Column>
 
               <Grid.Column>
-                <Header as='h5'>Get involved</Header>
+                <Header as="h5">Get involved</Header>
                 <List>
                   <List.Item>
                     <a href="https://openbikesensor.org/slack" target="_blank" rel="noreferrer">
@@ -127,7 +126,7 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
               </Grid.Column>
 
               <Grid.Column>
-                <Header as='h5'>This installation</Header>
+                <Header as="h5">This installation</Header>
                 <List>
                   <List.Item>
                     <a href={config.privacyPolicyUrl} target="_blank" rel="noreferrer">
@@ -142,8 +141,7 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
                 </List>
               </Grid.Column>
 
-              <Grid.Column>
-              </Grid.Column>
+              <Grid.Column></Grid.Column>
             </Grid.Row>
           </Grid>
         </Container>

frontend/src/api.js

@@ -164,6 +164,18 @@ class API {
     return true
   }
 
+  async logout() {
+    // 1. Tell the store to forget that we're logged in.
+    this.store.dispatch(resetAuth())
+
+    // 2. Log out session in API.
+    const {tokenEndpoint} = await this.getAuthorizationServerMetadata()
+    const url = new URL(tokenEndpoint.replace(/\/token$/, '/logout'))
+    url.searchParams.append('redirectTo', window.location.href) // bring us back to the current page
+
+    window.location.href = url.toString()
+  }
+
   async makeLoginUrl() {
     const {authorizationEndpoint} = await this.getAuthorizationServerMetadata()
 

frontend/src/pages/LogoutPage.js

@@ -1,18 +1,19 @@
 import React from 'react'
+import {Loader} from 'semantic-ui-react'
 import {connect} from 'react-redux'
 import {Redirect} from 'react-router-dom'
 
-import {resetAuth} from 'reducers/auth'
+import api from 'api'
 
 const LogoutPage = connect(
   (state) => ({loggedIn: Boolean(state.login)}),
-  {resetAuth}
-)(function LogoutPage({loggedIn, resetAuth}) {
+)(function LogoutPage({loggedIn}) {
   React.useEffect(() => {
-    resetAuth()
+    // no await, just trigger it
+    api.logout()
   })
 
-  return loggedIn ? null : <Redirect to="/" />
+  return loggedIn ? <Loader active /> : <Redirect to="/" />
 })
 
 export default LogoutPage

frontend/src/pages/TracksPage.tsx

@@ -28,7 +28,7 @@ function TracksPageTabs() {
     <Menu pointing secondary>
       <Menu.Item name="/tracks" active={!isOwnTracksPage} {...{onClick}}>Tracks</Menu.Item>
       <Menu.Item name="/my/tracks" active={isOwnTracksPage} {...{onClick}} />
-    <Menu.Item name="/upload" position='right' {...{onClick}}><Button color='green' compact size='small'>Upload</Button></Menu.Item>
+      <Menu.Item name="/upload" position='right' {...{onClick}}><Button color='green' compact size='small'>Upload</Button></Menu.Item>
     </Menu>
   )
 }