made requested chages

1. Reduced the core logic by extracting it in custom function in auth.server.ts
2. added timeout to the request to skip the check if request takes more than 1s
3. skips the check if request fails
4. added msw mock so that we don't depend upon it in development and testing

Author: AdityaKirad

app/routes/_auth+/onboarding.tsx

@@ -1,4 +1,3 @@
-import crypto from 'node:crypto'
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { data, redirect, Form, useSearchParams } from 'react-router'
@@ -8,7 +7,12 @@ import { z } from 'zod'
 import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
-import { requireAnonymous, sessionKey, signup } from '#app/utils/auth.server.ts'
+import {
+	checkCommonPassword,
+	requireAnonymous,
+	sessionKey,
+	signup,
+} from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
@@ -73,21 +77,8 @@ export async function action({ request }: Route.ActionArgs) {
 					})
 					return
 				}
-				const hash = crypto
-					.createHash('sha1')
-					.update(data.password, 'utf8')
-					.digest('hex')
-					.toUpperCase()
-				const [prefix, suffix] = [hash.slice(0, 5), hash.slice(5)]
-				const res = await fetch(
-					`https://api.pwnedpasswords.com/range/${prefix}`,
-				)
-				if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`)
-				const text = await res.text()
-				const matches = text
-					.split('/\r?\n/')
-					.filter((line) => line.includes(suffix))
-				if (matches.length) {
+				const isCommonPassword = await checkCommonPassword(data.password)
+				if (isCommonPassword) {
 					ctx.addIssue({
 						path: ['password'],
 						code: 'custom',

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

@@ -1,12 +1,15 @@
-import crypto from 'node:crypto'
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import { data, redirect, Form } from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
-import { requireAnonymous, resetUserPassword } from '#app/utils/auth.server.ts'
+import {
+	checkCommonPassword,
+	requireAnonymous,
+	resetUserPassword,
+} from '#app/utils/auth.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { PasswordAndConfirmPasswordSchema } from '#app/utils/user-validation.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
@@ -44,19 +47,8 @@ export async function action({ request }: Route.ActionArgs) {
 	const formData = await request.formData()
 	const submission = await parseWithZod(formData, {
 		schema: ResetPasswordSchema.superRefine(async ({ password }, ctx) => {
-			const hash = crypto
-				.createHash('sha1')
-				.update(password, 'utf8')
-				.digest('hex')
-				.toUpperCase()
-			const [prefix, suffix] = [hash.slice(0, 5), hash.slice(5)]
-			const res = await fetch(`https://api.pwnedpasswords.com/range/${prefix}`)
-			if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`)
-			const data = await res.text()
-			const matches = data
-				.split('/\r?\n/')
-				.filter((line) => line.includes(suffix))
-			if (matches.length) {
+			const isCommonPassword = await checkCommonPassword(password)
+			if (isCommonPassword) {
 				ctx.addIssue({
 					path: ['password'],
 					code: 'custom',

app/utils/auth.server.ts

@@ -1,3 +1,4 @@
+import crypto from 'node:crypto'
 import { type Connection, type Password, type User } from '@prisma/client'
 import bcrypt from 'bcryptjs'
 import { redirect } from 'react-router'
@@ -255,3 +256,33 @@ export async function verifyUserPassword(
 
 	return { id: userWithPassword.id }
 }
+
+export async function checkCommonPassword(password: string) {
+	const hash = crypto
+		.createHash('sha1')
+		.update(password, 'utf8')
+		.digest('hex')
+		.toUpperCase()
+
+	const [prefix, suffix] = [hash.slice(0, 5), hash.slice(5)]
+
+	const controller = new AbortController()
+
+	try {
+		const timeoutId = setTimeout(() => controller.abort(), 1000)
+
+		const res = await fetch(`https://api.pwnedpasswords.com/range/${prefix}`)
+
+		clearTimeout(timeoutId)
+
+		if (!res.ok) false
+
+		const data = await res.text()
+		return data.split('/\r?\n/').some((line) => line.includes(suffix))
+	} catch (error) {
+		if (error instanceof DOMException && error.name === 'AbortError') {
+			console.warn('Password check timed out')
+		}
+		return false
+	}
+}

tests/mocks/common-password.ts

@@ -0,0 +1,8 @@
+import { http, HttpResponse } from 'msw'
+
+export const pwnedPasswordApiHandler = http.get(
+	'https://api.pwnedpasswords.com/range/:prefix',
+	() => {
+		return new HttpResponse('', { status: 200 })
+	},
+)

tests/mocks/index.ts

@@ -1,5 +1,6 @@
 import closeWithGrace from 'close-with-grace'
 import { setupServer } from 'msw/node'
+import { pwnedPasswordApiHandler } from './common-password.ts'
 import { handlers as githubHandlers } from './github.ts'
 import { handlers as resendHandlers } from './resend.ts'
 import { handlers as tigrisHandlers } from './tigris.ts'
@@ -8,6 +9,7 @@ export const server = setupServer(
 	...resendHandlers,
 	...githubHandlers,
 	...tigrisHandlers,
+	pwnedPasswordApiHandler,
 )
 
 server.listen({