Add logout functionality

Author: Jeff Ma

package.json

@@ -28,7 +28,7 @@
     "prebuild": "yarn build:frontend && node ./src/backend/scripts/generate-gcp-key.js",
     "build": "cross-env NODE_ENV=production babel src/backend --out-dir lib --copy-files",
     "start": "cross-env NODE_ENV=production babel-node lib/index.js",
-    "deploy": "git push heroku main",
+    "deploy": "fly deploy",
     "migrate": "knex migrate:latest --knexfile src/backend/knexfile.js",
     "seed:dev": "cross-env NODE_ENV=development knex seed:run --knexfile src/backend/knexfile.js",
     "seed": "knex seed:run --knexfile src/backend/knexfile.js",
@@ -85,8 +85,7 @@
     "react-scripts": "3.4.3",
     "redux": "^4.0.5",
     "styled-components": "^5.2.1",
-    "typeface-ibm-plex-sans": "^1.1.13",
-    "redux-devtools-extension": "^2.13.8"
+    "typeface-ibm-plex-sans": "^1.1.13"
   },
   "browserslist": {
     "production": [
@@ -117,6 +116,7 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "esm": "^3.2.25",
-    "mocha": "^8.2.0"
+    "mocha": "^8.2.0",
+    "redux-devtools-extension": "^2.13.8"
   }
 }

src/backend/scripts/generate-gcp-key.js

@@ -1,6 +1,6 @@
-// Load the GCP Key file on keroku
+// Load the GCP Key file on our production server
 // The file is not stored in git,
-// so heroku will need to generate it from .env
+// so the production server will need to generate it from .env
 
 require('dotenv').config()
 const fs = require('fs')

src/frontend/components/TopBar/ProfileDropdown.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import MUIGrid from '@mui/material/Grid';
 import MUITypography from '@mui/material/Typography';
@@ -8,6 +7,7 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 const Typography = styled(MUITypography)`
   font: ${({ theme }) => theme.fonts.bold14};
   text-align: center;
+  cursor: pointer;
 `;
 
 const Grid = styled(MUIGrid)``;
@@ -38,21 +38,17 @@ const Container = styled.div`
   }
 `;
 
-const ProfileDropdown = ({ className, onClose }) => {
-  const history = useHistory();
-
-  return (
-    <ClickAwayListener onClickAway={onClose}>
-      <Container className={className}>
-        <Arrow />
-        <MainBox>
-          <Grid xs={20}>
-            <Typography>Sign Out</Typography>
-          </Grid>
-        </MainBox>
-      </Container>
-    </ClickAwayListener>
-  );
-};
+const ProfileDropdown = ({ className, onClose, onLogout }) => (
+  <ClickAwayListener onClickAway={onClose}>
+    <Container className={className}>
+      <Arrow />
+      <MainBox>
+        <Grid xs={20}>
+          <Typography onClick={onLogout}>Sign Out</Typography>
+        </Grid>
+      </MainBox>
+    </Container>
+  </ClickAwayListener>
+);
 
 export default ProfileDropdown;

src/frontend/components/TopBar/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import useProfilePicture from '../../hooks/profile-picture';
 import { Link } from 'react-router-dom';
@@ -10,6 +11,7 @@ import WaterloopLogoSVG from './assets/topbar-logo.svg';
 import UnstyledDesktopMenu from './DesktopMenu';
 import UnstyledProfileDropdown from './ProfileDropdown';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import useGoogleAuth from '../../hooks/google-auth';
 
 const AppBar = styled(MUIAppBar)`
   background-color: ${({ theme }) => theme.colours.blues.blue1};
@@ -56,8 +58,15 @@ const ProfilePicture = styled.img`
 const TopBar = () => {
   const [menuOpen, setMenuOpen] = React.useState(false);
   const [dropdownOpen, setDropdownOpen] = React.useState(false);
+  const { signOut } = useGoogleAuth();
+  const history = useHistory();
   const { profilePicture } = useProfilePicture();
 
+  const onLogout = () => {
+    signOut();
+    history.push('/sign-in');
+  };
+
   return (
     <div>
       <AppBar position="relative">
@@ -86,7 +95,10 @@ const TopBar = () => {
       </AppBar>
       {menuOpen && <DesktopMenu onClose={() => setMenuOpen(false)} />}
       {dropdownOpen && (
-        <ProfileDropdown onClose={() => setDropdownOpen(false)} />
+        <ProfileDropdown
+          onClose={() => setDropdownOpen(false)}
+          onLogout={onLogout}
+        />
       )}
     </div>
   );

src/frontend/hooks/google-auth.js

@@ -1,8 +1,15 @@
 import { useCallback } from 'react';
-import { useGoogleLogin } from 'react-google-login';
+import { useGoogleLogin, useGoogleLogout } from 'react-google-login';
 import * as userActions from '../state/user/actions';
 import { useDispatch } from 'react-redux';
 import api from '../api';
+import Cookies from 'js-cookie';
+
+const scopes = [
+  'profile',
+  'email',
+  'https://www.googleapis.com/auth/admin.directory.group.readonly',
+];
 
 const useGoogleAuth = (onAuthComplete) => {
   const dispatch = useDispatch();
@@ -36,15 +43,26 @@ const useGoogleAuth = (onAuthComplete) => {
     onFailure: (err) => {
       console.log('failed auth', err);
     },
-    clientId:
-      '538509890740-e3dai2feq6knjfdspqde5ogt2kme0chm.apps.googleusercontent.com',
-    scope:
-      'profile email https://www.googleapis.com/auth/admin.directory.group.readonly',
+    clientId: process.env.REACT_APP_GOOGLE_CLIENT_ID,
+    scope: scopes.join(' '),
     prompt: 'consent',
   });
 
+  const { signOut } = useGoogleLogout({
+    clientId: process.env.REACT_APP_GOOGLE_CLIENT_ID,
+    onLogoutSuccess: () => {
+      // removeAllCookies();
+      Cookies.remove('tokenId');
+      console.log('successful logout');
+    },
+    onFailure: () => {
+      console.error('Failed to logout!');
+    },
+  });
+
   return {
     signIn,
+    signOut,
   };
 };
 

src/frontend/pages/sign-in/SignInPage.js

@@ -104,7 +104,7 @@ const SignInPage = () => {
       Cookies.set('tokenId', tokenId, { expires: 1 });
       addAuthTokenToRequests(tokenId);
       console.log('Auth Complete');
-
+      // TODO: store accessToken in browser storage.
       api.google
         .updateUserGroups(userId, groupIds, accessToken)
         .then((resp) => {