require 2fa code when changing email

Author: kentcdodds

app/root.tsx

@@ -236,7 +236,11 @@ function App() {
 			</div>
 			<Confetti confetti={data.flash?.confetti} />
 			<Toaster />
-			{RemixDevTools && <Suspense><RemixDevTools showRouteBoundaries /></Suspense>}
+			{RemixDevTools && (
+				<Suspense>
+					<RemixDevTools showRouteBoundaries />
+				</Suspense>
+			)}
 		</Document>
 	)
 }

app/routes/resources+/login.tsx

@@ -12,18 +12,27 @@ import { safeRedirect } from 'remix-utils'
 import { z } from 'zod'
 import { CheckboxField, ErrorList, Field } from '~/components/forms.tsx'
 import { StatusButton } from '~/components/ui/status-button.tsx'
-import { authenticator } from '~/utils/auth.server.ts'
+import { authenticator, getUserId } from '~/utils/auth.server.ts'
 import { prisma } from '~/utils/db.server.ts'
 import { redirectWithToast } from '~/utils/flash-session.server.ts'
-import { EnsurePE, ensurePE, getReferrerRoute } from '~/utils/misc.tsx'
+import {
+	EnsurePE,
+	ensurePE,
+	getReferrerRoute,
+	invariant,
+} from '~/utils/misc.tsx'
 import {
 	commitSession,
 	destroySession,
 	getSession,
 } from '~/utils/session.server.ts'
 import { passwordSchema, usernameSchema } from '~/utils/user-validation.ts'
 import { checkboxSchema } from '~/utils/zod-extensions.ts'
-import { isCodeValid } from './verify.tsx'
+import {
+	type VerificationTypes,
+	isCodeValid,
+	type VerifyFunctionArgs,
+} from './verify.tsx'
 
 const ROUTE_PATH = '/resources/login'
 
@@ -51,19 +60,58 @@ const LoginFormSchema = z.object({
 	remember: checkboxSchema(),
 })
 
+const verifiedTimeKey = 'verified-time'
 const unverifiedSessionIdKey = 'unverified-session-id'
 const loginSubmissionKey = 'login-submission'
+const inlineLoginFormId = 'inline-login'
+const inlineTwoFAFormId = 'inline-two-fa'
+const verificationType = '2fa' satisfies VerificationTypes
 
