Use Google Account for Student Sign In

backend/functions/src/middleware/auth-middleware.ts

@@ -64,7 +64,8 @@ export async function checkIsAuthorizedFromToken(
   logger.info(
     `${req.method} request on endpoint ${req.originalUrl} called by user ${user.displayName} with uid ${user.uid}`
   )
-  return !!(user.email && allowedUsers.includes(user.email))
+  const email = user?.providerData[0].email
+  return !!(email && allowedUsers.includes(email))
 }
 
 export function checkIsAuthorized(

frontend/src/auth/PrivateRoute.tsx

@@ -1,10 +1,8 @@
 import { Redirect, Route } from 'react-router'
-import { ADMIN_PATH } from '@core/Constants'
+import { ADMIN_PATH, SURVEY_PATH } from '@core/Constants'
 import { useAuthValue } from './AuthContext'
 import { RouteProps } from '@core'
 import { RouteLoading } from './RouteLoading'
-import { Box, Button, Container, Typography } from '@mui/material'
-import { logOut } from '@fire'
 import { useCourseValue } from '@context/CourseContext'
 import { useStudentValue } from '@context/StudentContext'
 import { useTemplateValue } from '@context/TemplateContext'
@@ -34,15 +32,12 @@ export const PrivateRoute = ({
     // unauthorized, so display message to user that you are unauthorized
     case 'unauthorized':
       return (
-        <Container maxWidth="md">
-          <Typography variant="h5" component="p" align="center" mt={5}>
-            You are not authorized to view this content. Contact an admin if you
-            feel like this is a mistake. Click the button below to log out.
-          </Typography>
-          <Box display="flex" justifyContent="center" margin={4}>
-            <Button onClick={logOut}>Log out</Button>
-          </Box>
-        </Container>
+        <Route
+          {...routeProps}
+          render={() => {
+            return <Redirect to={SURVEY_PATH} />
+          }}
+        />
       )
     // authorized, hooray, you can see the content!
     case 'authorized':

frontend/src/firebase/firebase.js

@@ -17,6 +17,8 @@ export const templatesBucket = getStorage(app, TEMPLATES_BUCKET)
 // function attempting to sign in with Google
 export async function signInWithGoogle() {
   const provider = new GoogleAuthProvider()
+  provider.addScope('email')
+  provider.addScope('profile')
   await signInWithPopup(auth, provider)
 }
 

frontend/src/modules/Core/Constants/Theme.ts

@@ -203,6 +203,10 @@ theme = createTheme(theme, {
             borderColor: theme.palette.common.white,
             backgroundColor: theme.palette.purple[120],
           },
+          '&.Mui-disabled': {
+            color: theme.palette.common.white,
+            backgroundColor: theme.palette.essentials[25],
+          },
         },
         outlinedSecondary: {
           borderColor: theme.palette.purple[100],

frontend/src/modules/Emailing/Components/Emailing.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import axios from 'axios'
 import { getAuth } from 'firebase/auth'
+import { useAuthValue } from '@auth'
 // zing imports
 import { API_ROOT } from '@core'
 import {
@@ -22,9 +23,8 @@ export const Emailing = () => {
   const [sendError, setSendError] = useState(false)
 
   // 1. logged in user info
-  let auth = getAuth()
-  let user = auth.currentUser
-  let email = user?.email
+  const { user } = useAuthValue()
+  let email = user?.providerData[0].email
 
   /* TODO: ask @sean ? or future work
 
@@ -141,7 +141,8 @@ export const sendEmail = async (emailItems: any) => {
   // 1. logged in user info
   let auth = getAuth()
   let user = auth.currentUser
-  let email = user?.email
+  let email = user?.providerData[0].email
+
   // 2. obtaining auth token from local storage
   const msAuthToken = localStorage.getItem('authToken') || ' '
   const {

frontend/src/modules/Home/Components/Home.tsx

@@ -1,10 +1,9 @@
 import { StyledBackground } from 'Home/Styles/Home.style'
 import { Box, Button, Typography } from '@mui/material'
 import matchimg from '@assets/img/matching.svg'
-import { Link } from 'react-router-dom'
-import { SURVEY_PATH } from '@core/Constants'
 
 import { ReactComponent as CornellSeal } from '@assets/img/CornellSealWhite.svg'
+import { signInWithGoogle } from '@fire/firebase'
 
 export const Home = () => {
   return (
@@ -62,15 +61,16 @@ export const Home = () => {
           Create groups.
         </Typography>
         <Button
-          variant="outlined"
-          component={Link}
-          to={SURVEY_PATH}
           color="secondary"
+          variant="outlined"
           sx={{
             width: '14em',
             fontSize: '22px',
             mb: '1.25em',
           }}
+          onClick={() => {
+            signInWithGoogle().catch(() => {})
+          }}
         >
           I'm a Cornell Student
         </Button>

frontend/src/modules/Survey/Components/LoginCheck.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import {
+  Button,
+  Box,
+  TextField,
+  InputLabel,
+  Typography,
+  Link,
+  Avatar,
+} from '@mui/material'
+import { LoginCheckProps } from 'Survey/Types'
+import { useAuthValue } from '@auth'
+import { signInWithGoogle } from '@fire/firebase'
+
+export const LoginCheck = ({ gotoNextStep }: LoginCheckProps) => {
+  const textInputStyle = {
+    input: {
+      color: 'black',
+      fontSize: '16px',
+      fontWeight: '500',
+      width: '16rem',
+    },
+  }
+
+  const { user } = useAuthValue()
+  const userEmail = user?.providerData[0].email
+  const validEmail = /^\[email protected]$/
+  const isValidEmail = validEmail.test(userEmail ?? '')
+
+  return (
+    <Box
+      component="main"
+      sx={{
+        backgroundColor: '#fff',
+        boxShadow:
+          '-10px -10px 150px rgba(0, 0, 0, 0.1), 10px 10px 150px rgba(0, 0, 0, 0.1)',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexFlow: 'column nowrap',
+        width: {
+          xs: '100%',
+          lg: '40%',
+        },
+        height: {
+          xs: '100%',
+          lg: '80%',
+        },
+        margin: {
+          xs: '0%',
+          lg: '28%',
+        },
+      }}
+    >
+      <Typography
+        sx={{
+          color: '#3d2d49',
+          fontSize: '2rem',
+          fontWeight: '500',
+          mb: '6%',
+        }}
+      >
+        Confirm Login
+      </Typography>
+      <Avatar
+        src={user?.photoURL ?? ''}
+        alt="profile"
+        imgProps={{ referrerPolicy: 'no-referrer' }}
+        sx={{ marginBottom: '1.2rem', height: '10rem', width: '10rem' }}
+      />
+      <Typography
+        sx={{
+          color: '#3d2d49',
+          fontSize: '1.2rem',
+          fontWeight: '500',
+          mb: '6%',
+        }}
+      >
+        Welcome, <b>{user?.displayName}</b>
+      </Typography>
+
+      <Box sx={{ textAlign: 'left', mb: '2rem' }}>
+        <InputLabel>
+          <Typography fontWeight="400" color="black">
+            You are signed in as
+          </Typography>
+        </InputLabel>
+        <TextField
+          sx={textInputStyle}
+          type="email"
+          value={userEmail ?? 'No Email Provided'}
+          helperText={!isValidEmail && 'Error: Not a valid cornell.edu email'}
+          error={!isValidEmail}
+          disabled
+        />
+      </Box>
+
+      <Button
+        color="primary"
+        variant="outlined"
+        sx={{
+          width: '8em',
+          fontSize: '16px',
+          mb: '8%',
+        }}
+        disabled={!isValidEmail || !user}
+        onClick={gotoNextStep}
+      >
+        Continue
+      </Button>
+      <Link
+        onClick={() => {
+          signInWithGoogle().catch(() => {})
+        }}
+        sx={{
+          color: 'black',
+          fontSize: '14px',
+          textDecoration: 'none',
+          fontWeight: '500',
+        }}
+      >
+        Not You?
+      </Link>
+    </Box>
+  )
+}