talon-auth-nuxt 0.13.1

package/README.md

@@ -0,0 +1,131 @@
+# talon-auth-nuxt
+
+Nuxt module for integrating [Talon](https://talon.codes) authentication into your Nuxt application.
+
+## Installation
+
+```bash
+pnpm add talon-auth-nuxt talon-auth
+```
+
+## Setup
+
+### 1. Register the module
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['talon-auth-nuxt'],
+
+  talon: {
+    appId: process.env.TALON_APP_ID,
+    apiUrl: process.env.API_URL // defaults to https://api.talon.codes
+  }
+})
+```
+
+### 2. Add the login component to your page
+
+```vue
+<script setup lang="ts">
+// Import the talon-auth login web component (client-side only)
+if (import.meta.client) {
+  await import('talon-auth/login')
+}
+
+const config = useRuntimeConfig()
+const { appId, apiUrl } = config.public.talon!
+const user = useTalonUser()
+
+onMounted(() => setupTalonLogin())
+</script>
+
+<template>
+  <talon-login :app-id="appId" :api-url="apiUrl" @login="onLogin" />
+
+  <div v-if="user">
+    Welcome, {{ user.email }}
+    <button @click="logout">Logout</button>
+  </div>
+</template>
+```
+
+## Configuration
+
+| Option               | Type     | Default                   | Description                           |
+| -------------------- | -------- | ------------------------- | ------------------------------------- |
+| `appId`              | `string` | **required**              | Your Talon application ID             |
+| `apiUrl`             | `string` | `https://api.talon.codes` | Talon API URL                         |
+| `authEndpoint`       | `string` | `/api/auth`               | Server endpoint for cookie management |
+| `loginComponentName` | `string` | `talon-login`             | Custom element tag name               |
+| `cookie`             | `object` | see below                 | Cookie configuration                  |
+
+### Cookie Configuration
+
+```ts
+cookie: {
+  name: 'talon_auth',      // Cookie name
+  httpOnly: true,          // HTTP-only cookie
+  secure: true,            // Secure in production
+  sameSite: 'lax',         // SameSite policy
+  maxAge: 60 * 60 * 24 * 7, // 7 days
+  path: '/'                // Cookie path
+}
+```
+
+## Composables
+
+The module auto-imports the following composables:
+
+### `useTalonUser()`
+
+Returns a readonly ref of the current authenticated user.
+
+```ts
+const user = useTalonUser()
+// user.value is TalonAuthUser | null
+```
+
+### `useTalonLogout()`
+
+Returns a logout function that clears the session.
+
+```ts
+const logout = useTalonLogout()
+await logout()
+```
+
+### `setupTalonLogin()`
+
+Call this in `onMounted` to initialize the login flow and sync authentication state.
+
+```ts
+onMounted(() => setupTalonLogin())
+```
+
+### `getLoginEl()`
+
+Returns the `<talon-login>` DOM element. Useful for accessing the component's methods directly.
+
+```ts
+const loginEl = getLoginEl()
+const token = await loginEl.getAccessToken()
+```
+
+## How It Works
+
+1. **Server-side**: On each request, the module's server plugin verifies the auth cookie and populates the user state for SSR.
+
+2. **Client-side**: When `setupTalonLogin()` is called, it syncs with the `<talon-login>` component and updates the server cookie.
+
+3. **Cookie management**: The module registers server handlers at the configured `authEndpoint`:
+   - `POST /api/auth` - Verifies token and sets the auth cookie
+   - `DELETE /api/auth` - Clears the auth cookie
+
+## TypeScript
+
+The module exports types from `talon-auth`:
+
+```ts
+import type { TalonAuthUser, TalonLoginComponent } from 'talon-auth-nuxt'
+```

package/dist/module.d.mts

