improve security of magic links further and improve the UX for the wh…

…ole thing

app/__test_routes__/login.tsx

@@ -40,7 +40,7 @@ export const loader: LoaderFunction = async ({request}) => {
   return redirect(
     getMagicLink({
       emailAddress: email,
-      validateEmail: false,
+      validateSessionMagicLink: false,
       domainUrl: getDomainUrl(request),
     }),
   )

app/components/form-elements.tsx

@@ -18,7 +18,10 @@ type InputProps =
   | ({type: 'textarea'} & JSX.IntrinsicElements['textarea'])
   | JSX.IntrinsicElements['input']
 
-function Input(props: InputProps) {
+const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
+  props,
+  ref,
+) {
   const className = clsx(
     'placeholder-gray-500 dark:disabled:text-blueGray-500 focus-ring px-11 py-8 w-full text-black disabled:text-gray-400 dark:text-white text-lg font-medium bg-gray-100 dark:bg-gray-800 rounded-lg',
     props.className,
@@ -37,9 +40,10 @@ function Input(props: InputProps) {
     <input
       {...(props as JSX.IntrinsicElements['input'])}
       className={className}
+      ref={ref}
     />
   )
-}
+})
 
 interface InputErrorProps {
   id: string
@@ -58,23 +62,20 @@ function InputError({children, id}: InputErrorProps) {
   )
 }
 
