maxibase 1.4.0 → 1.6.0

package/README.md

@@ -25,6 +25,18 @@ The tenant defaults to `organizations`: any work or school account, no personal
 `/auth/microsoft` signs in with the Microsoft account already signed in, link to
 `/auth/microsoft?prompt=select_account` to let the user pick another one.
 
+### Resetting a user's second factor
+
+A user who lost their passkeys, authenticator app and recovery codes has no way back in. Remove
+their factors in the database, they sign in with their password or an email code and, under
+`NUXT_FORCE_MFA`, are asked to set up a new one:
+
+```sql
+UPDATE auth.users SET totp = NULL WHERE email = 'user@example.com';
+DELETE FROM auth.credentials WHERE user_id = (SELECT id FROM auth.users WHERE email = 'user@example.com');
+DELETE FROM auth.recovery_codes WHERE user_id = (SELECT id FROM auth.users WHERE email = 'user@example.com');
+```
+
 ## Deployment
 
 ### On your server

package/layers/base/app/components/AuthCheck.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { WebAuthnAbortService } from '@simplewebauthn/browser'
+
 const emits = defineEmits(['authenticated', 'cancel'])
 const appStore = useAppStore()
 const { $t } = useI18n()
@@ -9,6 +11,8 @@ const email = ref('')
 const password = ref('')
 const otpRequested = ref(false)
 const totp = ref('')