@@ -0,0 +1,36 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { TalonAuthUser, KvStore, DeviceData } from 'talon-auth';
+export { TalonAuthClient, TalonAuthClientInterface, TalonAuthUser } from 'talon-auth';
+export { UseTalonClientOptions } from '../dist/runtime/composables/use-talon.js';
+
+/**
+ * Context passed to callback functions for dynamic configuration.
+ * Available in both client and server environments.
+ */
+interface TalonContext {
+    path: string;
+    user: TalonAuthUser | null;
+}
+type TalonStore = KvStore<DeviceData>;
+type TalonStoreConfig = 'indexedDb' | 'memory';
+interface TalonCookieOptions {
+    name?: string;
+    httpOnly?: boolean;
+    secure?: boolean;
+    sameSite?: 'lax' | 'strict' | 'none';
+    maxAge?: number;
+    path?: string;
+}
+interface TalonAuthModuleOptions {
+    appId: string;
+    apiUrl?: string;
+    authEndpoint?: string;
+    loginComponentName?: string;
+    cookie?: TalonCookieOptions;
+    store?: TalonStoreConfig;
+    loginExpiry?: number;
+}
+declare const _default: _nuxt_schema.NuxtModule<TalonAuthModuleOptions, TalonAuthModuleOptions, false>;
+
+export { _default as default };
+export type { TalonAuthModuleOptions, TalonContext, TalonCookieOptions, TalonStore, TalonStoreConfig };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "talon-auth-nuxt",
+  "configKey": "talon",
+  "compatibility": {
+    "nuxt": ">=3.0.0"
+  },
+  "version": "0.13.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,84 @@
+import { defineNuxtModule, createResolver, addImports, addPlugin, addServerHandler } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "talon-auth-nuxt",
+    configKey: "talon",
+    compatibility: {
+      nuxt: ">=3.0.0"
+    }
+  },
+  defaults: {
+    appId: "",
+    apiUrl: "https://api.talon.codes",
+    authEndpoint: "/api/auth",
+    loginComponentName: "talon-login",
+    cookie: {
+      name: "talon_auth",
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      // 'lax' allows cookie on navigation from external links; 'strict' would break auth
+      maxAge: void 0,
+      // defaults to token expiry if not set
+      path: "/"
+    },
+    store: "indexedDb",
+    loginExpiry: 60 * 15
+    // 15 minutes (in seconds)
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    if (!options.appId) {
+      console.warn("[talon-auth-nuxt] appId is required in talon config. Authentication will not work.");
+    }
+    nuxt.options.runtimeConfig.public.talon = {
+      appId: options.appId,
+      apiUrl: options.apiUrl,
+      loginComponentName: options.loginComponentName,
+      store: options.store,
+      loginExpiry: options.loginExpiry
+    };
+    nuxt.options.runtimeConfig.talon = {
+      authEndpoint: options.authEndpoint,
+      cookie: options.cookie
+    };
+    const composables = ["useTalonClient", "getTalonAuthToken", "useTalonUser", "useTalonLogout", "setupTalonLogin"];
+    for (const name of composables) {
+      addImports({
+        name,
+        as: name,
+        from: resolver.resolve("./runtime/composables/use-talon")
+      });
+    }
+    addPlugin({
+      src: resolver.resolve("./runtime/plugins/talon.server"),
+      mode: "server",
+      order: -50
+    });
+    const endpoint = options.authEndpoint || "/api/auth";
+    addServerHandler({
+      route: endpoint,
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/auth.post")
+    });
+    addServerHandler({
+      route: endpoint,
+      method: "delete",
+      handler: resolver.resolve("./runtime/server/api/auth.delete")
+    });
+    const componentName = options.loginComponentName || "talon-login";
+    nuxt.options.vue = nuxt.options.vue || {};
+    nuxt.options.vue.compilerOptions = nuxt.options.vue.compilerOptions || {};
+    const existingIsCustomElement = nuxt.options.vue.compilerOptions.isCustomElement;
+    nuxt.options.vue.compilerOptions.isCustomElement = (tag) => {
+      if (tag === componentName) return true;
+      if (typeof existingIsCustomElement === "function") {
+        return existingIsCustomElement(tag);
+      }
+      return false;
+    };
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/composables/use-talon.js

@@ -0,0 +1,108 @@
+import { createClient, createIndexedDbStore, createMemoryStore } from "talon-auth";
+import { readonly, useCookie, useNuxtApp, useRoute, useState, useRuntimeConfig } from "#imports";
+export function useTalonClient(options) {
+  if (import.meta.server) return null;
+  const nuxtApp = useNuxtApp();
+  const config = useRuntimeConfig();
+  const route = useRoute();
+  if (options?.store || options?.loginExpiry) {
+    const store2 = options.store ?? createStoreFromConfig(config.public.talon?.store);
+    const loginExpiry2 = resolveLoginExpiry(options.loginExpiry ?? config.public.talon?.loginExpiry, {
+      path: route.path,
+      user: null
+      // User not available yet when creating client
+    });
+    return createClient({
+      appId: config.public.talon?.appId,
+      api: config.public.talon?.apiUrl,
+      store: store2,
+      loginExpiry: loginExpiry2
+    });
+  }
+  if (nuxtApp._talonClient) {
+    return nuxtApp._talonClient;
+  }
+  const store = createStoreFromConfig(config.public.talon?.store);
+  const loginExpiry = resolveLoginExpiry(config.public.talon?.loginExpiry, {
+    path: route.path,
+    user: null
+  });
+  nuxtApp._talonClient = createClient({
+    appId: config.public.talon?.appId,
+    api: config.public.talon?.apiUrl,
+    store,
+    loginExpiry
+  });
+  return nuxtApp._talonClient;
+}
+function createStoreFromConfig(storeConfig) {
+  if (storeConfig === "memory") {
+    return createMemoryStore();
+  }
+  return createIndexedDbStore();
+}
+function resolveLoginExpiry(config, ctx) {
+  if (typeof config === "function") {
+    return config(ctx);
+  }
+  return config ?? 60 * 15;
+}
+export function getTalonAuthToken() {
+  const config = useRuntimeConfig();
+  const cookieName = config.talon?.cookie?.name || "talon_auth";
+  if (import.meta.server) {
+    const authCookie = useCookie(cookieName);
+    return async () => authCookie.value ?? null;
+  }
+  const client = useTalonClient();
+  return async () => {
+    try {
+      return await client?.getAccessToken() ?? null;
+    } catch {
+      return null;
+    }
+  };
+}
+export function useTalonUser() {
+  const user = useState("talon-user", () => null);
+  return readonly(user);
+}
+export function useTalonLogout() {
+  const user = useState("talon-user");
+  const config = useRuntimeConfig();
+  const authEndpoint = config.public.talon?.authEndpoint || "/api/auth";
+  const client = useTalonClient();
+  return async function logout() {
+    if (import.meta.server) {
+      return;
+    }
+    await client?.logout();
+    user.value = null;
+    await $fetch(authEndpoint, { method: "DELETE" });
+  };
+}
+export async function setupTalonLogin() {
+  const user = useState("talon-user");
+  const config = useRuntimeConfig();
+  const authEndpoint = config.public.talon?.authEndpoint || "/api/auth";
+  const client = useTalonClient();
+  async function updateCookie(token) {
+    try {
+      await $fetch(authEndpoint, {
+        method: "POST",
+        body: { token }
+      });
+    } catch {
+      user.value = null;
+    }
+  }
+  if (client) {
+    try {
+      const accessToken = await client.getAccessToken();
+      await updateCookie(accessToken);
+      user.value = await client.getUser();
+    } catch {
+      user.value = null;
+    }
+  }
+}

package/dist/runtime/plugins/talon.server.js

@@ -0,0 +1,24 @@
+import { createVerifier } from "talon-auth";
+import { defineNuxtPlugin, useCookie, useRuntimeConfig, useState } from "#imports";
+export default defineNuxtPlugin(async () => {
+  const config = useRuntimeConfig();
+  const appId = config.public.talon?.appId;
+  if (!appId) {
+    console.warn("talon-auth-nuxt: appId is not configured in nuxt.config");
+    return;
+  }
+  const cookieName = config.talon?.cookie?.name || "talon_auth";
+  const user = useState("talon-user", () => null);
+  const accessToken = useCookie(cookieName);
+  if (accessToken.value) {
+    try {
+      const verifier = createVerifier({ appId });
+      const verified = await verifier.verify(accessToken.value);
+      if (verified.user) {
+        user.value = verified.user;
+      }
+    } catch {
+      accessToken.value = null;
+    }
+  }
+});

package/dist/runtime/server/api/auth.delete.js

@@ -0,0 +1,9 @@
+import { defineEventHandler, deleteCookie, useRuntimeConfig } from "#imports";
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const cookieName = config.talon?.cookie?.name || "talon_auth";
+  deleteCookie(event, cookieName);
+  return {
+    success: true
+  };
+});