-async function shouldRequestTwoFA(request: Request) {
-	const session = await getSession(request.headers.get('cookie'))
-	return session.has(unverifiedSessionIdKey)
+export async function handleVerification({
+	request,
+	body,
+	submission,
+}: VerifyFunctionArgs) {
+	invariant(submission.value, 'Submission should have a value by this point')
+	const cookieSession = await getSession(request.headers.get('cookie'))
+	const { redirectTo } = submission.value
+	cookieSession.set(verifiedTimeKey, Date.now())
+	const responseInit = {
+		headers: { 'Set-Cookie': await commitSession(cookieSession) },
+	}
+
+	if (redirectTo) {
+		return redirect(safeRedirect(redirectTo), responseInit)
+	} else {
+		ensurePE(body, request, responseInit)
+		return json({ status: 'success', submission } as const, responseInit)
+	}
+}
+
+export async function shouldRequestTwoFA(request: Request) {
+	const cookieSession = await getSession(request.headers.get('cookie'))
+	if (cookieSession.has(unverifiedSessionIdKey)) return true
+	const userId = await getUserId(request)
+	if (!userId) return false
+	// if it's over two hours since they last verified, we should request 2FA again
+	const userHasTwoFA = await prisma.verification.findUnique({
+		select: { id: true },
+		where: { target_type: { target: userId, type: verificationType } },
+	})
+	if (!userHasTwoFA) return false
+	const verifiedTime = cookieSession.get(verifiedTimeKey) ?? new Date(0)
+	const twoHours = 1000 * 60 * 60 * 2
+	return Date.now() - verifiedTime > twoHours
 }
 
 export async function action(args: DataFunctionArgs) {
-	if (await shouldRequestTwoFA(args.request)) {
+	const form = (await args.request.clone().formData()).get('form')
+	if (form === inlineTwoFAFormId) {
 		return inlineTwoFAAction(args)
-	} else {
+	} else if (form === inlineLoginFormId) {
 		return inlineLoginAction(args)
+	} else {
+		throw new Response('Invalid form', { status: 400 })
 	}
 }
 
@@ -134,7 +182,7 @@ async function inlineLoginAction({ request }: DataFunctionArgs) {
 	const { remember, redirectTo, session } = submission.value
 
 	const verification = await prisma.verification.findUnique({
-		where: { target_type: { target: session.userId, type: '2fa' } },
+		where: { target_type: { target: session.userId, type: verificationType } },
 		select: { id: true },
 	})
 	const userHasTwoFactor = Boolean(verification)
@@ -192,7 +240,7 @@ function InlineLoginForm({
 	const loginFetcher = useFetcher<typeof inlineLoginAction>()
 
 	const [form, fields] = useForm({
-		id: 'inline-login',
+		id: inlineLoginFormId,
 		defaultValue: { redirectTo },
 		constraint: getFieldsetConstraint(LoginFormSchema),
 		lastSubmission: loginFetcher.data?.submission ?? submission,
@@ -211,6 +259,7 @@ function InlineLoginForm({
 					name="login"
 					{...form.props}
 				>
+					<input type="hidden" name="form" value={form.id} />
 					<EnsurePE />
 					<Field
 						labelProps={{ children: 'Username' }}
@@ -316,7 +365,7 @@ async function inlineTwoFAAction({ request }: DataFunctionArgs) {
 		schema: TwoFAFormSchema.superRefine(async (data, ctx) => {
 			const codeIsValid = await isCodeValid({
 				code: data.code,
-				type: '2fa',
+				type: verificationType,
 				target: session.userId,
 			})
 			if (!codeIsValid) {
@@ -351,6 +400,7 @@ async function inlineTwoFAAction({ request }: DataFunctionArgs) {
 	}
 
 	const { redirectTo } = submission.value
+	cookieSession.set(verifiedTimeKey, Date.now())
 	cookieSession.unset(unverifiedSessionIdKey)
 	cookieSession.set(authenticator.sessionKey, session.id)
 	const responseInit = {
@@ -377,7 +427,7 @@ function InlineTwoFA({
 	const twoFAFetcher = useFetcher<typeof inlineTwoFAAction>()
 
 	const [form, fields] = useForm({
-		id: 'inline-two-fa',
+		id: inlineTwoFAFormId,
 		defaultValue: { redirectTo },
 		constraint: getFieldsetConstraint(TwoFAFormSchema),
 		lastSubmission: twoFAFetcher.data?.submission ?? submission,
@@ -389,6 +439,7 @@ function InlineTwoFA({
 
 	return (
 		<twoFAFetcher.Form method="POST" action={ROUTE_PATH} {...form.props}>
+			<input type="hidden" name="form" value={form.id} />
 			{/* Putting this at the top so we can have the tab order of cancel first,
 			but have "enter" submit the confirmation. */}
 			<button type="submit" className="hidden" name="intent" value="confirm" />

app/routes/resources+/verify.tsx

@@ -6,12 +6,13 @@ import { z } from 'zod'
 import { ErrorList, Field } from '~/components/forms.tsx'
 import { StatusButton } from '~/components/ui/status-button.tsx'
 import { prisma } from '~/utils/db.server.ts'
-import { getDomainUrl, useIsSubmitting } from '~/utils/misc.tsx'
+import { EnsurePE, getDomainUrl, useIsSubmitting } from '~/utils/misc.tsx'
 import { generateTOTP, verifyTOTP } from '~/utils/totp.server.ts'
 import { handleVerification as handleForgotPasswordVerification } from '../_auth+/forgot-password/index.tsx'
 import { handleVerification as handleOnboardingVerification } from '../_auth+/onboarding.tsx'
 import { handleVerification as handleChangeEmailVerification } from '../settings+/profile.change-email.index/index.tsx'
 import { handleVerification as handleEnableTwoFactorVerification } from '../settings+/profile.two-factor.verify.tsx'
+import { handleVerification as handleReverifyVerification } from './login.tsx'
 
 export const ROUTE_PATH = '/resources/verify'
 
@@ -100,6 +101,7 @@ export type VerifySubmission = Submission<z.infer<typeof VerifySchema>>
 export type VerifyFunctionArgs = {
 	request: Request
 	submission: Submission<z.infer<typeof VerifySchema>>
+	body: FormData | URLSearchParams
 }
 
 export async function isCodeValid({
@@ -181,18 +183,21 @@ export async function validateRequest(
 	switch (submissionValue[typeQueryParam]) {
 		case 'forgot-password': {
 			await deleteVerification()
-			return handleForgotPasswordVerification({ request, submission })
+			return handleForgotPasswordVerification({ request, body, submission })
 		}
 		case 'onboarding': {
 			await deleteVerification()
-			return handleOnboardingVerification({ request, submission })
+			return handleOnboardingVerification({ request, body, submission })
 		}
 		case '2fa-verify': {
-			return handleEnableTwoFactorVerification({ request, submission })
+			return handleEnableTwoFactorVerification({ request, body, submission })
+		}
+		case '2fa': {
+			return handleReverifyVerification({ request, body, submission })
 		}
 		case 'change-email': {
 			await deleteVerification()
-			return await handleChangeEmailVerification({ request, submission })
+			return await handleChangeEmailVerification({ request, body, submission })
 		}
 		default: {
 			submission.error[''] = ['Invalid verification type']
@@ -254,6 +259,7 @@ export function Verify({
 					{...form.props}
 					className="flex-1"
 				>
+					<EnsurePE />
 					<input
 						{...conform.input(fields[typeQueryParam], { type: 'hidden' })}
 					/>

app/routes/settings+/profile.change-email.index/index.tsx

@@ -14,9 +14,12 @@ import { commitSession, getSession } from '~/utils/session.server.ts'
 import { emailSchema } from '~/utils/user-validation.ts'
 import {
 	prepareVerification,
+	Verify,
 	type VerifyFunctionArgs,
 } from '../../resources+/verify.tsx'
 import { EmailChangeEmail, EmailChangeNoticeEmail } from './email.server.tsx'
+import { shouldRequestTwoFA } from '~/routes/resources+/login.tsx'
+import { useUser } from '~/utils/user.ts'
 
 export const newEmailAddressSessionKey = 'new-email-address'
 
@@ -37,10 +40,15 @@ export async function loader({ request }: DataFunctionArgs) {
 			description: 'You must login first to change your email',
 		})
 	}
-	return json({ user })
+	const shouldReverify = await shouldRequestTwoFA(request)
+	return json({ user, shouldReverify })
 }
 
 export async function action({ request }: DataFunctionArgs) {
+	if (await shouldRequestTwoFA(request)) {
+		// looks like they waited too long enter the email
+		return redirect(request.url)
+	}
 	const userId = await requireUserId(request)
 	const formData = await request.formData()
 	const submission = await parse(formData, {
@@ -134,6 +142,7 @@ export async function handleVerification({
 
 export default function ChangeEmailIndex() {
 	const data = useLoaderData<typeof loader>()
+	const user = useUser()
 	const actionData = useActionData<typeof action>()
 
 	const [form, fields] = useForm({
@@ -153,21 +162,30 @@ export default function ChangeEmailIndex() {
 			<p>
 				An email notice will also be sent to your old address {data.user.email}.
 			</p>
-			<Form method="POST" {...form.props}>
-				<Field
-					labelProps={{ children: 'New Email' }}
-					inputProps={conform.input(fields.email)}
-					errors={fields.email.errors}
-				/>
-				<ErrorList id={form.errorId} errors={form.errors} />
-				<div>
-					<StatusButton
-						status={isSubmitting ? 'pending' : actionData?.status ?? 'idle'}
-					>
-						Send Confirmation
-					</StatusButton>
-				</div>
-			</Form>
+			<div className="mx-auto mt-5 max-w-sm">
+				{data.shouldReverify ? (
+					<>
+						<p>Please reverify your account by submitting your 2FA code</p>
+						<Verify target={user.id} type="2fa" />
+					</>
+				) : (
+					<Form method="POST" {...form.props}>
+						<Field
+							labelProps={{ children: 'New Email' }}
+							inputProps={conform.input(fields.email)}
+							errors={fields.email.errors}
+						/>
+						<ErrorList id={form.errorId} errors={form.errors} />
+						<div>
+							<StatusButton
+								status={isSubmitting ? 'pending' : actionData?.status ?? 'idle'}
+							>
+								Send Confirmation
+							</StatusButton>
+						</div>
+					</Form>
+				)}
+			</div>
 		</div>
 	)
 }

tests/e2e/settings-profile.test.ts

@@ -93,7 +93,7 @@ test('Users can change their email address', async ({ page, login }) => {
 	await page.getByRole('link', { name: /change email/i }).click()
 	await page.getByRole('textbox', { name: /new email/i }).fill(newEmailAddress)
 	await page.getByRole('button', { name: /send confirmation/i }).click()
-	// await expect(page.getByText(/check your email/i)).toBeVisible()
+	await expect(page.getByText(/check your email/i)).toBeVisible()
 	const email = await waitFor(() => readEmail(newEmailAddress), {
 		errorMessage: 'Confirmation email was not sent',
 	})