fixes the login loading issue

frontend/src/Pages/Auth/index.js

@@ -3,6 +3,10 @@ import { useMutation } from '@apollo/client'
 
 import gql from 'graphql-tag.macro'
 
+// This import loads the firebase namespace along with all its type information.
+import firebase from 'firebase/app'
+import 'firebase/auth'
+
 import { Navigate } from 'react-router-dom'
 import { SmallLoadingPage } from './../../components/LoadingComponents'
 const AUTHENTICATE_USER = gql`
@@ -29,6 +33,7 @@ const lstorage = localStorage
 function Auth () {
   const idToken = lstorage.getItem('token')
 
+
   // Run query against backend to authenticate user
   const [
     authenticateUser,

frontend/src/Pages/Login/index.js

@@ -1,4 +1,5 @@
 import logo from './HedwigLogoFinal_02.svg'
+import { useState } from 'react'
 import { MainDiv, ElemDiv, Logo, Title, LoginButton } from './Login.styles'
 
 // import './Transitions.css';
@@ -15,24 +16,16 @@ function Login () {
   /* Lets user sign in in a pop-up tab, get the user's info then generates a token. */
   const signInSAML = () => {
     firebase.auth().signInWithRedirect(provider)
+    navigate('/loadingAuth')
   }
 
-  firebase
-    .auth()
-    .getRedirectResult()
-    .then(result => result.user.getIdTokenResult(true))
-    .then(idTokenResult => {
-      localStorage.setItem('token', idTokenResult.token)
-      navigate('/auth')
-    })
-    .catch(error => console.log(error))
 
   return (
     <MainDiv>
       <ElemDiv>
         <Logo src={logo} />
         <Title>hedwig</Title>
-        <LoginButton onClick={signInSAML}>Login with NetID</LoginButton>
+          <LoginButton onClick={signInSAML}>Login with NetID</LoginButton> 
       </ElemDiv>
     </MainDiv>
   )

frontend/src/Pages/Login/loadingAuth.js

@@ -0,0 +1,26 @@
+// This import loads the firebase namespace along with all its type information.
+import firebase from 'firebase/app'
+import 'firebase/auth'
+// import './Transitions.css';
+import { useNavigate } from 'react-router-dom'
+import { LoadingPage } from '../../components/LoadingComponents'
+
+function LoadingAuth() {
+    const navigate = useNavigate()
+
+    firebase
+    .auth()
+    .getRedirectResult()
+    .then(result => result.user.getIdTokenResult(true))
+    .then(idTokenResult => {
+        localStorage.setItem('token', idTokenResult.token)
+        navigate('/auth')
+    })
+    .catch(error => console.log(error))
+
+    return (
+        <LoadingPage />
+    )
+}
+
+export default LoadingAuth;

frontend/src/components/Routes.js

@@ -34,6 +34,8 @@ import { SmallLoadingPage } from './LoadingComponents'
 import Launch from './../Pages/User/Launch'
 import Onboard from './../Pages/Onboard/Onboard'
 import ReturnOnboard from './../Pages/Onboard/ReturnOnboard'
+import LoadingAuth from './../Pages/Login/loadingAuth'
+
 /**
  * Requests to verify the user's token on the backend
  */
@@ -175,6 +177,10 @@ export const RoutesComponent = () => {
       path: '/login',
       element: <Login />
     },
+    {
+      path: '/loadingAuth',
+      element: <PrivateRoute element={<LoadingAuth />} />
+    },
     {
       path: '/auth',
       element: <Auth />