{message}
57 |{message}
57 |Enter the code from your app.
12 | 18 | Use recovery code 19 | 20 | {#if data.user.registeredPasskey} 21 | Use passkeys 22 | {/if} 23 | {#if data.user.registeredSecurityKey} 24 | Use security keys 25 | {/if} 26 | -------------------------------------------------------------------------------- /src/routes/2fa/totp/setup/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { createTOTPKeyURI, verifyTOTP } from "@oslojs/otp"; 2 | import { fail, redirect } from "@sveltejs/kit"; 3 | import { decodeBase64, encodeBase64 } from "@oslojs/encoding"; 4 | import { totpUpdateBucket, updateUserTOTPKey } from "$lib/server/totp"; 5 | import { setSessionAs2FAVerified } from "$lib/server/session"; 6 | import { renderSVG } from "uqr"; 7 | import { get2FARedirect } from "$lib/server/2fa"; 8 | 9 | import type { Actions, RequestEvent } from "./$types"; 10 | 11 | export async function load(event: RequestEvent) { 12 | if (event.locals.session === null || event.locals.user === null) { 13 | return redirect(302, "/login"); 14 | } 15 | if (!event.locals.user.emailVerified) { 16 | return redirect(302, "/verify-email"); 17 | } 18 | if (event.locals.user.registered2FA && !event.locals.session.twoFactorVerified) { 19 | return redirect(302, get2FARedirect(event.locals.user)); 20 | } 21 | 22 | const totpKey = new Uint8Array(20); 23 | crypto.getRandomValues(totpKey); 24 | const encodedTOTPKey = encodeBase64(totpKey); 25 | const keyURI = createTOTPKeyURI("Demo", event.locals.user.username, totpKey, 30, 6); 26 | const qrcode = renderSVG(keyURI); 27 | return { 28 | encodedTOTPKey, 29 | qrcode 30 | }; 31 | } 32 | 33 | export const actions: Actions = { 34 | default: action 35 | }; 36 | 37 | async function action(event: RequestEvent) { 38 | if (event.locals.session === null || event.locals.user === null) { 39 | return fail(401, { 40 | message: "Not authenticated" 41 | }); 42 | } 43 | if (!event.locals.user.emailVerified) { 44 | return fail(403, { 45 | message: "Forbidden" 46 | }); 47 | } 48 | if (event.locals.user.registered2FA && !event.locals.session.twoFactorVerified) { 49 | return fail(403, { 50 | message: "Forbidden" 51 | }); 52 | } 53 | if (!totpUpdateBucket.check(event.locals.user.id, 1)) { 54 | return fail(429, { 55 | message: "Too many requests" 56 | }); 57 | } 58 | 59 | const formData = await event.request.formData(); 60 | const encodedKey = formData.get("key"); 61 | const code = formData.get("code"); 62 | if (typeof encodedKey !== "string" || typeof code !== "string") { 63 | return fail(400, { 64 | message: "Invalid or missing fields" 65 | }); 66 | } 67 | if (code === "") { 68 | return fail(400, { 69 | message: "Please enter your code" 70 | }); 71 | } 72 | if (encodedKey.length !== 28) { 73 | return fail(400, { 74 | message: "Please enter your code" 75 | }); 76 | } 77 | let key: Uint8Array; 78 | try { 79 | key = decodeBase64(encodedKey); 80 | } catch { 81 | return fail(400, { 82 | message: "Invalid key" 83 | }); 84 | } 85 | if (key.byteLength !== 20) { 86 | return fail(400, { 87 | message: "Invalid key" 88 | }); 89 | } 90 | if (!totpUpdateBucket.consume(event.locals.user.id, 1)) { 91 | return fail(429, { 92 | message: "Too many requests" 93 | }); 94 | } 95 | if (!verifyTOTP(key, 30, 6, code)) { 96 | return fail(400, { 97 | message: "Invalid code" 98 | }); 99 | } 100 | updateUserTOTPKey(event.locals.session.userId, key); 101 | setSessionAs2FAVerified(event.locals.session.id); 102 | if (!event.locals.user.registered2FA) { 103 | return redirect(302, "/recovery-code"); 104 | } 105 | return redirect(302, "/"); 106 | } 107 | -------------------------------------------------------------------------------- /src/routes/2fa/totp/setup/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |{passkeyErrorMessage}
68 |Your recovery code is: {data.recoveryCode}
9 |You can use this recovery code if you lose access to your second factors.
10 | Next 11 | -------------------------------------------------------------------------------- /src/routes/reset-password/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { 2 | deletePasswordResetSessionTokenCookie, 3 | invalidateUserPasswordResetSessions, 4 | validatePasswordResetSessionRequest 5 | } from "$lib/server/password-reset"; 6 | import { fail, redirect } from "@sveltejs/kit"; 7 | import { verifyPasswordStrength } from "$lib/server/password"; 8 | import { 9 | createSession, 10 | generateSessionToken, 11 | invalidateUserSessions, 12 | setSessionTokenCookie 13 | } from "$lib/server/session"; 14 | import { updateUserPassword } from "$lib/server/user"; 15 | import { getPasswordReset2FARedirect } from "$lib/server/2fa"; 16 | 17 | import type { Actions, RequestEvent } from "./$types"; 18 | import type { SessionFlags } from "$lib/server/session"; 19 | 20 | export async function load(event: RequestEvent) { 21 | const { session, user } = validatePasswordResetSessionRequest(event); 22 | if (session === null) { 23 | return redirect(302, "/forgot-password"); 24 | } 25 | if (!session.emailVerified) { 26 | return redirect(302, "/reset-password/verify-email"); 27 | } 28 | if (user.registered2FA && !session.twoFactorVerified) { 29 | return redirect(302, getPasswordReset2FARedirect(user)); 30 | } 31 | return {}; 32 | } 33 | 34 | export const actions: Actions = { 35 | default: action 36 | }; 37 | 38 | async function action(event: RequestEvent) { 39 | const { session: passwordResetSession, user } = validatePasswordResetSessionRequest(event); 40 | if (passwordResetSession === null) { 41 | return fail(401, { 42 | message: "Not authenticated" 43 | }); 44 | } 45 | if (!passwordResetSession.emailVerified) { 46 | return fail(403, { 47 | message: "Forbidden" 48 | }); 49 | } 50 | if (user.registered2FA && !passwordResetSession.twoFactorVerified) { 51 | return fail(403, { 52 | message: "Forbidden" 53 | }); 54 | } 55 | const formData = await event.request.formData(); 56 | const password = formData.get("password"); 57 | if (typeof password !== "string") { 58 | return fail(400, { 59 | message: "Invalid or missing fields" 60 | }); 61 | } 62 | 63 | const strongPassword = await verifyPasswordStrength(password); 64 | if (!strongPassword) { 65 | return fail(400, { 66 | message: "Weak password" 67 | }); 68 | } 69 | invalidateUserPasswordResetSessions(passwordResetSession.userId); 70 | invalidateUserSessions(passwordResetSession.userId); 71 | await updateUserPassword(passwordResetSession.userId, password); 72 | 73 | const sessionFlags: SessionFlags = { 74 | twoFactorVerified: passwordResetSession.twoFactorVerified 75 | }; 76 | const sessionToken = generateSessionToken(); 77 | const session = createSession(sessionToken, user.id, sessionFlags); 78 | setSessionTokenCookie(event, sessionToken, session.expiresAt); 79 | deletePasswordResetSessionTokenCookie(event); 80 | return redirect(302, "/"); 81 | } 82 | -------------------------------------------------------------------------------- /src/routes/reset-password/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |{message}
57 |{message}
57 |Enter the code from your app.
12 | 18 | Use recovery code 19 | {#if data.user.registeredSecurityKey} 20 | Use security keys 21 | {/if} 22 | {#if data.user.registeredPasskey} 23 | Use passkeys 24 | {/if} 25 | -------------------------------------------------------------------------------- /src/routes/reset-password/verify-email/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { 2 | validatePasswordResetSessionRequest, 3 | setPasswordResetSessionAsEmailVerified 4 | } from "$lib/server/password-reset"; 5 | import { ExpiringTokenBucket } from "$lib/server/rate-limit"; 6 | import { setUserAsEmailVerifiedIfEmailMatches } from "$lib/server/user"; 7 | import { fail, redirect } from "@sveltejs/kit"; 8 | 9 | import type { Actions, RequestEvent } from "./$types"; 10 | import { getPasswordReset2FARedirect } from "$lib/server/2fa"; 11 | 12 | const bucket = new ExpiringTokenBucketWe sent an 8-digit code to {data.email}.
12 | 18 | -------------------------------------------------------------------------------- /src/routes/settings/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { 2 | createEmailVerificationRequest, 3 | sendVerificationEmail, 4 | sendVerificationEmailBucket, 5 | setEmailVerificationRequestCookie 6 | } from "$lib/server/email-verification"; 7 | import { fail, redirect } from "@sveltejs/kit"; 8 | import { checkEmailAvailability, verifyEmailInput } from "$lib/server/email"; 9 | import { verifyPasswordHash, verifyPasswordStrength } from "$lib/server/password"; 10 | import { getUserPasswordHash, getUserRecoverCode, resetUserRecoveryCode, updateUserPassword } from "$lib/server/user"; 11 | import { 12 | createSession, 13 | generateSessionToken, 14 | invalidateUserSessions, 15 | setSessionTokenCookie 16 | } from "$lib/server/session"; 17 | import { 18 | deleteUserPasskeyCredential, 19 | deleteUserSecurityKeyCredential, 20 | getUserPasskeyCredentials, 21 | getUserSecurityKeyCredentials 22 | } from "$lib/server/webauthn"; 23 | import { decodeBase64 } from "@oslojs/encoding"; 24 | import { get2FARedirect } from "$lib/server/2fa"; 25 | import { deleteUserTOTPKey, totpUpdateBucket } from "$lib/server/totp"; 26 | import { ExpiringTokenBucket } from "$lib/server/rate-limit"; 27 | 28 | import type { Actions, RequestEvent } from "./$types"; 29 | import type { SessionFlags } from "$lib/server/session"; 30 | 31 | const passwordUpdateBucket = new ExpiringTokenBucketYour email: {data.user.email}
20 | 26 |Passkeys are WebAuthn credentials that validate your identity using your device.
58 |{credential.name}
62 | 66 |Security keys are WebAuthn credentials that can only be used for two-factor authentication.
74 |{credential.name}
78 | 82 |Your recovery code is: {data.recoveryCode}}
91 | 94 |Your username must be at least 3 characters long and your password must be at least 8 characters long.
11 | 35 | Sign in 36 | -------------------------------------------------------------------------------- /src/routes/verify-email/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { fail, redirect } from "@sveltejs/kit"; 2 | import { 3 | createEmailVerificationRequest, 4 | deleteEmailVerificationRequestCookie, 5 | deleteUserEmailVerificationRequest, 6 | getUserEmailVerificationRequestFromRequest, 7 | sendVerificationEmail, 8 | sendVerificationEmailBucket, 9 | setEmailVerificationRequestCookie 10 | } from "$lib/server/email-verification"; 11 | import { invalidateUserPasswordResetSessions } from "$lib/server/password-reset"; 12 | import { updateUserEmailAndSetEmailAsVerified } from "$lib/server/user"; 13 | import { ExpiringTokenBucket } from "$lib/server/rate-limit"; 14 | 15 | import type { Actions, RequestEvent } from "./$types"; 16 | 17 | export async function load(event: RequestEvent) { 18 | if (event.locals.user === null) { 19 | return redirect(302, "/login"); 20 | } 21 | let verificationRequest = getUserEmailVerificationRequestFromRequest(event); 22 | if (verificationRequest === null || Date.now() >= verificationRequest.expiresAt.getTime()) { 23 | if (event.locals.user.emailVerified) { 24 | return redirect(302, "/"); 25 | } 26 | // Note: We don't need rate limiting since it takes time before requests expire 27 | verificationRequest = createEmailVerificationRequest(event.locals.user.id, event.locals.user.email); 28 | sendVerificationEmail(verificationRequest.email, verificationRequest.code); 29 | setEmailVerificationRequestCookie(event, verificationRequest); 30 | } 31 | return { 32 | email: verificationRequest.email 33 | }; 34 | } 35 | 36 | const bucket = new ExpiringTokenBucketWe sent an 8-digit code to {data.email}.
12 | 18 | 22 | Change your email 23 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucia-auth/example-sveltekit-email-password-webauthn/c3811a6728b860091c49b6c3d0cfda9f86454225/static/favicon.png -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from "@sveltejs/adapter-auto"; 2 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter() 15 | } 16 | }; 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler" 13 | } 14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 15 | // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files 16 | // 17 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 18 | // from the referenced tsconfig.json - TypeScript does not merge them in 19 | } 20 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | import { defineConfig } from "vite"; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()] 6 | }); 7 | --------------------------------------------------------------------------------