feat(sveltekit): webauthn provider support

apps/dev/sveltekit/.gitignore

@@ -10,3 +10,4 @@ node_modules
 .output
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+tmp-unstorage

apps/dev/sveltekit/package.json

@@ -21,8 +21,7 @@
   "dependencies": {
     "@auth/sveltekit": "workspace:*",
     "@auth/unstorage-adapter": "workspace:*",
-    "nodemailer": "^6.9.3",
-    "unstorage": "^1.10.1"
+    "unstorage": "^1.10.2"
   },
   "type": "module"
 }

apps/dev/sveltekit/src/auth.ts

@@ -4,15 +4,21 @@ import Credentials from "@auth/sveltekit/providers/credentials"
 import Facebook from "@auth/sveltekit/providers/facebook"
 import Discord from "@auth/sveltekit/providers/discord"
 import Google from "@auth/sveltekit/providers/google"
+import Passkey from "@auth/sveltekit/providers/passkey"
 import { createStorage } from "unstorage"
 import { UnstorageAdapter } from "@auth/unstorage-adapter"
+import fsDriver from "unstorage/drivers/fs"
+import { dev } from "$app/environment"
+
+const storage = createStorage({
+  driver: fsDriver({ base: "./tmp-unstorage" }),
+})
 
-const storage = createStorage()
 export const { handle, signIn, signOut } = SvelteKitAuth({
-  debug: true,
+  debug: dev ? true : false,
   adapter: UnstorageAdapter(storage),
-  session: {
-    strategy: "jwt",
+  experimental: {
+    enableWebAuthn: true,
   },
   providers: [
     Credentials({
@@ -31,6 +37,7 @@ export const { handle, signIn, signOut } = SvelteKitAuth({
     Google,
     Facebook,
     Discord,
+    Passkey,
   ],
   theme: {
     logo: "https://authjs.dev/img/logo-sm.png",

apps/dev/sveltekit/src/routes/signin/+page.server.ts

@@ -1,4 +1,4 @@
-import { signIn } from "../../auth"
+import { signIn } from "$/auth"
 import type { Actions } from "./$types"
 
 export const actions = { default: signIn } satisfies Actions

apps/dev/sveltekit/src/routes/signout/+page.server.ts

@@ -1,4 +1,4 @@
-import { signOut } from "../../auth"
+import { signOut } from "$/auth"
 import type { Actions } from "./$types"
 
 export const actions = { default: signOut } satisfies Actions

apps/dev/sveltekit/vite.config.js

@@ -1,11 +1,9 @@
+import { defineConfig } from "vite"
 import { sveltekit } from "@sveltejs/kit/vite"
 
-/** @type {import('vite').UserConfig} */
-const config = {
+export default defineConfig({
   server: {
     port: 3000,
   },
   plugins: [sveltekit()],
-}
-
-export default config
+})

packages/core/src/types.ts

@@ -73,6 +73,8 @@
   WebAuthnProviderType,
 } from "./providers/webauthn.js"
 
+export type { WebAuthnOptionsResponseBody } from "./lib/utils/webauthn-utils.js"
+export type { AuthConfig } from "./index.js"
 export type { LoggerInstance }
 export type Awaitable<T> = T | PromiseLike<T>
 export type Awaited<T> = T extends Promise<infer U> ? U : T

packages/frameworks-sveltekit/package.json

@@ -50,9 +50,23 @@
     "set-cookie-parser": "^2.6.0"
   },
   "peerDependencies": {
+    "@simplewebauthn/browser": "^9.0.1",
+    "@simplewebauthn/server": "^9.0.3",
     "@sveltejs/kit": "^1.0.0 || ^2.0.0",
+    "nodemailer": "^6.6.5",
     "svelte": "^3.54.0 || ^4.0.0 || ^5"
   },
+  "peerDependenciesMeta": {
+    "@simplewebauthn/browser": {
+      "optional": true
+    },
+    "@simplewebauthn/server": {
+      "optional": true
+    },
+    "nodemailer": {
+      "optional": true
+    }
+  },
   "type": "module",
   "types": "./dist/index.d.ts",
   "files": [
@@ -68,6 +82,10 @@
       "types": "./dist/client.d.ts",
       "import": "./dist/client.js"
     },
+    "./webauthn": {
+      "types": "./dist/webauthn.d.ts",
+      "import": "./dist/webauthn.js"
+    },
     "./components": {
       "types": "./dist/components/index.d.ts",
       "svelte": "./dist/components/index.js"

packages/frameworks-sveltekit/src/lib/client.ts

@@ -1,12 +1,14 @@
+import { base } from "$app/paths"
 import type {
   BuiltInProviderType,
   RedirectableProviderType,
 } from "@auth/core/providers"
-import { base } from "$app/paths"
+import type { LiteralUnion } from "./types.js"
 
-type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>)
-
-interface SignInOptions extends Record<string, unknown> {
+/*
+ * @internal
+ */
+export interface SignInOptions extends Record<string, unknown> {
   /**
    * Specify to which URL the user will be redirected after signing in. Defaults to the page URL the sign-in is initiated from.
    *

packages/frameworks-sveltekit/src/lib/types.ts

@@ -2,6 +2,10 @@
 import type { BuiltInProviderType } from "@auth/core/providers"
 import type { Session } from "@auth/core/types"
 
+export type LiteralUnion<T extends U, U = string> =
+  | T
+  | (U & Record<never, never>)
+
 /** Configure the {@link SvelteKitAuth} method. */
 export interface SvelteKitAuthConfig extends Omit<AuthConfig, "raw"> {}
 

packages/frameworks-sveltekit/src/lib/webauthn.ts

@@ -0,0 +1,118 @@
+import { base } from "$app/paths"
+import { startAuthentication, startRegistration } from "@simplewebauthn/browser"
+
+import type {
+  BuiltInProviderType,
+  RedirectableProviderType,
+} from "@auth/core/providers"
+import type { WebAuthnOptionsResponseBody } from "@auth/core/types"
+import type { SignInOptions, SignInAuthorizationParams } from "./client.js"
+import type { LiteralUnion } from "./types.js"
+
+/**
+ * Fetch webauthn options from server and prompt user for authentication or registration.
+ * Returns either the completed WebAuthn response or an error request.
+ *
+ * @param providerId provider ID
+ * @param options SignInOptions
+ * @returns WebAuthn response or error
+ */
+async function webAuthnOptions(providerId: string, options?: SignInOptions) {
+  const baseUrl = `${base}/auth/`
+
+  // @ts-expect-error
+  const params = new URLSearchParams(options)
+
+  const optionsResp = await fetch(
+    `${baseUrl}/webauthn-options/${providerId}?${params}`
+  )
+  if (!optionsResp.ok) {
+    return { error: optionsResp }
+  }
+  const optionsData: WebAuthnOptionsResponseBody = await optionsResp.json()
+
+  if (optionsData.action === "authenticate") {
+    const webAuthnResponse = await startAuthentication(optionsData.options)
+    return { data: webAuthnResponse, action: "authenticate" }
+  } else {
+    const webAuthnResponse = await startRegistration(optionsData.options)
+    return { data: webAuthnResponse, action: "register" }
+  }
+}
+
+/**
+ * Client-side method to initiate a webauthn signin flow
+ * or send the user to the signin page listing all possible providers.
+ * Automatically adds the CSRF token to the request.
+ *
+ * [Documentation](https://authjs.dev/reference/sveltekit/client#signin)
+ */
+export async function signIn<
+  P extends RedirectableProviderType | undefined = undefined,
+>(
+  providerId?: LiteralUnion<
+    P extends RedirectableProviderType
+      ? P | BuiltInProviderType
+      : BuiltInProviderType
+  >,
+  options?: SignInOptions,
+  authorizationParams?: SignInAuthorizationParams
+) {
+  const { callbackUrl = window.location.href, redirect = true } = options ?? {}
+
+  // TODO: Support custom providers
+  const isCredentials = providerId === "credentials"
+  const isEmail = providerId === "email"
+  const isWebAuthn = providerId === "webauthn"
+  const isSupportingReturn = isCredentials || isEmail || isWebAuthn
+
+  const basePath = base ?? ""
+  const signInUrl = `${basePath}/auth/${
+    isCredentials || isWebAuthn ? "callback" : "signin"
+  }/${providerId}`
+
+  const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
+
+  // Execute WebAuthn client flow if needed
+  const webAuthnBody: Record<string, unknown> = {}
+  if (isWebAuthn) {
+    const { data, error, action } = await webAuthnOptions(providerId, options)
+    if (error) {
+      // logger.error(new Error(await error.text()))
+      return
+    }
+    webAuthnBody.data = JSON.stringify(data)
+    webAuthnBody.action = action
+  }
+
+  // TODO: Remove this since Sveltekit offers the CSRF protection via origin check
+  const csrfTokenResponse = await fetch(`${basePath}/auth/csrf`)
+  const { csrfToken } = await csrfTokenResponse.json()
+
+  const res = await fetch(_signInUrl, {
+    method: "post",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      "X-Auth-Return-Redirect": "1",
+    },
+    // @ts-ignore
+    body: new URLSearchParams({
+      ...options,
+      csrfToken,
+      callbackUrl,
+      ...webAuthnBody,
+    }),
+  })
+
+  const data = await res.clone().json()
+
+  if (redirect || !isSupportingReturn) {
+    // TODO: Do not redirect for Credentials and Email providers by default in next major
+    window.location.href = data.url ?? callbackUrl
+    // If url contains a hash, the browser does not reload the page. We reload manually
+    if (data.url.includes("#")) window.location.reload()
+    return
+  }
+
+  return res
+}

packages/next-auth/src/webauthn.ts

@@ -3,7 +3,7 @@
 import { getCsrfToken, getProviders, __NEXTAUTH } from "./react.js"
 
 import type { LoggerInstance } from "@auth/core/types"
-import type { WebAuthnOptionsResponseBody } from "@auth/core/lib/utils/webauthn-utils"
+import type { WebAuthnOptionsResponseBody } from "@auth/core/types"
 import type {
   BuiltInProviderType,
   RedirectableProviderType,