Modify website flows for authentication

frontend/src/components/Header/UserInfo.js

@@ -1,9 +1,12 @@
 import React from 'react';
-import authUtils from '../AuthUtils';
+import { useHistory } from 'react-router-dom';
 
-import '../../styles/header.css';
 import Button from 'react-bootstrap/Button';
 
+import authUtils from '../AuthUtils';
+import { LANDING } from '../../constants/routes.js';
+import '../../styles/header.css';
+
 // To set spacing between each element of the component.
 const BOOTSTRAP_SPACING_CLASS =
     'm-3 row justify-content-center align-self-center';
@@ -13,29 +16,37 @@ const BOOTSTRAP_SPACING_CLASS =
  * log in), the user's display name, and a Sign Out button. This component is to
  * be used with the Header component.
  */
-class UserInfo extends React.Component {
-  /** @inheritdoc */
-  render() {
-    return (
-      <div className='d-flex flex-row'>
-        <img
-            className={BOOTSTRAP_SPACING_CLASS}
-            src={authUtils.getCurUserPhotoUrl()}
-            alt='Your Profile'
-        />
-        <p className={BOOTSTRAP_SPACING_CLASS}>
-          {authUtils.getCurUserDisplayName()}
-        </p>
-        <Button
-            className={BOOTSTRAP_SPACING_CLASS}
-            variant='secondary'
-            onClick={authUtils.signOut}
-        >
-          Sign Out
-        </Button>
-      </div>
-    );
+const UserInfo = () => {
+  const history = useHistory();
+
+  /**
+   * Redirects the user to the LANDING page first before actually signing them
+   * out.
+   */
+  function signOutAndRedirectToLanding() {
+    history.push(LANDING);
+    authUtils.signOut();
   }
+
+  return (
+    <div className='d-flex flex-row'>
+      <img
+          className={BOOTSTRAP_SPACING_CLASS}
+          src={authUtils.getCurUserPhotoUrl()}
+          alt='Your Profile'
+      />
+      <p className={BOOTSTRAP_SPACING_CLASS}>
+        {authUtils.getCurUserDisplayName()}
+      </p>
+      <Button
+          className={BOOTSTRAP_SPACING_CLASS}
+          variant='secondary'
+          onClick={signOutAndRedirectToLanding}
+      >
+        Sign Out
+      </Button>
+    </div>
+  );
 }
 
 export default UserInfo;

frontend/src/components/SignIn/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { AuthContext } from '../Auth';
 
 import * as firebase from 'firebase/app';
 import app from '../Firebase';
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
 
-import {VIEW_TRIPS} from '../../constants/routes.js';
+import { VIEW_TRIPS } from '../../constants/routes.js';
 
 // Configure FirebaseUI.
 const uiConfig = {
@@ -34,11 +36,21 @@ function handleAuthError(error) {
 }
 
 /**
- * SignIn component that defines the sign-in page of the application.
+ * SignIn component that defines the sign-in page of the application. If the
+ * the user is already logged in, they will immediately be redirected to the
+ * VIEW_TRIPS page. Otherwise, they be given a number of providers through which
+ * they can sign in.
  */
 class SignIn extends React.Component {
+  static contextType = AuthContext;
+
   /** @inheritdoc */
   render() {
+    // Immediately go to VIEW_TRIPS page if the user is already logged in.
+    if (this.context !== null) {
+      return <Redirect to={VIEW_TRIPS} />;
+    }
+
     return (
       <div>
         <h1>Please sign in:</h1>