maxibase 1.4.0 → 1.5.0

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()
@@ -133,17 +135,23 @@ function signIn() {
   }, 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 +168,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()
     }
@@ -187,8 +195,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>
@@ -286,8 +298,9 @@ onMounted(async () => {
           type="button"
           :disabled="isLoading"
           class="flex-center g1 w mt1 bg bg-border"
-          @click="signInWithPasskey"
+          @click="signInWithPasskey(email)"
         >
+          <Icon name="lucide:key-round" />
           {{ $t('authCheck.passkey') }}
         </button>
         <button
@@ -319,7 +332,7 @@ onMounted(async () => {
             type="email"
             required
             :disabled="isLoading"
-            autocomplete="username"
+            autocomplete="username webauthn"
           />
         </label>
         <button
@@ -329,10 +342,23 @@ 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"
+          :disabled="isLoading"
+          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 +378,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

@@ -388,7 +388,7 @@ onMounted(getAuth)
                   required
                 />
                 <button
-                  class="flex fg"
+                  class="flex-center fg"
                   type="button"
                   @click="showPassword2 = !showPassword2"
                 >

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/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

@@ -133,7 +133,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/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",

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",

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/package.json

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