🚸 Improve magic link sign in experience

New email and sign in feedback

apps/builder/src/features/auth/components/SignInForm.tsx

@@ -6,7 +6,10 @@ import {
   HStack,
   Text,
   Spinner,
-  Tooltip,
+  Alert,
+  Flex,
+  AlertIcon,
+  SlideFade,
 } from '@chakra-ui/react'
 import React, { ChangeEvent, FormEvent, useEffect } from 'react'
 import { useState } from 'react'
@@ -78,11 +81,6 @@ export const SignInForm = ({
       })
     } else {
       setIsMagicLinkSent(true)
-      showToast({
-        status: 'success',
-        title: 'Success!',
-        description: 'Check your inbox to sign in',
-      })
     }
     setAuthLoading(false)
   }
@@ -103,40 +101,54 @@ export const SignInForm = ({
     )
   return (
     <Stack spacing="4" w="330px">
-      <SocialLoginButtons providers={providers} />
-      {providers?.email && (
+      {!isMagicLinkSent && (
         <>
-          <DividerWithText mt="6">Or with your email</DividerWithText>
-          <HStack as="form" onSubmit={handleEmailSubmit}>
-            <Input
-              name="email"
-              type="email"
-              autoComplete="email"
-              placeholder="email@company.com"
-              required
-              value={emailValue}
-              onChange={handleEmailChange}
-            />
-            <Tooltip
-              label="A sign in email was sent. Make sure to check your SPAM folder."
-              isDisabled={!isMagicLinkSent}
-            >
-              <Button
-                type="submit"
-                isLoading={
-                  ['loading', 'authenticated'].includes(status) || authLoading
-                }
-                isDisabled={isMagicLinkSent}
-              >
-                Submit
-              </Button>
-            </Tooltip>
-          </HStack>
+          <SocialLoginButtons providers={providers} />
+          {providers?.email && (
+            <>
+              <DividerWithText mt="6">Or with your email</DividerWithText>
+              <HStack as="form" onSubmit={handleEmailSubmit}>
+                <Input
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  placeholder="email@company.com"
+                  required
+                  value={emailValue}
+                  onChange={handleEmailChange}
+                />
+                <Button
+                  type="submit"
+                  isLoading={
+                    ['loading', 'authenticated'].includes(status) || authLoading
+                  }
+                  isDisabled={isMagicLinkSent}
+                >
+                  Submit
+                </Button>
+              </HStack>
+            </>
+          )}
         </>
       )}
       {router.query.error && (
         <SignInError error={router.query.error.toString()} />
       )}
+      <SlideFade offsetY="20px" in={isMagicLinkSent} unmountOnExit>
+        <Flex>
+          <Alert status="success" w="100%">
+            <HStack>
+              <AlertIcon />
+              <Stack spacing={1}>
+                <Text fontWeight="semibold">
+                  A magic link email was sent. 🪄
+                </Text>
+                <Text fontSize="sm">Make sure to check your SPAM folder.</Text>
+              </Stack>
+            </HStack>
+          </Alert>
+        </Flex>
+      </SlideFade>
     </Stack>
   )
 }

apps/builder/src/pages/api/auth/[...nextauth].ts

@@ -13,6 +13,7 @@ import { User } from 'db'
 import { env, getAtPath, isDefined, isNotEmpty } from 'utils'
 import { mockedUser } from '@/features/auth'
 import { getNewUserInvitations } from '@/features/auth/api'
+import { sendVerificationRequest } from './sendVerificationRequest'
 
 const providers: Provider[] = []
 
@@ -42,6 +43,7 @@ if (isNotEmpty(env('SMTP_FROM')) && process.env.SMTP_AUTH_DISABLED !== 'true')
         },
       },
       from: env('SMTP_FROM'),
+      sendVerificationRequest,
     })
   )
 

apps/builder/src/pages/api/auth/sendVerificationRequest.ts

@@ -0,0 +1,16 @@
+import { EmailConfig } from 'next-auth/providers/email'
+import { sendMagicLinkEmail } from 'emails'
+
+type Props = {
+  identifier: string
+  url: string
+  provider: Partial<Omit<EmailConfig, 'options'>>
+}
+
+export const sendVerificationRequest = async ({ identifier, url }: Props) => {
+  try {
+    await sendMagicLinkEmail({ url, to: identifier })
+  } catch (err) {
+    throw new Error(`Email(s) could not be sent`)
+  }
+}