+const recoveryCode = ref('')
+const useRecoveryCode = ref(false)
 const optionsFetched = ref(false)
 const showPassword = ref(false)
 const options = ref({
@@ -65,22 +69,20 @@ async function signInWithOtp() {
   }
 }
 
+function firstFactor(): { otp: string } | { password: string } {
+  if (password.value.length === 6 || password.value === route.query.token) {
+    return { otp: password.value }
+  }
+  return { password: password.value }
+}
+
 async function signInWithTOTP() {
   if (!email.value || !totp.value || !password.value) return
   isLoading.value = true
   try {
-    const body: {
-      email: string
-      token: string
-      otp?: string
-      password?: string
-    } = { email: email.value, token: totp.value }
-    if (password.value.length === 6 || password.value === route.query.token) {
-      body.otp = password.value
-    } else body.password = password.value
     await $fetch('/api/auth/totp/verify', {
       method: 'POST',
-      body,
+      body: { email: email.value, token: totp.value, ...firstFactor() },
     })
     await refreshSession()
     totp.value = ''
@@ -91,6 +93,28 @@ async function signInWithTOTP() {
   }
 }
 
+async function signInWithRecoveryCode() {
+  if (!email.value || !recoveryCode.value || !password.value) return
+  isLoading.value = true
+  try {
+    await $fetch('/api/auth/recovery/verify', {
+      method: 'POST',
+      body: {
+        email: email.value,
+        code: recoveryCode.value,
+        locale: useI18n().$getLocale(),
+        ...firstFactor(),
+      },
+    })
+    await refreshSession()
+    recoveryCode.value = ''
+  } catch (e: any) {
+    handleError(e)
+  } finally {
+    isLoading.value = false
+  }
+}
+
 async function signInWithPassword() {
   if (!email.value || !password.value) return
   isLoading.value = true
@@ -127,23 +151,30 @@ function signIn() {
     if (!email.value || isLoading.value) return
     // paste and change bypass the browser's check, which only guards the submit
     if (!signInForm.value?.reportValidity()) return
-    if (totp.value) signInWithTOTP()
+    if (useRecoveryCode.value) signInWithRecoveryCode()
+    else if (totp.value) signInWithTOTP()
     else if (password.value.length === 6) signInWithOtp()
     else signInWithPassword()
   }, 100)
 }
 
-const { authenticate } = useWebAuthn({
+const webAuthnEndpoints = {
   registerEndpoint: '/api/auth/webauthn/register',
   authenticateEndpoint: '/api/auth/webauthn/authenticate',
+}
+const { authenticate } = useWebAuthn(webAuthnEndpoints)
+const { authenticate: authenticateWithAutofill, isAutofillSupported } = useWebAuthn({
+  ...webAuthnEndpoints,
+  useBrowserAutofill: true,
 })
 
-async function signInWithPasskey() {
+async function signInWithPasskey(userName?: string, autofill = false) {
   try {
-    await authenticate(email.value)
+    await (autofill ? authenticateWithAutofill() : authenticate(userName))
     await refreshSession()
   } catch (e: any) {
-    if (!e.message.startsWith('The operation either timed out')) {
+    // any other passkey prompt aborts the pending autofill request
+    if (e.name !== 'AbortError' && !e.message.startsWith('The operation either timed out')) {
       handleError(e)
     }
   }
@@ -160,7 +191,7 @@ async function getSignInOptions(email: string) {
       password.value = route.query.token as string
       if (!options.value.hasTOTP) await signInWithOtp()
     } else if (options.value.hasPasskey) {
-      await signInWithPasskey()
+      await signInWithPasskey(email)
     } else if (!options.value.hasPassword) {
       await requestOtp()
     }
@@ -172,7 +203,7 @@ async function getSignInOptions(email: string) {
   }
 }
 
-const pasteFields = { password, totp }
+const pasteFields = { password, totp, recoveryCode }
 
 async function pasteTo(field: keyof typeof pasteFields) {
   try {
@@ -187,8 +218,12 @@ onMounted(async () => {
   email.value = user.value?.email || (route.query.email as string) || ''
   if (email.value) {
     await getSignInOptions(email.value)
+  } else if (await isAutofillSupported()) {
+    signInWithPasskey(undefined, true)
   }
 })
+
+onBeforeUnmount(() => WebAuthnAbortService.cancelCeremony())
 </script>
 
 <template>
@@ -248,7 +283,32 @@ onMounted(async () => {
             </button>
           </div>
         </div>
-        <div v-if="options.hasTOTP">
+        <div v-if="useRecoveryCode">
+          <label for="recovery-code">{{ $t('authCheck.recoveryCode') }}</label>
+          <div class="group flex-row">
+            <input
+              id="recovery-code"
+              v-model.trim="recoveryCode"
+              type="text"
+              :disabled="isLoading || !password"
+              autocomplete="off"
+              autocapitalize="none"
+              pattern="[0-9a-fA-F]{5}-?[0-9a-fA-F]{5}"
+              required
+              @paste="signIn"
+            />
+            <button
+              type="button"
+              class="flex-center fg"
+              :title="$t('paste') as string"
+              :disabled="isLoading || !password"
+              @click="pasteTo('recoveryCode')"
+            >
+              <Icon name="lucide:clipboard-paste" />
+            </button>
+          </div>
+        </div>
+        <div v-else-if="options.hasTOTP">
           <label for="totp">{{ $t('authCheck.authenticatorCode') }}</label>
           <div class="group flex-row">
             <input
@@ -276,7 +336,11 @@ onMounted(async () => {
         </div>
         <button
           type="submit"
-          :disabled="isLoading || (!password && !otpRequested) || (options.hasTOTP && !totp)"
+          :disabled="
+            isLoading ||
+            (!password && !otpRequested) ||
+            (useRecoveryCode ? !recoveryCode : options.hasTOTP && !totp)
+          "
           :class="['w mt1', isLoading ? 'spin' : '']"
         >
           {{ $t('authCheck.signin') }}
@@ -285,9 +349,10 @@ onMounted(async () => {
           v-if="options.hasPasskey"
           type="button"
           :disabled="isLoading"
-          class="flex-center g1 w mt1 bg bg-border"
-          @click="signInWithPasskey"
+          class="flex-center g2 w mt1 bg bg-border"
+          @click="signInWithPasskey(email)"
         >
+          <Icon name="lucide:key-round" />
           {{ $t('authCheck.passkey') }}
         </button>
         <button
@@ -299,6 +364,16 @@ onMounted(async () => {
         >
           {{ $t('authCheck.getCode') }}
         </button>
+        <button
+          v-if="options.hasTOTP || options.hasPasskey"
+          type="button"
+          class="w"
+          style="background: none; border: none; color: inherit"
+          :disabled="isLoading"
+          @click="useRecoveryCode = !useRecoveryCode"
+        >
+          {{ useRecoveryCode ? $t('cancel') : $t('authCheck.useRecoveryCode') }}
+        </button>
         <p
           v-if="otpRequested"
           class="text-center"
@@ -319,7 +394,7 @@ onMounted(async () => {
             type="email"
             required
             :disabled="isLoading"
-            autocomplete="username"
+            autocomplete="username webauthn"
           />
         </label>
         <button
@@ -329,10 +404,22 @@ onMounted(async () => {
           {{ $t('continue') }}
         </button>
       </form>
-      <slot
+      <div
         v-if="!optionsFetched"
-        name="footer"
-      ></slot>
+        class="flex-column"
+      >
+        <span class="text-center muted-text my1">{{ $t('or') }}</span>
+        <button
+          type="button"
+          class="provider flex-center g2 w mb1 fg b"
+          style="font-weight: normal"
+          @click="signInWithPasskey()"
+        >
+          <Icon name="lucide:key-round" />
+          {{ $t('authCheck.passkey') }}
+        </button>
+        <slot name="footer"></slot>
+      </div>
       <button
         v-if="appStore.authPromise"
         type="button"
@@ -352,4 +439,18 @@ onMounted(async () => {
   box-sizing: border-box;
   width: min(400px, 100vw - (var(--g-padding-l) + var(--g-padding-r)) * var(--g-padding-ratio2));
 }
+
+.provider,
+:slotted(.provider) {
+  height: 40px;
+  border-radius: var(--g-border-radius);
+  font-size: 14px;
+  color: inherit;
+}
+
+.provider > :is(img, .iconify),
+:slotted(.provider) > :is(img, .iconify) {
+  width: 20px;
+  height: 20px;
+}
 </style>

package/layers/base/app/pages/signin.vue

@@ -71,7 +71,6 @@ async function signInAnonymously() {
         v-if="config.public.oauth.microsoft || config.public.anonymousSignup"
         class="flex-column"
       >
-        <span class="text-center muted-text my1">{{ $t('or') }}</span>
         <a
           v-if="config.public.oauth.microsoft"
           href="/auth/microsoft"
@@ -80,8 +79,6 @@ async function signInAnonymously() {
           <img
             src="/images/auth/microsoft.svg"
             alt=""
-            width="21"
-            height="21"
           />
           {{ $t('signinWith') }} Microsoft
         </a>
@@ -111,11 +108,4 @@ async function signInAnonymously() {
   box-shadow: inset 0 0 40vh var(--g-fg);
   height: 100dvh;
 }
-
-.provider {
-  height: 40px;
-  border-radius: var(--g-border-radius);
-  font-size: 14px;
-  color: inherit;
-}
 </style>

package/layers/base/app/pages/user/auth.vue

@@ -12,6 +12,7 @@ type AuthInfo = {
   credentials: { id: string; name: string }[]
   hasPassword: boolean
   hasTOTP: boolean
+  recoveryCodes: number
   forceMfa: boolean
 }
 
@@ -19,8 +20,10 @@ const auth = ref<AuthInfo>({
   credentials: [],
   hasPassword: false,
   hasTOTP: false,
+  recoveryCodes: 0,
   forceMfa: false,
 })
+const recoveryCodes = ref<string[]>([])
 const TOTPSecret = ref('')
 const TOTPCode = ref('')
 const password1 = ref('')
@@ -54,6 +57,7 @@ const canRemovePasskey = computed(
   () => !auth.value?.forceMfa || auth.value.hasTOTP || auth.value.credentials.length > 1,
 )
 const canDisableTOTP = computed(() => !auth.value?.forceMfa || auth.value.credentials.length > 0)
+const hasSecondFactor = computed(() => auth.value.hasTOTP || auth.value.credentials.length > 0)
 
 async function getAuth() {
   try {
@@ -70,9 +74,11 @@ const { register } = useWebAuthn({
 async function registerPasskey() {
   try {
     if (!(await checkAuth())) return
+    const isFirstFactor = !hasSecondFactor.value
     await register({ userName: user.value!.email! })
     await getAuth()
     appStore.notify('saved', 'success')
+    if (isFirstFactor) await offerRecoveryCodes()
     if (isMfaSetup.value) {
       await fetchUserSession()
       if (!user.value?.requiresMfaSetup) await navigateTo('/', { replace: true })
@@ -189,6 +195,7 @@ async function confirmTOTP() {
   if (TOTPCode.value.length !== 6) return
   try {
     if (!(await checkAuth())) return
+    const isFirstFactor = !hasSecondFactor.value
     await $fetch('/api/auth/totp/confirm', {
       method: 'POST',
       body: { secret: TOTPSecret.value, token: TOTPCode.value },
@@ -197,6 +204,7 @@ async function confirmTOTP() {
     TOTPCode.value = ''
     auth.value.hasTOTP = true
     showTOTP.value = false
+    if (isFirstFactor) await offerRecoveryCodes()
     if (isMfaSetup.value) {
       await fetchUserSession()
       if (!user.value?.requiresMfaSetup) await navigateTo('/', { replace: true })
@@ -218,6 +226,38 @@ async function disableTOTP() {
   }
 }
 
+async function generateRecoveryCodes() {
+  try {
+    if (auth.value.recoveryCodes && !(await appStore.confirm($t('replaceRecoveryCodes') as string)))
+      return
+    if (!(await checkAuth())) return
+    const response = await $fetch<{ codes: string[] }>('/api/auth/recovery/generate', {
+      method: 'POST',
+    })
+    recoveryCodes.value = response.codes
+    auth.value.recoveryCodes = response.codes.length
+  } catch (e: any) {
+    appStore.notify(e?.data?.message || e?.message, 'error')
+  }
+}
+
+let recoveryCodesClosed: (() => void) | undefined
+
+function closeRecoveryCodes() {
+  recoveryCodes.value = []
+  recoveryCodesClosed?.()
+}
+
+// Resolves once the codes are closed, so the MFA setup redirect does not hide them
+async function offerRecoveryCodes() {
+  if (auth.value.recoveryCodes) return
+  if (!(await appStore.confirm($t('offerRecoveryCodes') as string))) return
+  await generateRecoveryCodes()
+  if (!recoveryCodes.value.length) return
+  await new Promise<void>((resolve) => (recoveryCodesClosed = resolve))
+  recoveryCodesClosed = undefined
+}
+
 async function deleteRefreshTokens() {
   if (!(await checkAuth())) return
   appStore.setLoading(true)
@@ -388,7 +428,7 @@ onMounted(getAuth)
                   required
                 />
                 <button
-                  class="flex fg"
+                  class="flex-center fg"
                   type="button"
                   @click="showPassword2 = !showPassword2"
                 >
@@ -453,6 +493,25 @@ onMounted(getAuth)
           :title="canDisableTOTP ? '' : $t('lastFactor')"
           @click.prevent="toggleTOTP"
         />
+
+        <h3 class="mt2 mb0">{{ $t('recoveryCodes') }}</h3>
+        <p class="muted-text mt0">
+          {{ $t('recoveryCodesDescription') }}
+          <span
+            v-if="hasSecondFactor"
+            :class="auth.recoveryCodes < 5 ? 'danger-text' : ''"
+          >
+            {{ $t('recoveryCodesLeft', { count: auth.recoveryCodes }) }}
+          </span>
+        </p>
+        <button
+          class="flex"
+          :disabled="!hasSecondFactor"
+          :title="hasSecondFactor ? '' : $t('recoveryCodesRequireFactor')"
+          @click="generateRecoveryCodes"
+        >
+          {{ $t('generateRecoveryCodes') }}
+        </button>
       </section>
       <div class="flex-row my3">
         <button
@@ -464,6 +523,43 @@ onMounted(getAuth)
       </div>
     </template>
 
+    <div
+      v-if="recoveryCodes.length"
+      class="modal"
+    >
+      <div
+        class="p3"
+        style="max-width: min(400px, 90vw)"
+      >
+        <p class="mt0">{{ $t('recoveryCodesSave') }}</p>
+        <ul
+          class="text-center p0"
+          style="list-style: none; font-family: monospace; columns: 2"
+        >
+          <li
+            v-for="code in recoveryCodes"
+            :key="code"
+          >
+            {{ code }}
+          </li>
+        </ul>
+        <div class="flex-row g1">
+          <button
+            class="fg fg-border"
+            @click="copyToClipboard(recoveryCodes.join('\n'))"
+          >
+            {{ $t('copy') }}
+          </button>
+          <button
+            class="ml"
+            @click="closeRecoveryCodes"
+          >
+            {{ $t('recoveryCodesSaved') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
     <div
       v-if="showTOTP && TOTPSecret"
       class="modal"

package/layers/base/server/api/auth/index.get.ts

@@ -5,6 +5,7 @@ export default defineEventHandler(async (event) => {
     credentials: user.credentials!.map(({ id, name }) => ({ id, name })),
     hasPassword: !!user.password,
     hasTOTP: !!user.totp,
+    recoveryCodes: await countRecoveryCodes(user.id),
     forceMfa: useRuntimeConfig().forceMfa,
   }
 })

package/layers/base/server/api/auth/options.post.ts

@@ -7,15 +7,11 @@ const bodySchema = z.object({
 export default defineEventHandler(async (event) => {
   const { email } = await readValidatedBody(event, bodySchema.parse)
 
-  try {
-    const user = await getAuth(event, email, true)
-    return {
-      hasOTP: true,
-      hasPassword: !!user.password,
-      hasTOTP: !!user.totp,
-      hasPasskey: user.credentials!.length > 0,
-    }
-  } catch {
+  const user = await getAuth(event, email, true).catch((error: any) => {
+    if (error?.statusCode === 404) return null
+    throw error
+  })
+  if (!user) {
     return {
       hasOTP: true,
       hasPassword: false,
@@ -23,4 +19,11 @@ export default defineEventHandler(async (event) => {
       hasPasskey: false,
     }
   }
+
+  return {
+    hasOTP: true,
+    hasPassword: !!user.password,
+    hasTOTP: !!user.totp,
+    hasPasskey: user.credentials!.length > 0,
+  }
 })

package/layers/base/server/api/auth/recovery/generate.post.ts

@@ -0,0 +1,13 @@
+export default defineEventHandler(async (event) => {
+  await requireRecentAuth(event)
+  const user = await getAuth(event, undefined, true)
+
+  if (!user.totp && !user.credentials!.length) {
+    throw createError({ status: 400, message: 'Set up a second factor first.' })
+  }
+
+  const codes = await generateRecoveryCodes(user.id)
+  await log('Recovery codes generated', undefined, undefined, 'security', event)
+
+  return { codes }
+})

package/layers/base/server/api/auth/recovery/verify.post.ts

@@ -0,0 +1,37 @@
+import { z } from 'zod'
+import { verifyFirstFactor } from '../totp/verify.post'
+
+export default defineEventHandler(async (event) => {
+  const {
+    email,
+    password,
+    otp,
+    code,
+    locale = 'en',
+  } = await readValidatedBody(
+    event,
+    z.object({
+      email: emailSchema,
+      password: passwordSchema().optional(),
+      otp: otpSchema.optional(),
+      code: z.string().min(10).max(16),
+      locale: z.string().optional(),
+    }).parse,
+  )
+
+  const user = await verifyFirstFactor(event, email, { password, otp })
+  if (!user) throw createError({ status: 400, message: 'Invalid recovery code.' })
+
+  await enforceRateLimit(event, 'recovery', { limit: 5, window: 900 }, user.id)
+
+  const remaining = await consumeRecoveryCode(user.id, code)
+  if (remaining === null) throw createError({ status: 400, message: 'Invalid recovery code.' })
+
+  if (otp) await useStorage('auth').removeItem(email)
+  const session = await setSession(event, user)
+
+  await log('Recovery code used', { remaining }, undefined, 'security', event)
+  await sendEmailTemplate('recoveryCodeUsed', locale, { remaining }, user.email!).catch(() => {})
+
+  return session
+})

package/layers/base/server/api/auth/totp/verify.post.ts

@@ -1,17 +1,13 @@
 import { z } from 'zod'
 import { verify } from 'otplib'
+import type { H3Event } from 'h3'
 import { verifyOTP } from '../otp/verify.post'
 
-export default defineEventHandler(async (event) => {
-  const { email, password, otp, token } = await readValidatedBody(
-    event,
-    z.object({
-      email: emailSchema,
-      password: passwordSchema().optional(),
-      otp: otpSchema.optional(),
-      token: z.string().length(6),
-    }).parse,
-  )
+export async function verifyFirstFactor(
+  event: H3Event,
+  email: string,
+  { password, otp }: { password?: string; otp?: string },
+) {
   if (!otp && !password) {
     throw createError({
       status: 400,
@@ -32,6 +28,22 @@ export default defineEventHandler(async (event) => {
     throw createError({ status: 400, message: 'Invalid password.' })
   }
 
+  return user
+}
+
+export default defineEventHandler(async (event) => {
+  const { email, password, otp, token } = await readValidatedBody(
+    event,
+    z.object({
+      email: emailSchema,
+      password: passwordSchema().optional(),
+      otp: otpSchema.optional(),
+      token: z.string().length(6),
+    }).parse,
+  )
+
+  const user = await verifyFirstFactor(event, email, { password, otp })
+
   if (!user?.totp) {
     throw createError({ status: 400, message: 'TOTP is not enabled.' })
   }

package/layers/base/server/api/auth/webauthn/authenticate.post.ts

@@ -14,6 +14,9 @@ export default defineWebAuthnAuthenticateEventHandler({
 
     return challenge as string
   },
+  getOptions() {
+    return { userVerification: passkeyUserVerification() }
+  },
   async allowCredentials(event, userName) {
     const user = await getAuth(event, userName, true)
     return (user as any).credentials || []
@@ -29,6 +32,8 @@ export default defineWebAuthnAuthenticateEventHandler({
     return credential as any
   },
   async onSuccess(event, { credential, authenticationInfo }) {
+    requireUserVerification(authenticationInfo.userVerified)
+
     // the next assertion must report a higher counter, which exposes a cloned authenticator
     await db
       .update(credentials)

package/layers/base/server/api/auth/webauthn/register.post.ts

@@ -14,6 +14,9 @@ const registerHandler = defineWebAuthnRegisterEventHandler({
 
     return challenge as string
   },
+  getOptions() {
+    return { authenticatorSelection: { userVerification: passkeyUserVerification() } }
+  },
   async validateUser(userBody, event) {
     const session = await requireUserSession(event)
     const parsed = z
@@ -28,7 +31,9 @@ const registerHandler = defineWebAuthnRegisterEventHandler({
 
     return parsed.data
   },
-  async onSuccess(event, { credential }) {
+  async onSuccess(event, { credential, registrationInfo }) {
+    requireUserVerification(registrationInfo.userVerified)
+
     const session = await requireUserSession(event)
     await db.insert(credentials).values({
       name: new Date().toISOString().substring(0, 10),

package/layers/base/server/api/files/[...path].get.ts

@@ -15,7 +15,7 @@ const querySchema = z.object({
 })
 
 export default defineEventHandler(async (event) => {
-  const path = event.context.params?.path || ''
+  const path = getRouterParam(event, 'path') || ''
   const {
     isPrivate = false,
     maxAge,

package/layers/base/server/api/files/chunk.post.ts

@@ -23,11 +23,10 @@ export default defineEventHandler(async (event) => {
   const body = await readUploadBody(event, Number(useRuntimeConfig().public.files.chunkSize) || 1)
   if (!body) throw createError({ status: 400, message: 'No data' })
 
-  const get = (name: string) =>
-    body
-      .find((p) => p.name === name)
-      ?.data.toString()
-      .trim()
+  const get = (name: string) => {
+    const value = body.get(name)
+    return typeof value === 'string' ? value.trim() : undefined
+  }
 
   const uploadId = get('uploadId')
   const chunkIndex = Number(get('chunkIndex'))
@@ -38,9 +37,14 @@ export default defineEventHandler(async (event) => {
   const isPrivate = get('isPrivate') !== 'false'
   const parts = parseParts(get('parts'))
   const maxAge = parseMaxAge(get('maxAge'))
-  const chunkPart = body.find((p) => p.name === 'chunk')
-
-  if (!Number.isInteger(chunkIndex) || !Number.isInteger(totalChunks) || !filename || !chunkPart) {
+  const chunkPart = body.get('chunk')
+
+  if (
+    !Number.isInteger(chunkIndex) ||
+    !Number.isInteger(totalChunks) ||
+    !filename ||
+    !(chunkPart instanceof File)
+  ) {
     throw invalidChunkUpload()
   }
 
@@ -50,7 +54,7 @@ export default defineEventHandler(async (event) => {
     totalChunks,
     filename,
     type,
-    chunk: chunkPart.data,
+    chunk: Buffer.from(await chunkPart.arrayBuffer()),
     path,
     isPrivate,
     parts,

package/layers/base/server/api/files/index.post.ts

@@ -4,20 +4,19 @@ export default defineEventHandler(async (event) => {
     throw createError({ status: 400, message: 'No file uploaded' })
   }
 
-  const pathPart = body.find((p) => p.name === 'path')
-  const isPrivatePart = body.find((p) => p.name === 'isPrivate')
-  const isPrivate = isPrivatePart ? isPrivatePart.data.toString() === 'true' : true
-  const path = pathPart?.data.toString().trim()
-  const maxAge = parseMaxAge(
-    body
-      .find((p) => p.name === 'maxAge')
-      ?.data.toString()
-      .trim(),
-  )
+  const get = (name: string) => {
+    const value = body.get(name)
+    return typeof value === 'string' ? value.trim() : undefined
+  }
+
+  const isPrivate = body.has('isPrivate') ? get('isPrivate') === 'true' : true
+  const path = get('path')
+  const maxAge = parseMaxAge(get('maxAge'))
 
   return await Promise.all(
     body
-      .filter((p) => p.name === 'file')
+      .getAll('file')
+      .filter((file) => file instanceof File)
       .map((file) => uploadFile(event, file, path, isPrivate, maxAge)),
   )
 })

package/layers/base/server/database/defaults/access.ts

@@ -3,12 +3,12 @@ import type { H3Event } from 'h3'
 // Users reach their own folder u/{id}, admins every folder
 export async function checkFileAccess(event: H3Event, path: string) {
   const { user } = await requireUserSession(event)
-  if (!user) throw createError({ statusCode: 401, message: 'Unauthorized' })
+  if (!user) throw createError({ status: 401, message: 'Unauthorized' })
   const root = `u/${user.id}`
   if (path.startsWith(root) && (path[root.length] === '/' || path.length === root.length)) {
     return true
   }
   if (user.role === 'admin') return true
 
-  throw createError({ statusCode: 403, message: 'Insufficient permissions' })
+  throw createError({ status: 403, message: 'Insufficient permissions' })
 }

package/layers/base/server/database/relations.ts

@@ -13,6 +13,10 @@ export const authRelations = defineRelationsPart(schema, (r) => ({
       from: r.auth.id,
       to: r.credentials.userId,
     }),
+    recoveryCodes: r.many.recoveryCodes({
+      from: r.auth.id,
+      to: r.recoveryCodes.userId,
+    }),
   },
   refreshTokens: {
     auth: r.one.auth({
@@ -26,6 +30,12 @@ export const authRelations = defineRelationsPart(schema, (r) => ({
       to: r.auth.id,
     }),
   },
+  recoveryCodes: {
+    auth: r.one.auth({
+      from: r.recoveryCodes.userId,
+      to: r.auth.id,
+    }),
+  },
   logs: {
     auth: r.one.auth({
       from: r.logs.userId,

package/layers/base/server/database/schema.ts

@@ -49,6 +49,18 @@ export const credentials = authSchema.table(
   (table) => [primaryKey({ columns: [table.userId, table.id] })],
 )
 
+export const recoveryCodes = authSchema.table(
+  'recovery_codes',
+  {
+    userId: uuid()
+      .notNull()
+      .references(() => auth.id, { onDelete: 'cascade' }),
+    code: text().notNull(),
+    createdAt: timestamp({ withTimezone: true }).notNull().defaultNow(),
+  },
+  (table) => [primaryKey({ columns: [table.userId, table.code] })],
+)
+
 export const logs = authSchema.table(
   'logs',
   {

package/layers/base/server/middleware/2.mfa.ts

@@ -28,7 +28,7 @@ export default defineEventHandler(async (event) => {
 
   const path = event.path.split('?')[0]!
   if (path.startsWith('/api/auth/otp/') || path === '/api/auth/password') return // re-authentication
-  if (ENROLLMENT_ROUTES.includes(path) && !(path === '/api/auth' && event.method !== 'GET')) return
+  if (ENROLLMENT_ROUTES.includes(path) && !(path === '/api/auth' && !isMethod(event, 'GET'))) return
 
   throw createError({ status: 403, message: 'MFA setup required' })
 })

package/layers/base/server/routes/dev/email/[template].ts

@@ -1,12 +1,12 @@
 export default defineEventHandler(async (event) => {
   if (process.env.NODE_ENV === 'production') {
     throw createError({
-      statusCode: 404,
+      status: 404,
       message: 'Not found',
     })
   }
 
-  const templateId = event.context.params?.template || ''
+  const templateId = getRouterParam(event, 'template') || ''
   const query = getQuery(event)
   const locale = (query.locale as string) || 'en'
 

package/layers/base/server/utils/access.ts

@@ -4,5 +4,5 @@ export async function isAdmin(event: H3Event) {
   const { user } = await requireUserSession(event)
   if (user.role === 'admin') return true
 
-  throw createError({ statusCode: 403, message: 'Insufficient permissions' })
+  throw createError({ status: 403, message: 'Insufficient permissions' })
 }

package/layers/base/server/utils/auth.ts

@@ -32,6 +32,19 @@ export function requireSecondFactor(user: Pick<AuthUser, 'totp'> & { credentials
   }
 }
 
+export function passkeyUserVerification(): 'required' | 'preferred' {
+  return useRuntimeConfig().forceMfa ? 'required' : 'preferred'
+}
+
+export function requireUserVerification(userVerified: boolean) {
+  if (useRuntimeConfig().forceMfa && !userVerified) {
+    throw createError({
+      status: 400,
+      message: 'Set a PIN on your security key to use it.',
+    })
+  }
+}
+
 export async function createAuth(user: Pick<AuthUser, 'email'>) {
   const insertedUsers = await db
     .insert(auth)
@@ -133,7 +146,7 @@ export async function requireRecentAuth(event: H3Event) {
   if (!session.authenticatedAt || Date.now() - session.authenticatedAt > maxAge) {
     throw createError({
       status: 403,
-      statusMessage: 'reauth_required',
+      statusText: 'reauth_required',
       message: 'Please verify your identity again to continue.',
     })
   }

package/layers/base/server/utils/files.ts

@@ -29,8 +29,8 @@ import type { CompletedPart } from '@aws-sdk/client-s3'
 import { checkFileAccess } from '#database/access'
 import { createReadStream, createWriteStream } from 'fs'
 import { pipeline } from 'stream/promises'
-import type { Readable } from 'stream'
-import type { H3Event, MultiPartData } from 'h3'
+import { Readable } from 'stream'
+import type { H3Event } from 'h3'
 import { createHash } from 'crypto'
 import mime from 'mime'
 
@@ -38,33 +38,34 @@ const MB = 1024 * 1024
 
 function fileTooLarge() {
   const { maxSize } = useRuntimeConfig().public.files
-  return createError({ statusCode: 413, message: `File too large, max ${maxSize} MB` })
+  return createError({ status: 413, message: `File too large, max ${maxSize} MB` })
 }
 
 export async function readUploadBody(event: H3Event, maxMB: number) {
   await requireUserSession(event)
   const length = getRequestHeader(event, 'content-length')
-  if (!length) throw createError({ statusCode: 411, message: 'Content-Length required' })
+  if (!length) throw createError({ status: 411, message: 'Content-Length required' })
   if (Number(length) > (maxMB + 1) * MB) throw fileTooLarge()
-  return readMultipartFormData(event)
+  return readFormData(event).catch(() => undefined)
 }
 
 export async function uploadFile(
   event: H3Event,
-  file: MultiPartData,
+  file: File,
   path = 'files',
   isPrivate = true,
   maxAge?: number, // only stored on S3 objects, local files get their headers from nginx
 ) {
   await checkFileAccess(event, path)
-  path = getUploadPath(path, isPrivate, file.filename)
+  path = getUploadPath(path, isPrivate, file.name)
+  const data = Buffer.from(await file.arrayBuffer())
 
   let url
   if (useS3()) {
     const s3Key = getS3Key(path)
     url = await uploadToS3(
       s3Key,
-      file.data,
+      data,
       file.type || 'application/octet-stream',
       getCacheControl(isPrivate, maxAge),
       isPrivate,
@@ -73,7 +74,7 @@ export async function uploadFile(
     const filePath = join(process.cwd(), path)
     const folderPath = filePath.replace(/\/[^/]*$/, '')
     await mkdir(folderPath, { recursive: true })
-    await writeFile(filePath, file.data)
+    await writeFile(filePath, data)
 
     url = getFileURL(path, isPrivate)
   }
@@ -149,7 +150,7 @@ export async function uploadChunk(
   },
 ) {
   if (chunkIndex < 0 || chunkIndex >= totalChunks || totalChunks < 1) {
-    throw createError({ statusCode: 400, message: 'Invalid chunk index' })
+    throw createError({ status: 400, message: 'Invalid chunk index' })
   }
   const { chunkSize, maxSize } = useRuntimeConfig().public.files
   const chunkBytes = (Number(chunkSize) || 1) * MB
@@ -186,7 +187,7 @@ export async function uploadChunk(
     uploadId = crypto.randomUUID()
     parts = []
   } else if (!isUUID(uploadId)) {
-    throw createError({ statusCode: 400, message: 'Invalid upload id' })
+    throw createError({ status: 400, message: 'Invalid upload id' })
   }
 
   const tmpDir = join(process.cwd(), 'files', 'temp', uploadId)
@@ -335,10 +336,10 @@ export async function getFile(
     if (response.status === 416) {
       const contentRange = response.headers.get('content-range')
       if (contentRange) setHeader(event, 'Content-Range', contentRange)
-      throw createError({ statusCode: 416, message: 'Range not satisfiable' })
+      throw createError({ status: 416, message: 'Range not satisfiable' })
     }
-    if (response.status === 404) throw createError({ statusCode: 404, message: 'File not found' })
-    if (!response.ok) throw createError({ statusCode: 502, message: 'Failed to fetch file' })
+    if (response.status === 404) throw createError({ status: 404, message: 'File not found' })
+    if (!response.ok) throw createError({ status: 502, message: 'Failed to fetch file' })
 
     const passthrough = {
       'Content-Type': response.headers.get('content-type'),
@@ -358,7 +359,7 @@ export async function getFile(
 
   const stats = await stat(fullPath).catch(() => null)
   if (!stats?.isFile()) {
-    throw createError({ statusCode: 404, message: 'File not found' })
+    throw createError({ status: 404, message: 'File not found' })
   }
 
   setHeader(event, 'Content-Type', mime.getType(fullPath) || 'application/octet-stream')
@@ -367,7 +368,7 @@ export async function getFile(
   const parsedRange = parseRangeHeader(range, stats.size)
   if (parsedRange === 'unsatisfiable') {
     setHeader(event, 'Content-Range', `bytes */${stats.size}`)
-    throw createError({ statusCode: 416, message: 'Range not satisfiable' })
+    throw createError({ status: 416, message: 'Range not satisfiable' })
   }
 
   if (parsedRange) {
@@ -375,11 +376,12 @@ export async function getFile(
     setResponseStatus(event, 206)
     setHeader(event, 'Content-Range', `bytes ${start}-${end}/${stats.size}`)
     setHeader(event, 'Content-Length', end - start + 1)
-    return createReadStream(fullPath, { start, end })
+    return Readable.toWeb(createReadStream(fullPath, { start, end }))
   }
 
   setHeader(event, 'Content-Length', stats.size)
-  return createReadStream(fullPath)
+  // h3 v2 only streams web streams
+  return Readable.toWeb(createReadStream(fullPath))
 }
 
 export async function deletePath(event: H3Event, path: string, isPrivate = true) {
@@ -467,7 +469,7 @@ export async function copyFile(
   const destPath = join(process.cwd(), dest)
   const stats = await stat(srcPath).catch(() => null)
   if (!stats?.isFile()) {
-    throw createError({ statusCode: 404, message: 'File not found' })
+    throw createError({ status: 404, message: 'File not found' })
   }
   await mkdir(dirname(destPath), { recursive: true })
   await fsCopyFile(srcPath, destPath)
@@ -485,7 +487,7 @@ export async function copyFiles(
   deleteSrc = false,
 ) {
   const files = await listFolder(event, src, isPrivate)
-  if (!files.length) throw createError({ statusCode: 404, message: 'File not found' })
+  if (!files.length) throw createError({ status: 404, message: 'File not found' })
   const normalizedSrc = removeRoot(getSecurePath(src, isPrivate), isPrivate)
   const normalizedDest = removeRoot(getSecurePath(dest, isPrivate), isPrivate)
   return Promise.all(
@@ -519,7 +521,7 @@ export function getSecurePath(path: string, isPrivate = true) {
 }
 
 function invalidPath() {
-  return createError({ statusCode: 400, message: 'Invalid path' })
+  return createError({ status: 400, message: 'Invalid path' })
 }
 
 function getUploadPath(path: string, isPrivate: boolean, filename?: string) {
@@ -583,7 +585,7 @@ export function parseMaxAge(value?: string) {
   if (!value) return undefined
   const maxAge = Number(value)
   if (!Number.isInteger(maxAge) || maxAge < 0) {
-    throw createError({ statusCode: 400, message: 'Invalid maxAge' })
+    throw createError({ status: 400, message: 'Invalid maxAge' })
   }
   return maxAge
 }
@@ -788,7 +790,7 @@ export async function deleteFromS3(path: string, isPrivate = true) {
       const result = await client.send(command)
       if (result.Errors?.length) {
         throw createError({
-          statusCode: 502,
+          status: 502,
           message: `Failed to delete ${result.Errors.length} file(s): ${result.Errors.map((e) => `${e.Key} (${e.Code})`).join(', ')}`,
         })
       }

package/layers/base/server/utils/ip.ts

@@ -11,5 +11,5 @@ export function getClientIP(event: H3Event): string {
     if (clientIP) return clientIP
   }
 
-  return event.node.req.socket?.remoteAddress || 'unknown'
+  return getRequestIP(event) || 'unknown'
 }

package/layers/base/server/utils/recoveryCodes.ts

@@ -0,0 +1,56 @@
+import { and, eq } from 'drizzle-orm'
+import { randomBytes } from 'crypto'
+import { recoveryCodes } from '#server/database/schema'
+
+const RECOVERY_CODE_COUNT = 10
+
+function generateRecoveryCode() {
+  const code = randomBytes(5).toString('hex')
+  return `${code.slice(0, 5)}-${code.slice(5)}`
+}
+
+function normalizeRecoveryCode(code: string) {
+  return code.toLowerCase().replace(/[^0-9a-f]/g, '')
+}
+
+export async function generateRecoveryCodes(userId: string) {
+  const codes = Array.from({ length: RECOVERY_CODE_COUNT }, generateRecoveryCode)
+  const hashes = await Promise.all(codes.map((code) => hashPassword(normalizeRecoveryCode(code))))
+
+  await db.transaction(async (tx) => {
+    await tx.delete(recoveryCodes).where(eq(recoveryCodes.userId, userId))
+    await tx.insert(recoveryCodes).values(hashes.map((code) => ({ userId, code })))
+  })
+
+  return codes
+}
+
+export async function consumeRecoveryCode(userId: string, code: string) {
+  const normalized = normalizeRecoveryCode(code)
+  const rows = await db
+    .select({ code: recoveryCodes.code })
+    .from(recoveryCodes)
+    .where(eq(recoveryCodes.userId, userId))
+
+  let match: string | undefined
+  for (const row of rows) {
+    if (await verifyPassword(row.code, normalized)) {
+      match = row.code
+      break
+    }
+  }
+  if (!match) return null
+
+  const deleted = await db
+    .delete(recoveryCodes)
+    .where(and(eq(recoveryCodes.userId, userId), eq(recoveryCodes.code, match)))
+    .returning()
+  // a concurrent request used it first
+  if (!deleted.length) return null
+
+  return rows.length - 1
+}
+
+export function countRecoveryCodes(userId: string) {
+  return db.$count(recoveryCodes, eq(recoveryCodes.userId, userId))
+}

package/locales/en.json

@@ -15,6 +15,7 @@
   "fileTooLarge": "Too large, max {max} MB: {files}",
   "formatFailed": "Could not format or upload {files}",
   "language": "Language | Languages",
+  "or": "or",
   "paste": "Paste",
   "rename": "Rename",
   "retry": "Retry",
@@ -31,6 +32,8 @@
     "otpSent": "Code sent to {email}",
     "passkey": "Use a passkey",
     "password": "Password",
-    "signin": "Sign In"
+    "recoveryCode": "Recovery code",
+    "signin": "Sign In",
+    "useRecoveryCode": "Use a recovery code"
   }
 }

package/locales/fr.json

@@ -15,6 +15,7 @@
   "fileTooLarge": "Trop volumineux, max {max} Mo : {files}",
   "formatFailed": "Impossible de formater ou téléverser {files}",
   "language": "Langue | Langues",
+  "or": "ou",
   "paste": "Coller",
   "rename": "Renommer",
   "retry": "Réessayer",
@@ -31,6 +32,8 @@
     "otpSent": "Code envoyé à {email}",
     "passkey": "Utiliser une passkey",
     "password": "Mot de passe",
-    "signin": "Se connecter"
+    "recoveryCode": "Code de récupération",
+    "signin": "Se connecter",
+    "useRecoveryCode": "Utiliser un code de récupération"
   }
 }

package/locales/pages/signin/en.json

@@ -1,5 +1,4 @@
 {
   "continueAsGuest": "Continue as Guest",
-  "or": "or",
   "signinWith": "Sign in with"
 }

package/locales/pages/signin/fr.json

@@ -1,5 +1,4 @@
 {
   "continueAsGuest": "Continuer en tant qu'invité",
-  "or": "ou",
   "signinWith": "Se connecter avec"
 }

package/locales/pages/user-auth/en.json

@@ -17,5 +17,15 @@
   "registerPasskey": "Add a passkey",
   "settings": "Settings",
   "setupTotp": "Use an authenticator app",
-  "totpSecret": "Scan this QR code with your authenticator app or copy the code manually."
+  "totpSecret": "Scan this QR code with your authenticator app or copy the code manually.",
+  "copy": "Copy",
+  "generateRecoveryCodes": "Generate recovery codes",
+  "recoveryCodes": "Recovery codes",
+  "recoveryCodesDescription": "Single-use codes to sign in if you lose your passkey or authenticator app.",
+  "recoveryCodesLeft": "Codes left: {count}.",
+  "recoveryCodesRequireFactor": "Add a passkey or an authenticator app first.",
+  "recoveryCodesSave": "Save these codes somewhere safe, they will not be shown again. Each code works once.",
+  "recoveryCodesSaved": "I saved them",
+  "replaceRecoveryCodes": "Your current recovery codes will stop working. Generate new ones?",
+  "offerRecoveryCodes": "Generate recovery codes now? They let you sign in if you lose this device."
 }

package/locales/pages/user-auth/fr.json

@@ -17,5 +17,15 @@
   "registerPasskey": "Ajouter une passkey",
   "settings": "Paramètres",
   "setupTotp": "Utiliser une application d'authentification",
-  "totpSecret": "Scannez ce code QR avec votre application d'authentification ou copiez le code manuellement."
+  "totpSecret": "Scannez ce code QR avec votre application d'authentification ou copiez le code manuellement.",
+  "copy": "Copier",
+  "generateRecoveryCodes": "Générer des codes de récupération",
+  "recoveryCodes": "Codes de récupération",
+  "recoveryCodesDescription": "Codes à usage unique pour vous connecter si vous perdez votre passkey ou votre application d'authentification.",
+  "recoveryCodesLeft": "Codes restants : {count}.",
+  "recoveryCodesRequireFactor": "Ajoutez d'abord une passkey ou une application d'authentification.",
+  "recoveryCodesSave": "Conservez ces codes en lieu sûr, ils ne seront plus affichés. Chaque code ne fonctionne qu'une fois.",
+  "recoveryCodesSaved": "Je les ai sauvegardés",
+  "replaceRecoveryCodes": "Vos codes de récupération actuels ne fonctionneront plus. En générer de nouveaux ?",
+  "offerRecoveryCodes": "Générer des codes de récupération maintenant ? Ils vous permettent de vous connecter si vous perdez cet appareil."
 }

package/nuxt.config.ts

@@ -34,6 +34,8 @@ export default defineNuxtConfig({
         '/api/auth/email/verify': { limit: 10, window: 60 },
         '/api/auth/otp/verify': { limit: 10, window: 60 },
         '/api/auth/totp/verify': { limit: 10, window: 60 },
+        '/api/auth/recovery/verify': { limit: 10, window: 60 },
+        '/api/auth/recovery/generate': { limit: 5, window: 900 },
         '/api/auth/webauthn/authenticate': { limit: 10, window: 60 },
         '/api/auth/webauthn/register': { limit: 10, window: 60 },
         '/api/auth/anonymous': { limit: 5, window: 3600 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maxibase",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Nuxt layer with auth, files, logs and backups",
   "keywords": [
     "nuxt",

package/server/assets/emails/en/recoveryCodeUsed.html

@@ -0,0 +1,3 @@
+<title>Recovery code used</title>
+<p>A recovery code was used to sign in to your account. Codes left: {{remaining}}.</p>
+<p>If this was not you, change your password and generate new recovery codes.</p>

package/server/assets/emails/fr/recoveryCodeUsed.html

@@ -0,0 +1,8 @@
+<title>Code de récupération utilisé</title>
+<p>
+  Un code de récupération a été utilisé pour vous connecter à votre compte. Codes restants :
+  {{remaining}}.
+</p>
+<p>
+  Si ce n'était pas vous, changez votre mot de passe et générez de nouveaux codes de récupération.
+</p>