-function Field({
-  defaultValue,
-  error,
-  name,
-  label,
-  className,
-  description,
-  id,
-  ...props
-}: {
-  defaultValue?: string | null
-  name: string
-  label: string
-  className?: string
-  error?: string | null
-  description?: React.ReactNode
-} & InputProps) {
+const Field = React.forwardRef<
+  HTMLInputElement,
+  {
+    defaultValue?: string | null
+    name: string
+    label: string
+    className?: string
+    error?: string | null
+    description?: React.ReactNode
+  } & InputProps
+>(function Field(
+  {defaultValue, error, name, label, className, description, id, ...props},
+  ref,
+) {
   const prefix = useId()
   const inputId = id ?? `${prefix}-${name}`
   const errorId = `${inputId}-error`
@@ -94,6 +95,8 @@ function Field({
       </div>
 
       <Input
+        // @ts-expect-error no idea 🤷‍♂️
+        ref={ref}
         {...(props as InputProps)}
         name={name}
         id={inputId}
@@ -106,7 +109,7 @@ function Field({
       />
     </div>
   )
-}
+})
 
 function ButtonGroup({
   children,

app/components/navbar.tsx

@@ -249,13 +249,13 @@ function ProfileButton({
   imageAlt,
   team,
   user,
-  hasActiveMagicLink,
+  magicLinkVerified,
 }: {
   imageUrl: string
   imageAlt: string
   team: OptionalTeam
   user: User | null
-  hasActiveMagicLink: boolean
+  magicLinkVerified: boolean | undefined
 }) {
   const controls = useAnimation()
   const [ref, state] = useElementState()
@@ -283,9 +283,9 @@ function ProfileButton({
   return (
     <Link
       prefetch="intent"
-      to={user ? '/me' : hasActiveMagicLink ? '/signup' : '/login'}
+      to={user ? '/me' : magicLinkVerified ? '/signup' : '/login'}
       aria-label={
-        user ? 'My Account' : hasActiveMagicLink ? 'Finish signing up' : 'Login'
+        user ? 'My Account' : magicLinkVerified ? 'Finish signing up' : 'Login'
       }
       className={clsx(
         'inline-flex items-center justify-center ml-4 w-14 h-14 rounded-full focus:outline-none',
@@ -309,7 +309,7 @@ function Navbar() {
   const {requestInfo, userInfo, user} = useRootData()
   const avatar = userInfo
     ? userInfo.avatar
-    : requestInfo.session.email && requestInfo.session.hasActiveMagicLink
+    : requestInfo.session.email
     ? {
         src: getAvatar(requestInfo.session.email, {
           fallback: kodyProfiles[team].src,
@@ -348,7 +348,7 @@ function Navbar() {
           </div>
 
           <ProfileButton
-            hasActiveMagicLink={requestInfo.session.hasActiveMagicLink}
+            magicLinkVerified={requestInfo.session.magicLinkVerified}
             imageUrl={avatar.src}
             imageAlt={avatar.alt}
             team={team}

app/root.tsx

@@ -35,7 +35,6 @@ import {getUserInfo} from './utils/user-info.server'
 import {getClientSession} from './utils/client.server'
 import type {Timings} from './utils/metrics.server'
 import {time, getServerTimeHeader} from './utils/metrics.server'
-import {validateMagicLink} from './utils/prisma.server'
 import {useScrollRestoration} from './utils/scroll'
 import {Navbar} from './components/navbar'
 import {Spacer} from './components/spacer'
@@ -126,7 +125,7 @@ export type LoaderData = {
     path: string
     session: {
       email: string | undefined
-      hasActiveMagicLink: boolean
+      magicLinkVerified: boolean | undefined
       theme: Theme | null
     }
   }
@@ -152,16 +151,6 @@ export const loader: LoaderFunction = async ({request}) => {
     fn: () => session.getUser(),
   })
 
-  const magicLink = loginInfoSession.getMagicLink()
-  let hasActiveMagicLink = false
-  if (typeof magicLink === 'string') {
-    try {
-      await validateMagicLink(magicLink, loginInfoSession.getEmail())
-      hasActiveMagicLink = true
-    } catch {
-      loginInfoSession.unsetMagicLink()
-    }
-  }
   const randomFooterImageKeys = Object.keys(illustrationImages)
   const randomFooterImageKey = randomFooterImageKeys[
     Math.floor(Math.random() * randomFooterImageKeys.length)
@@ -183,7 +172,7 @@ export const loader: LoaderFunction = async ({request}) => {
       path: new URL(request.url).pathname,
       session: {
         email: loginInfoSession.getEmail(),
-        hasActiveMagicLink,
+        magicLinkVerified: loginInfoSession.getMagicLinkVerified(),
         theme: themeSession.getTheme(),
       },
     },

app/routes/index.tsx

@@ -92,14 +92,14 @@ export default function IndexRoute() {
         arrowUrl="#intro"
         arrowLabel="Learn more about Kent"
         action={
-          <>
+          <div className="flex flex-col gap-4 mr-auto">
             <ButtonLink to="/blog" variant="primary" prefetch="intent">
               Read the blog
             </ButtonLink>
             <ButtonLink to="/courses" variant="secondary" prefetch="intent">
               Take a course
             </ButtonLink>
-          </>
+          </div>
         }
       />
 

app/routes/login.tsx

@@ -102,7 +102,8 @@ export const action: ActionFunction = async ({request}) => {
 
   try {
     const domainUrl = getDomainUrl(request)
-    await sendToken({emailAddress, domainUrl})
+    const magicLink = await sendToken({emailAddress, domainUrl})
+    loginSession.setMagicLink(magicLink)
     return redirect(`/login`, {
       headers: await loginSession.getHeaders(),
     })
@@ -117,6 +118,7 @@ export const action: ActionFunction = async ({request}) => {
 
 function Login() {
   const data = useLoaderData<LoaderData>()
+  const inputRef = React.useRef<HTMLInputElement>(null)
   const [submitted, setSubmitted] = React.useState(false)
 
   const [formValues, setFormValues] = React.useState({
@@ -150,6 +152,7 @@ function Login() {
                 </div>
 
                 <Input
+                  ref={inputRef}
                   autoFocus
                   aria-describedby={
                     data.error ? 'error-message' : 'success-message'
@@ -173,6 +176,7 @@ function Login() {
                   onClick={() => {
                     setFormValues({email: ''})
                     setSubmitted(false)
+                    inputRef.current?.focus()
                   }}
                 >
                   Reset

app/routes/magic.tsx

@@ -13,6 +13,7 @@ export const loader: LoaderFunction = async ({request}) => {
   const loginInfoSession = await getLoginInfoSession(request)
   try {
     const session = await getUserSessionFromMagicLink(request)
+    loginInfoSession.setMagicLinkVerified(true)
     if (session) {
       const headers = new Headers()
       loginInfoSession.clean()

app/routes/me.tsx

@@ -81,7 +81,7 @@ export const loader: LoaderFunction = async ({request}) => {
   const qrLoginCode = await getQrCodeDataURL(
     getMagicLink({
       emailAddress: user.email,
-      validateEmail: false,
+      validateSessionMagicLink: false,
       domainUrl: getDomainUrl(request),
     }),
   )

app/routes/signup.tsx

@@ -7,7 +7,7 @@ import type {KCDHandle, Team} from '~/types'
 import {useTeam} from '~/utils/team-provider'
 import {getSession, getUser} from '~/utils/session.server'
 import {getLoginInfoSession} from '~/utils/login.server'
-import {prismaWrite, validateMagicLink} from '~/utils/prisma.server'
+import {prismaWrite, prismaRead, validateMagicLink} from '~/utils/prisma.server'
 import {getErrorStack, teams} from '~/utils/misc'
 import {tagKCDSiteSubscriber} from '../convertkit/convertkit.server'
 import {Grid} from '~/components/grid'
@@ -80,7 +80,7 @@ export const action: ActionFunction = async ({request}) => {
       throw new Error('email and magicLink required.')
     }
 
-    email = await validateMagicLink(magicLink, loginInfoSession.getEmail())
+    email = await validateMagicLink(magicLink, loginInfoSession.getMagicLink())
   } catch (error: unknown) {
     console.error(getErrorStack(error))
 
@@ -140,8 +140,25 @@ export const loader: LoaderFunction = async ({request}) => {
   if (user) return redirect('/me')
 
   const loginInfoSession = await getLoginInfoSession(request)
+  const magicLink = loginInfoSession.getMagicLink()
   const email = loginInfoSession.getEmail()
-  if (!email) {
+  if (!magicLink || !email) {
+    loginInfoSession.clean()
+    loginInfoSession.flashError('Invalid magic link. Try again.')
+    return redirect('/login', {
+      headers: await loginInfoSession.getHeaders(),
+    })
+  }
+
+  const userForMagicLink = await prismaRead.user.findFirst({
+    where: {email},
+    select: {id: true},
+  })
+
+  if (userForMagicLink) {
+    // user exists, but they haven't clicked their magic link yet
+    // we don't want to tell them that a user exists with that email though
+    // so we'll invalidate the magic link and force them to try again.
     loginInfoSession.clean()
     loginInfoSession.flashError('Invalid magic link. Try again.')
     return redirect('/login', {

app/utils/login.server.ts

@@ -29,12 +29,18 @@ async function getLoginInfoSession(request: Request) {
     getMagicLink: () => session.get('magicLink') as string | undefined,
     setMagicLink: (magicLink: string) => session.set('magicLink', magicLink),
     unsetMagicLink: () => session.unset('magicLink'),
+    getMagicLinkVerified: () =>
+      session.get('magicLinkVerified') as boolean | undefined,
+    setMagicLinkVerified: (verified: boolean) =>
+      session.set('magicLinkVerified', verified),
+    unsetMagicLinkVerified: () => session.unset('magicLinkVerified'),
     getError: () => session.get('error') as string | undefined,
     flashError: (error: string) => session.flash('error', error),
     clean: () => {
       session.unset('email')
       session.unset('magicLink')
       session.unset('error')
+      session.unset('magicLinkVerified')
     },
     destroy: () => loginInfoStorage.destroySession(session),
     commit,

app/utils/prisma.server.ts

@@ -114,21 +114,21 @@ const magicLinkSearchParam = 'kodyKey'
 type MagicLinkPayload = {
   emailAddress: string
   creationDate: string
-  validateEmail: boolean
+  validateSessionMagicLink: boolean
 }
 
 function getMagicLink({
   emailAddress,
-  validateEmail,
+  validateSessionMagicLink,
   domainUrl,
 }: {
   emailAddress: string
-  validateEmail: boolean
+  validateSessionMagicLink: boolean
   domainUrl: string
 }) {
   const payload: MagicLinkPayload = {
     emailAddress,
-    validateEmail,
+    validateSessionMagicLink,
     creationDate: new Date().toISOString(),
   }
   const stringToEncrypt = JSON.stringify(payload)
@@ -139,17 +139,16 @@ function getMagicLink({
   return url.toString()
 }
 
-async function validateMagicLink(link: string, sessionEmailAddress?: string) {
-  let emailAddress, linkCreationDateString, validateEmail
+async function validateMagicLink(link: string, sessionMagicLink?: string) {
+  let emailAddress, linkCreationDateString, validateSessionMagicLink
   try {
     const url = new URL(link)
     const encryptedString = url.searchParams.get(magicLinkSearchParam) ?? '[]'
     const decryptedString = decrypt(encryptedString)
     const payload = JSON.parse(decryptedString) as MagicLinkPayload
-    console.log({payload, sessionEmailAddress})
     emailAddress = payload.emailAddress
     linkCreationDateString = payload.creationDate
-    validateEmail = payload.validateEmail
+    validateSessionMagicLink = payload.validateSessionMagicLink
   } catch (error: unknown) {
     console.error(error)
     throw new Error('Sign in link invalid. Please request a new one.')
@@ -160,10 +159,8 @@ async function validateMagicLink(link: string, sessionEmailAddress?: string) {
     throw new Error('Sign in link invalid. Please request a new one.')
   }
 
-  if (validateEmail && emailAddress !== sessionEmailAddress) {
-    console.error(
-      `magic link payload email address does not match sessionEmailAddress`,
-    )
+  if (validateSessionMagicLink && link !== sessionMagicLink) {
+    console.error(`Magic link does not match sessionMagicLink`)
     throw new Error(
       `You must open the magic link on the same device it was created from for security reasons. Please request a new link.`,
     )