Refactor NextAuth to not redirect during log in process

uwblueprint · Jun 18, 2021 · 55c0d2c · 55c0d2c
1 parent 36806a8
commit 55c0d2c
Showing 1 changed file with 83 additions and 32 deletions.
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -1,45 +1,64 @@
 import { useState, SyntheticEvent } from 'react'; // React
 import { GetServerSideProps } from 'next'; // Get server side props
 import Image from 'next/image';
-import { getSession, signIn } from 'next-auth/client'; // Session management
+import { getSession, signIn, SignInResponse } from 'next-auth/client'; // Session management
 import {
   Text,
+  Link,
   FormControl,
   FormLabel,
+  FormErrorMessage,
   Input,
   Button,
   Container,
   Box,
   Center,
   Flex,
   VStack,
+  useToast,
 } from '@chakra-ui/react'; // Chakra UI
 
 import useLocalStorage from '@tools/hooks/useLocalStorage'; // Local storage
 
 export default function Login() {
   const [email, setEmail] = useState(''); // Email input
+  const [emailInputError, setEmailInputError] = useState(''); // Error message displayed under input
 
   // Store email in local storage
   const [, setLocalStorageEmail] = useLocalStorage('rcd-email-redirect', '');
 
   // Loading state for log in button
   const [isSigningIn, setIsSigningIn] = useState(false);
+  // NextAuth signIn() resolved promise
+  const [authState, setAuthState] = useState<SignInResponse>();
 
   /**
    * Process login using email input
    */
-  const signInWithEmail = () => {
+  const signInWithEmail = async () => {
     setIsSigningIn(true);
     setLocalStorageEmail(email);
-    signIn('email', { email });
+    const signInResponse = await signIn('email', { email, redirect: false });
+    // Store NextAuth promise response
+    setAuthState(signInResponse);
+    setIsSigningIn(false);
+
+    if (signInResponse?.error) {
+      setEmailInputError('This email has not been registered by the admin.');
+    }
   };
 
   const handleSubmit = (event: SyntheticEvent) => {
     event.preventDefault();
-    signInWithEmail();
+    if (email.length) {
+      signInWithEmail();
+    } else {
+      setEmailInputError('Please enter an email address.');
+    }
   };
 
+  const resendEmailToast = useToast();
+
   return (
     <Center minHeight="100vh" bg="background.grey">
       <Box
@@ -56,37 +75,69 @@ export default function Login() {
             <Flex direction="column" style={{ gap: '10px' }}>
               <Image src="/assets/rcd_logo.svg" height={120} width={120} />
               <Text as="h1" textStyle="display-medium" align="center">
-                Richmond Centre for Disability <br />
-                Employee Login
+                Richmond Centre for Disability Employee Login
               </Text>
             </Flex>
 
-            <form onSubmit={handleSubmit} style={{ width: '100%' }}>
-              <FormControl>
-                <FormLabel>Email</FormLabel>
-                <Input
-                  type="email"
-                  isDisabled={isSigningIn}
-                  value={email}
-                  onChange={event => setEmail(event.target.value)}
-                  height="51px"
-                />
-              </FormControl>
-              <Button
-                onClick={signInWithEmail}
-                isLoading={isSigningIn}
-                loadingText="Continue with Email"
-                width="100%"
-                height="46px"
-                marginTop="7.5%"
-              >
-                <Text textStyle="button-semibold">Continue with Email</Text>
-              </Button>
-            </form>
-
-            <Text as="p" textStyle="body-regular">
-              <b>Don&apos;t have an account?</b> Please contact your administrator for access.
-            </Text>
+            {/* If NextAuth's callback doesn't contain a URL, auth (sending email) wasn't successful. */}
+            {!authState?.url ? (
+              <>
+                <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+                  <FormControl isInvalid={!!emailInputError}>
+                    <FormLabel>Email</FormLabel>
+                    <Input
+                      height="51px"
+                      type="email"
+                      value={email}
+                      onChange={event => setEmail(event.target.value)}
+                      isDisabled={isSigningIn}
+                    />
+                    <FormErrorMessage>
+                      <Text as="span" textStyle="body-regular">
+                        {emailInputError}
+                      </Text>
+                    </FormErrorMessage>
+                  </FormControl>
+                  <Button
+                    onClick={handleSubmit}
+                    isLoading={isSigningIn}
+                    loadingText="Continue with Email"
+                    width="100%"
+                    height="46px"
+                    marginTop="7.5%"
+                  >
+                    <Text textStyle="button-semibold">Continue with Email</Text>
+                  </Button>
+                </form>
+                <Text as="p" textStyle="body-regular">
+                  <b>Don&apos;t have an account?</b> Please contact your administrator for access.
+                </Text>
+              </>
+            ) : (
+              <>
+                <Text as="p" textStyle="body-regular" align="center">
+                  We just sent an email to {email}. <br />
+                  There should be a link in your inbox to log in.
+                </Text>
+                <Text as="p" textStyle="body-regular">
+                  <b>Didn&apos;t get an email?</b> Check your spam or trash folder or{' '}
+                  <Link
+                    onClick={() => {
+                      signIn('email', { email, redirect: false });
+                      resendEmailToast({
+                        status: 'success',
+                        title: 'Log In Email Resent',
+                        description: 'We just sent another email to your inbox.',
+                        variant: 'solid',
+                      });
+                    }}
+                    color="primary"
+                  >
+                    click here to resend an email.
+                  </Link>
+                </Text>
+              </>
+            )}
           </VStack>
         </Container>
       </Box>