package/dist/runtime/server/api/auth.post.js

@@ -0,0 +1,46 @@
+import { createVerifier } from "talon-auth";
+import { createError, defineEventHandler, readBody, setCookie, useRuntimeConfig } from "#imports";
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const appId = config.public.talon?.appId;
+  if (!appId) {
+    throw createError({
+      statusCode: 500,
+      message: "talon-auth-nuxt: appId is not configured in nuxt.config"
+    });
+  }
+  const body = await readBody(event);
+  if (!body?.token) {
+    throw createError({
+      statusCode: 400,
+      message: "Access token is required"
+    });
+  }
+  try {
+    const verifier = createVerifier({ appId });
+    const verified = await verifier.verify(body.token);
+    if (!verified.user) {
+      throw createError({
+        statusCode: 401,
+        message: "Invalid access token"
+      });
+    }
+    const { name, maxAge: configuredMaxAge, ...cookieOptions } = config.talon.cookie;
+    let maxAge = configuredMaxAge;
+    if (!maxAge && verified.payload.exp) {
+      const now = Math.floor(Date.now() / 1e3);
+      maxAge = verified.payload.exp - now;
+    }
+    const finalOptions = maxAge && maxAge > 0 ? { ...cookieOptions, maxAge } : cookieOptions;
+    setCookie(event, name, body.token, finalOptions);
+    return {
+      success: true,
+      user: verified.user
+    };
+  } catch {
+    throw createError({
+      statusCode: 401,
+      message: "Access token verification failed"
+    });
+  }
+});

