02/02: fix svg import build error

Author: kettanaito

exercises/02.authentication/02.solution.2fa/README.mdx

@@ -1,4 +1 @@
-# Two-factor authentication
-
-- How to test authentication flows that require Two-Factor Authentication (i.e. OTP).
-- Comes _after_ authentication personas because this is essentially testing a persona-dependent behavior (a user _who has 2FA enabled_ is able to log in into the app).
+# Passkeys

exercises/02.authentication/02.solution.2fa/app/routes/_auth+/auth.$provider.callback.test.ts

@@ -9,7 +9,7 @@ import { GITHUB_PROVIDER_NAME } from '#app/utils/connections.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { authSessionStorage } from '#app/utils/session.server.ts'
 import { generateTOTP } from '#app/utils/totp.server.ts'
-import { createUser } from '#tests/db-utils.ts'
+import { generateUserInfo } from '#tests/db-utils.ts'
 import { insertGitHubUser, deleteGitHubUsers } from '#tests/mocks/github.ts'
 import { server } from '#tests/mocks/index.ts'
 import { consoleError } from '#tests/setup/setup-test-env.ts'
@@ -109,7 +109,7 @@ test(`when a user is logged in and has already connected, it doesn't do anything
 test('when a user exists with the same email, create connection and make session', async () => {
 	const githubUser = await insertGitHubUser()
 	const email = githubUser.primaryEmail.toLowerCase()
-	const { userId } = await setupUser({ ...createUser(), email })
+	const { userId } = await setupUser({ ...generateUserInfo(), email })
 	const request = await setupRequest({ code: githubUser.code })
 	const response = await loader({ request, params: PARAMS, context: {} })
 
@@ -141,7 +141,7 @@ test('gives an error if the account is already connected to another user', async
 	const githubUser = await insertGitHubUser()
 	await prisma.user.create({
 		data: {
-			...createUser(),
+			...generateUserInfo(),
 			connections: {
 				create: {
 					providerName: GITHUB_PROVIDER_NAME,
@@ -245,7 +245,7 @@ async function setupRequest({
 	return request
 }
 
-async function setupUser(userData = createUser()) {
+async function setupUser(userData = generateUserInfo()) {
 	const session = await prisma.session.create({
 		data: {
 			expirationDate: getSessionExpirationDate(),

exercises/02.authentication/02.solution.2fa/app/routes/users+/$username.test.tsx

@@ -10,7 +10,7 @@ import { loader as rootLoader } from '#app/root.tsx'
 import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { authSessionStorage } from '#app/utils/session.server.ts'
-import { createUser, getUserImages } from '#tests/db-utils.ts'
+import { generateUserInfo, getUserImages } from '#tests/db-utils.ts'
 import { default as UsernameRoute, loader } from './$username.tsx'
 
 test('The user profile when not logged in as self', async () => {
@@ -19,7 +19,7 @@ test('The user profile when not logged in as self', async () => {
 		userImages[faker.number.int({ min: 0, max: userImages.length - 1 })]
 	const user = await prisma.user.create({
 		select: { id: true, username: true, name: true },
-		data: { ...createUser(), image: { create: userImage } },
+		data: { ...generateUserInfo(), image: { create: userImage } },
 	})
 	const App = createRoutesStub([
 		{
@@ -44,7 +44,7 @@ test('The user profile when logged in as self', async () => {
 		userImages[faker.number.int({ min: 0, max: userImages.length - 1 })]
 	const user = await prisma.user.create({
 		select: { id: true, username: true, name: true },
-		data: { ...createUser(), image: { create: userImage } },
+		data: { ...generateUserInfo(), image: { create: userImage } },
 	})
 	const session = await prisma.session.create({
 		select: { id: true },

exercises/02.authentication/02.solution.2fa/package.json

@@ -145,12 +145,13 @@
     "jsdom": "^25.0.1",
     "msw": "^2.7.6",
     "npm-run-all": "^4.1.5",
-    "playwright-persona": "^0.2.6",
+    "playwright-persona": "^0.2.5",
     "prettier": "^3.5.3",
     "prettier-plugin-sql": "^0.19.0",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "react-router-devtools": "^5.0.5",
     "remix-flat-routes": "^0.8.5",
+    "test-passkey": "^1.0.1",
     "tsx": "^4.19.4",
     "tw-animate-css": "^1.2.9",
     "typescript": "^5.8.3",

exercises/02.authentication/02.solution.2fa/prisma/seed.ts

@@ -3,7 +3,7 @@ import { prisma } from '#app/utils/db.server.ts'
 import { MOCK_CODE_GITHUB } from '#app/utils/providers/constants'
 import {
 	createPassword,
-	createUser,
+	generateUserInfo,
 	getNoteImages,
 	getUserImages,
 } from '#tests/db-utils.ts'
@@ -19,7 +19,7 @@ async function seed() {
 	const userImages = await getUserImages()
 
 	for (let index = 0; index < totalUsers; index++) {
-		const userData = createUser()
+		const userData = generateUserInfo()
 		const user = await prisma.user.create({
 			select: { id: true },
 			data: {

exercises/02.authentication/02.solution.2fa/tests/db-utils.ts

@@ -2,7 +2,6 @@ import { type generateTOTP } from '@epic-web/totp'
 import { faker } from '@faker-js/faker'
 import bcrypt from 'bcryptjs'
 import { UniqueEnforcer } from 'enforce-unique'
-import { twoFAVerifyVerificationType } from '#app/routes/settings+/profile.two-factor.verify.tsx'
 import { getPasswordHash } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 
@@ -59,10 +58,11 @@ export async function createVerification(input: {
 	totp: Awaited<ReturnType<typeof generateTOTP>>
 	userId: string
 }) {
+	const { otp, ...totp } = input.totp
 	const verification = await prisma.verification.create({
 		data: {
-			...input.totp,
-			type: twoFAVerifyVerificationType,
+			...totp,
+			type: '2fa-verify',
 			target: input.userId,
 		},
 	})

exercises/02.authentication/02.solution.2fa/tests/e2e/authentication-2fa.test.ts

@@ -2,7 +2,7 @@ import { generateTOTP } from '@epic-web/totp'
 import { createUser, createVerification } from '#tests/db-utils.ts'
 import { test, expect } from '#tests/test-extend.ts'
 
-test('authenticates using two-factor authentication (setup)', async ({
+test('authenticates using two-factor authentication', async ({
 	navigate,
 	page,
 }) => {

exercises/02.authentication/02.solution.2fa/tests/test-extend.ts

@@ -5,8 +5,9 @@ import {
 	type AuthenticateFunction,
 } from 'playwright-persona'
 import { href, type Register } from 'react-router'
+import { getPasswordHash } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
-import { createUser } from '#tests/db-utils'
+import { generateUserInfo } from '#tests/db-utils'
 
 interface Fixtures {
 	navigate: <T extends keyof Register['pages']>(
@@ -17,11 +18,17 @@ interface Fixtures {
 
 const user = definePersona('user', {
 	async createSession({ page }) {
-		const user = await createUser()
+		const user = await prisma.user.create({
+			data: {
+				...generateUserInfo(),
+				roles: { connect: { name: 'user' } },
+				password: { create: { hash: await getPasswordHash('supersecret') } },
+			},
+		})
 
 		await page.goto('/login')
 		await page.getByLabel('Username').fill(user.username)
-		await page.getByLabel('Password').fill(user.password)
+		await page.getByLabel('Password').fill('supersecret')
 		await page.getByRole('button', { name: 'Log in' }).click()
 		await page.getByText(user.name!).waitFor({ state: 'visible' })