add email change and adjust how verification works a bit

Author: kentcdodds

.vscode/settings.json

@@ -4,7 +4,9 @@
     "@remix-run/router",
     "express",
     "@radix-ui/**",
-    "react-router"
+    "react-router",
+    "stream/consumers",
+    "node:stream/consumers"
   ],
   "tailwindCSS.experimental.classRegex": [["cn\\(([^)]*)\\)"]]
 }

app/root.tsx

@@ -50,7 +50,7 @@ import { useToast } from './utils/useToast.tsx'
 import { useOptionalUser, useUser } from './utils/user.ts'
 import rdtStylesheetUrl from 'remix-development-tools/stylesheet.css'
 const RemixDevTools =
-	process.env.NODE_ENV === 'development'
+	process.env.NODE_ENV === 'development' && false
 		? lazy(() => import('remix-development-tools'))
 		: undefined
 

app/routes/_auth+/forgot-password/index.tsx

@@ -12,13 +12,17 @@ import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
 import { ErrorList, Field } from '~/components/forms.tsx'
 import { StatusButton } from '~/components/ui/status-button.tsx'
 import {
+	type VerifyFunctionArgs,
 	getRedirectToUrl,
 	prepareVerification,
 } from '~/routes/resources+/verify.tsx'
 import { prisma } from '~/utils/db.server.ts'
 import { sendEmail } from '~/utils/email.server.ts'
 import { emailSchema, usernameSchema } from '~/utils/user-validation.ts'
 import { ForgotPasswordEmail } from './email.server.tsx'
+import { invariant, invariantResponse } from '~/utils/misc.ts'
+import { commitSession, getSession } from '~/utils/session.server.ts'
+import { resetPasswordUsernameSessionKey } from '../reset-password.tsx'
 
 const ForgotPasswordSchema = z.object({
 	usernameOrEmail: z.union([emailSchema, usernameSchema]),
@@ -28,20 +32,20 @@ export async function action({ request }: DataFunctionArgs) {
 	const formData = await request.formData()
 	const submission = await parse(formData, {
 		schema: ForgotPasswordSchema.superRefine(async (data, ctx) => {
-			if (data.usernameOrEmail.includes('@')) return
-
-			// check the username exists. Usernames have to be unique anyway so anyone
-			// signing up can check whether a username exists by trying to sign up
-			// with it.
-			const user = await prisma.user.findUnique({
-				where: { username: data.usernameOrEmail },
+			const user = await prisma.user.findFirst({
+				where: {
+					OR: [
+						{ email: data.usernameOrEmail },
+						{ username: data.usernameOrEmail },
+					],
+				},
 				select: { id: true },
 			})
 			if (!user) {
 				ctx.addIssue({
 					path: ['usernameOrEmail'],
 					code: z.ZodIssueCode.custom,
-					message: 'No user exists with this username',
+					message: 'No user exists with this username or email',
 				})
 				return
 			}
@@ -62,42 +66,54 @@ export async function action({ request }: DataFunctionArgs) {
 		target: usernameOrEmail,
 	})
 
-	// fire, forget, and don't wait to combat timing attacks
-	void sendVerifyEmail({ request, target: usernameOrEmail })
-
-	return redirect(redirectTo.toString())
-}
-
-async function sendVerifyEmail({
-	request,
-	target,
-}: {
-	request: Request
-	target: string
-}) {
 	const user = await prisma.user.findFirst({
-		where: { OR: [{ email: target }, { username: target }] },
+		where: { OR: [{ email: usernameOrEmail }, { username: usernameOrEmail }] },
 		select: { email: true, username: true },
 	})
-	if (!user) {
-		// maybe they're trying to see whether a user exists? We're not gonna tell them...
-		return
-	}
+	invariantResponse(user, 'User should exist')
 
 	const { verifyUrl, otp } = await prepareVerification({
 		period: 10 * 60,
 		request,
 		type: 'forgot-password',
-		target,
+		target: usernameOrEmail,
 	})
 
-	await sendEmail({
+	const response = await sendEmail({
 		to: user.email,
 		subject: `Epic Notes Password Reset`,
 		react: (
 			<ForgotPasswordEmail onboardingUrl={verifyUrl.toString()} otp={otp} />
 		),
 	})
+
+	if (response.status === 'success') {
+		return redirect(redirectTo.toString())
+	} else {
+		submission.error[''] = response.error.message
+		return json({ status: 'error', submission } as const, { status: 500 })
+	}
+}
+
+export async function handleVerification({
+	request,
+	submission,
+}: VerifyFunctionArgs) {
+	invariant(submission.value, 'submission.value should be defined by now')
+	const target = submission.value.target
+	const user = await prisma.user.findFirst({
+		where: { OR: [{ email: target }, { username: target }] },
+		select: { email: true, username: true },
+	})
+	// we don't want to say the user is not found if the email is not found
+	// because that would allow an attacker to check if an email is registered
+	invariantResponse(user, 'Invalid code')
+
+	const session = await getSession(request.headers.get('cookie'))
+	session.set(resetPasswordUsernameSessionKey, user.username)
+	return redirect('/reset-password', {
+		headers: { 'Set-Cookie': await commitSession(session) },
+	})
 }
 
 export const meta: V2_MetaFunction = () => {

app/routes/_auth+/onboarding.tsx

@@ -29,6 +29,8 @@ import {
 import { checkboxSchema } from '~/utils/zod-extensions.ts'
 import { redirectWithConfetti } from '~/utils/flash-session.server.ts'
 import { prisma } from '~/utils/db.server.ts'
+import { invariant } from '~/utils/misc.ts'
+import { type VerifyFunctionArgs } from '../resources+/verify.tsx'
 
 export const onboardingEmailSessionKey = 'onboardingEmail'
 
@@ -125,6 +127,18 @@ export async function action({ request }: DataFunctionArgs) {
 	})
 }
 
+export async function handleVerification({
+	request,
+	submission,
+}: VerifyFunctionArgs) {
+	invariant(submission.value, 'submission.value should be defined by now')
+	const session = await getSession(request.headers.get('cookie'))
+	session.set(onboardingEmailSessionKey, submission.value.target)
+	return redirect('/onboarding', {
+		headers: { 'Set-Cookie': await commitSession(session) },
+	})
+}
+
 export const meta: V2_MetaFunction = () => {
 	return [{ title: 'Setup Epic Notes Account' }]
 }

app/routes/_auth+/reset-password.tsx

@@ -118,6 +118,7 @@ export default function ResetPasswordPage() {
 					inputProps={{
 						...conform.input(fields.password, { type: 'password' }),
 						autoComplete: 'new-password',
+						autoFocus: true,
 					}}
 					errors={fields.password.errors}
 				/>

app/routes/_auth+/verify.tsx

@@ -1,6 +1,10 @@
 import { json, type DataFunctionArgs } from '@remix-run/node'
 import { useLoaderData, useSearchParams } from '@remix-run/react'
-import { Verify, codeQueryParam, validate } from '../resources+/verify.tsx'
+import {
+	Verify,
+	codeQueryParam,
+	validateRequest,
+} from '../resources+/verify.tsx'
 import { Spacer } from '~/components/spacer.tsx'
 
 export async function loader({ request }: DataFunctionArgs) {
@@ -17,7 +21,7 @@ export async function loader({ request }: DataFunctionArgs) {
 			},
 		} as const)
 	}
-	return validate(request, params)
+	return validateRequest(request, params)
 }
 
 export default function VerifyRoute() {