add disable 2fa flow that requires recent verification

Author: kentcdodds

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

@@ -47,7 +47,10 @@ export async function loader({ request }: DataFunctionArgs) {
 export async function action({ request }: DataFunctionArgs) {
 	if (await shouldRequestTwoFA(request)) {
 		// looks like they waited too long enter the email
-		return redirect(request.url)
+		return redirectWithToast(request.url, {
+			title: 'Please Reverify',
+			description: 'Please reverify your account before proceeding',
+		})
 	}
 	const userId = await requireUserId(request)
 	const formData = await request.formData()

app/routes/settings+/profile.two-factor.disable.tsx

@@ -0,0 +1,81 @@
+import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
+import { useFetcher, useLoaderData } from '@remix-run/react'
+import { StatusButton } from '~/components/ui/status-button.tsx'
+import { requireUserId } from '~/utils/auth.server.ts'
+import { prisma } from '~/utils/db.server.ts'
+import { redirectWithToast } from '~/utils/flash-session.server.ts'
+import { useDoubleCheck } from '~/utils/misc.tsx'
+import { useUser } from '~/utils/user.ts'
+import { shouldRequestTwoFA } from '../resources+/login.tsx'
+import { Verify } from '../resources+/verify.tsx'
+import { twoFAVerificationType } from './profile.two-factor.tsx'
+import { Icon } from '~/components/ui/icon.tsx'
+
+export const handle = {
+	breadcrumb: <Icon name="lock-open-1">Disable</Icon>,
+}
+
+export async function loader({ request }: DataFunctionArgs) {
+	const userId = await requireUserId(request)
+	const verification = await prisma.verification.findFirst({
+		where: { type: twoFAVerificationType, target: userId },
+		select: { id: true },
+	})
+	if (!verification) {
+		return redirect('/settings/profile/two-factor')
+	}
+	const shouldReverify = await shouldRequestTwoFA(request)
+	return json({ shouldReverify })
+}
+
+export async function action({ request }: DataFunctionArgs) {
+	if (await shouldRequestTwoFA(request)) {
+		// looks like they waited too long enter the email
+		return redirectWithToast(request.url, {
+			title: 'Please Reverify',
+			description: 'Please reverify your account before proceeding',
+		})
+	}
+	const userId = await requireUserId(request)
+	await prisma.verification.deleteMany({
+		where: { type: twoFAVerificationType, target: userId },
+	})
+	return json({ status: 'success' } as const)
+}
+
+export default function TwoFactorDisableRoute() {
+	const data = useLoaderData<typeof loader>()
+	const user = useUser()
+	const toggle2FAFetcher = useFetcher<typeof action>()
+	const dc = useDoubleCheck()
+
+	return (
+		<div className="mx-auto max-w-sm">
+			{data.shouldReverify ? (
+				<>
+					<p>Please reverify your account by submitting your 2FA code</p>
+					<Verify target={user.id} type="2fa" />
+				</>
+			) : (
+				<toggle2FAFetcher.Form method="POST" preventScrollReset>
+					<p>
+						Disabling two factor authentication is not recommended. However, if
+						you would like to do so, click here:
+					</p>
+					<StatusButton
+						variant="destructive"
+						status={toggle2FAFetcher.state === 'loading' ? 'pending' : 'idle'}
+						{...dc.getButtonProps({
+							className: 'mx-auto',
+							name: 'intent',
+							value: 'disable',
+							type: 'submit',
+						})}
+					>
+						{dc.doubleCheck ? 'Are you sure?' : 'Disable 2FA'}
+					</StatusButton>
+				</toggle2FAFetcher.Form>
+			)}
+		</div>
+	)
+}

app/routes/settings+/profile.two-factor.index.tsx

@@ -1,9 +1,11 @@
 import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
-import { useFetcher, useLoaderData } from '@remix-run/react'
+import { Link, useFetcher, useLoaderData } from '@remix-run/react'
+import { Icon } from '~/components/ui/icon.tsx'
 import { StatusButton } from '~/components/ui/status-button.tsx'
 import { requireUserId } from '~/utils/auth.server.ts'
 import { prisma } from '~/utils/db.server.ts'
 import { generateTOTP } from '~/utils/totp.server.ts'
+import { shouldRequestTwoFA } from '../resources+/login.tsx'
 import { twoFAVerificationType } from './profile.two-factor.tsx'
 import { verificationType as verifyVerificationType } from './profile.two-factor.verify.tsx'
 
@@ -13,63 +15,47 @@ export async function loader({ request }: DataFunctionArgs) {
 		where: { type: twoFAVerificationType, target: userId },
 		select: { id: true },
 	})
-	return json({ is2FAEnabled: Boolean(verification) })
+	const shouldReverify = await shouldRequestTwoFA(request)
+	return json({ is2FAEnabled: Boolean(verification), shouldReverify })
 }
 
 export async function action({ request }: DataFunctionArgs) {
-	const form = await request.formData()
 	const userId = await requireUserId(request)
-	const intent = form.get('intent')
-	switch (intent) {
-		case 'enable': {
-			const { otp: _otp, ...config } = generateTOTP()
-			// delete any existing entries
-			await prisma.verification.deleteMany({
-				where: { type: verifyVerificationType, target: userId },
-			})
-			await prisma.verification.create({
-				data: { ...config, type: verifyVerificationType, target: userId },
-			})
-			return redirect('/settings/profile/two-factor/verify')
-		}
-		case 'disable': {
-			await prisma.verification.deleteMany({
-				where: { type: twoFAVerificationType, target: userId },
-			})
-			break
-		}
-		default: {
-			return json({ status: 'error', message: 'Invalid intent' } as const)
-		}
-	}
-	return json({ status: 'success' } as const)
+	const { otp: _otp, ...config } = generateTOTP()
+	// delete any existing entries
+	await prisma.verification.deleteMany({
+		where: { type: verifyVerificationType, target: userId },
+	})
+	await prisma.verification.create({
+		data: { ...config, type: verifyVerificationType, target: userId },
+	})
+	return redirect('/settings/profile/two-factor/verify')
 }
 
 export default function TwoFactorRoute() {
-	const data = useLoaderData<typeof loader>() || {}
+	const data = useLoaderData<typeof loader>()
 	const toggle2FAFetcher = useFetcher<typeof action>()
 
 	return (
 		<div className="flex flex-col gap-4">
 			{data.is2FAEnabled ? (
 				<>
-					<p className="text-sm">You have enabled two-factor authentication.</p>
-					<toggle2FAFetcher.Form method="POST" preventScrollReset>
-						<StatusButton
-							variant="secondary"
-							type="submit"
-							name="intent"
-							value="disable"
-							status={toggle2FAFetcher.state === 'loading' ? 'pending' : 'idle'}
-							className="mx-auto"
-						>
-							Disable 2FA
-						</StatusButton>
-					</toggle2FAFetcher.Form>
+					<p className="text-lg">
+						<Icon name="check">
+							You have enabled two-factor authentication.
+						</Icon>
+					</p>
+					<Link to="disable">
+						<Icon name="lock-open-1">Disable 2FA</Icon>
+					</Link>
 				</>
 			) : (
 				<>
-					<p>You have not enabled two-factor authentication yet.</p>
+					<p>
+						<Icon name="lock-open-1">
+							You have not enabled two-factor authentication yet.
+						</Icon>
+					</p>
 					<p className="text-sm">
 						Two factor authentication adds an extra layer of security to your
 						account. You will need to enter a code from an authenticator app

tests/e2e/2fa.test.ts

@@ -29,7 +29,7 @@ test('Users can add 2FA to their account and use it when logging in', async ({
 	await main.getByRole('button', { name: /confirm/i }).click()
 
 	await expect(main).toHaveText(/You have enabled two-factor authentication./i)
-	await expect(main.getByRole('button', { name: /disable 2fa/i })).toBeVisible()
+	await expect(main.getByRole('link', { name: /disable 2fa/i })).toBeVisible()
 
 	await page.getByRole('link', { name: user.name ?? user.username }).click()
 	await page.getByRole('menuitem', { name: /logout/i }).click()