package/dist/runtime/shims.d.ts

@@ -0,0 +1,36 @@
+declare module '#imports' {
+  export const readonly: (typeof import('vue'))['readonly']
+  export const useState: (typeof import('nuxt/app'))['useState']
+  export const useNuxtApp: (typeof import('nuxt/app'))['useNuxtApp']
+  export const useRoute: (typeof import('nuxt/app'))['useRoute']
+  export const useRuntimeConfig: () => {
+    public: {
+      talon?: {
+        appId?: string
+        apiUrl?: string
+        loginComponentName?: string
+        authEndpoint?: string
+        store?: 'indexedDb' | 'memory'
+        loginExpiry?: number
+      }
+    }
+    talon?: {
+      authEndpoint?: string
+      cookie?: {
+        name?: string
+        httpOnly?: boolean
+        secure?: boolean
+        sameSite?: 'lax' | 'strict' | 'none'
+        maxAge?: number
+        path?: string
+      }
+    }
+  }
+  export const useCookie: (typeof import('nuxt/app'))['useCookie']
+  export const defineNuxtPlugin: (typeof import('nuxt/app'))['defineNuxtPlugin']
+  export const createError: (typeof import('h3'))['createError']
+  export const defineEventHandler: (typeof import('h3'))['defineEventHandler']
+  export const readBody: (typeof import('h3'))['readBody']
+  export const setCookie: (typeof import('h3'))['setCookie']
+  export const deleteCookie: (typeof import('h3'))['deleteCookie']
+}

package/dist/types.d.mts

@@ -0,0 +1,13 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { type TalonAuthClient, type TalonAuthClientInterface, type TalonAuthUser } from 'talon-auth'
+
+export { type UseTalonClientOptions } from '../dist/runtime/composables/use-talon.js'
+
+export { default } from './module.mjs'
+
+export { type TalonAuthModuleOptions, type TalonContext, type TalonCookieOptions, type TalonStore, type TalonStoreConfig } from './module.mjs'

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "talon-auth-nuxt",
+  "version": "0.13.1",
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev": "nuxt-module-build build --stub",
+    "prepublish": "pnpm build",
+    "test": "vitest --run"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.3.1",
+    "talon-auth": "^0.13.1"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^1.0.2",
+    "happy-dom": "^20.6.3",
+    "nuxt": "^4.3.1",
+    "vitest": "^3.2.4"
+  },
+  "gitHead": "05917231b2ce1b808f6955cf082ef8588252ecf3"
+}