@cboxdk/id-nuxt 0.1.0 → 0.2.0

package/README.md

@@ -5,8 +5,11 @@ Nuxt module for [Cbox ID](https://github.com/cboxdk/laravel-id). It wires the
 drop-in **sign-in / callback / sign-out** routes, a sealed session, and a
 `useCboxUser()` composable — add authentication with one module entry.
 
-Pair it with [`@cboxdk/id-vue`](https://github.com/cboxdk/id-vue) for the
-`<CboxUserButton>` and other widgets.
+It also bundles the [`@cboxdk/id-vue`](https://github.com/cboxdk/id-vue) widgets
+(`<CboxUserButton>` and friends) as **auto-imported, globally-provided** components:
+no import, no `<CboxIdProvider>` wrapper. The module provides their context app-wide
+from the session and injects the stylesheet through `useHead`, so they render
+correctly during SSR.
 
 ## Install
 
@@ -45,9 +48,32 @@ The module registers these routes for you:
 | `GET /auth/sign-in` | starts login (accepts `?redirect=/where/next`) |
 | `GET /auth/callback` | verifies the login and stores the session |
 | `GET /auth/sign-out` | clears the session and logs out |
+| `GET /auth/account` | redirects to the hosted profile page (accepts `?return_to=`) |
 | `GET /api/_cbox/user` | the current user as JSON (used internally) |
 
-Link to them and read the user reactively anywhere:
+### Widgets
+
+Drop the widgets in anywhere — they're auto-imported and already wired to the
+session, so this is the whole integration:
+
+```vue
+<template>
+  <header>
+    <!-- avatar + account menu when signed in, a sign-in button when not -->
+    <CboxUserButton />
+  </header>
+</template>
+```
+
+Also available: `<CboxSignInButton>`, `<CboxSignOutButton>`, `<CboxUserProfileCard>`,
+`<CboxOrganizationBadge>`, and `<CboxIdProvider>` (for a scoped override). Their
+"Manage account" links point at `GET /auth/account`; "Sign out" at `logoutPath`.
+Theme them with the `appearance` option (below). Set `components: false` to opt out
+and wire `@cboxdk/id-vue` yourself.
+
+### Composable
+
+Or read the user reactively and build your own UI:
 
 ```vue
 <script setup lang="ts">
@@ -80,8 +106,11 @@ export default defineNuxtRouteMiddleware(() => {
 |---|---|---|
 | `issuer` / `clientId` / `clientSecret` / `redirectUri` | from env | the Cbox ID connection |
 | `scopes` | `openid profile email` | requested at login |
-| `accountPath` | `/settings` | hosted profile page path |
+| `accountPath` | `/settings` | hosted profile page path on the instance |
 | `loginPath` / `callbackPath` / `logoutPath` | `/auth/*` | override the route paths |
+| `profilePath` | `/auth/account` | app route that redirects to the hosted profile |
+| `appearance` | `{}` | widget theming (`accent`, `accentForeground`, `radius`, `fontFamily`) |
+| `components` | `true` | auto-register the `@cboxdk/id-vue` widgets globally |
 
 ## Scope
 

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { CboxWidgetAppearance } from '@cboxdk/id-vue';
 
 interface ModuleOptions {
     /** Base URL of the Cbox ID instance (or set CBOX_ID_ISSUER). */
@@ -19,11 +20,30 @@ interface ModuleOptions {
     callbackPath?: string;
     /** Route that signs out. Defaults to /auth/sign-out. */
     logoutPath?: string;
+    /**
+     * Route that redirects to the instance's hosted account/profile page (what the
+     * widgets' "Manage account" links point at). Defaults to /auth/account.
+     */
+    profilePath?: string;
+    /** Theming applied to the auto-provided widgets. */
+    appearance?: CboxWidgetAppearance;
+    /**
+     * Auto-register the `@cboxdk/id-vue` widget components (`<CboxUserButton>` etc.)
+     * as global components and wire their context app-wide. Defaults to `true`.
+     */
+    components?: boolean;
 }
 /**
- * Nuxt module for Cbox ID. Registers the sign-in / callback / sign-out routes and a
- * `useCboxUser()` composable, all backed by @cboxdk/id-js. Configure it under the
- * `cboxId` key or via environment variables.
+ * Nuxt module for Cbox ID. Wires the whole embeddable-identity story into a Nuxt app:
+ *
+ * - server routes for sign-in / callback / sign-out / hosted-profile redirect, backed
+ *   by `@cboxdk/id-js` and a sealed h3 session;
+ * - a `useCboxUser()` composable, SSR-hydrated from that session;
+ * - the `@cboxdk/id-vue` widgets (`<CboxUserButton>` and friends) as global,
+ *   auto-imported components, provided their context app-wide so they work with no
+ *   `<CboxIdProvider>` boilerplate — SSR-safe, stylesheet injected via `useHead`.
+ *
+ * Configure it under the `cboxId` key or via environment variables.
  */
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.1.0",
+  "version": "0.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,6 +1,14 @@
-import { defineNuxtModule, createResolver, addServerHandler, addImportsDir, addPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addServerHandler, addImportsDir, addPlugin, addComponent } from '@nuxt/kit';
 import { defu } from 'defu';
 
+const WIDGET_COMPONENTS = [
+  "CboxIdProvider",
+  "CboxSignInButton",
+  "CboxSignOutButton",
+  "CboxUserButton",
+  "CboxUserProfileCard",
+  "CboxOrganizationBadge"
+];
 const module$1 = defineNuxtModule({
   meta: {
     name: "@cboxdk/id-nuxt",
@@ -11,7 +19,9 @@ const module$1 = defineNuxtModule({
     accountPath: "/settings",
     loginPath: "/auth/sign-in",
     callbackPath: "/auth/callback",
-    logoutPath: "/auth/sign-out"
+    logoutPath: "/auth/sign-out",
+    profilePath: "/auth/account",
+    components: true
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
@@ -32,10 +42,11 @@ const module$1 = defineNuxtModule({
       {
         loginPath: options.loginPath,
         logoutPath: options.logoutPath,
-        accountPath: options.accountPath
+        profilePath: options.profilePath,
+        appearance: options.appearance ?? {}
       }
     );
-    nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
+    nuxt.options.build.transpile.push(resolver.resolve("./runtime"), "@cboxdk/id-vue");
     addServerHandler({
       route: options.loginPath,
       method: "get",
@@ -51,6 +62,11 @@ const module$1 = defineNuxtModule({
       method: "get",
       handler: resolver.resolve("./runtime/server/routes/sign-out.get")
     });
+    addServerHandler({
+      route: options.profilePath,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/routes/account.get")
+    });
     addServerHandler({
       route: "/api/_cbox/user",
       method: "get",
@@ -58,6 +74,11 @@ const module$1 = defineNuxtModule({
     });
     addImportsDir(resolver.resolve("./runtime/composables"));
     addPlugin(resolver.resolve("./runtime/plugin"));
+    if (options.components) {
+      for (const name of WIDGET_COMPONENTS) {
+        addComponent({ name, export: name, filePath: "@cboxdk/id-vue", mode: "all" });
+      }
+    }
   }
 });
 

package/dist/runtime/plugin.d.ts

@@ -1,3 +1,8 @@
-/** Hydrate the current user from the server session once, on app start. */
+/**
+ * Hydrate the current user from the server session, then provide the widget context
+ * app-wide so `@cboxdk/id-vue` components work anywhere without a `<CboxIdProvider>`.
+ * Runs on both server and client (so SSR renders the signed-in state), and injects
+ * the widget stylesheet via `useHead` — SSR-safe, no `document` access at import time.
+ */
 declare const _default: any;
 export default _default;

package/dist/runtime/plugin.js

@@ -1,13 +1,26 @@
-import { defineNuxtPlugin, useRequestFetch } from "#imports";
+import { defineNuxtPlugin, useHead, useRequestFetch, useRuntimeConfig } from "#imports";
+import { computed } from "vue";
+import { CSS, CboxIdKey, STYLE_ID } from "@cboxdk/id-vue";
 import { useCboxUser } from "./composables/useCboxUser.js";
-export default defineNuxtPlugin(async () => {
+export default defineNuxtPlugin(async (nuxtApp) => {
   const user = useCboxUser();
-  if (user.value !== null) {
-    return;
-  }
-  try {
-    user.value = await useRequestFetch()("/api/_cbox/user");
-  } catch {
-    user.value = null;
+  if (user.value === null) {
+    try {
+      user.value = await useRequestFetch()("/api/_cbox/user");
+    } catch {
+      user.value = null;
+    }
   }
+  const config = useRuntimeConfig().public.cboxId;
+  const appearance = config.appearance ?? {};
+  const urls = {
+    signIn: config.loginPath,
+    signOut: config.logoutPath,
+    profile: config.profilePath
+  };
+  nuxtApp.vueApp.provide(
+    CboxIdKey,
+    computed(() => ({ user: user.value, urls, appearance }))
+  );
+  useHead({ style: [{ id: STYLE_ID, key: STYLE_ID, innerHTML: CSS }] });
 });

package/dist/runtime/server/routes/account.get.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Redirect to the instance's hosted account/profile page (self-service password,
+ * MFA, passkeys, sessions). `return_to` is honoured so the page can link back; it
+ * defaults to the app's origin.
+ */
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<void>>;
+export default _default;

package/dist/runtime/server/routes/account.get.js

@@ -0,0 +1,8 @@
+import { defineEventHandler, getQuery, getRequestURL, sendRedirect } from "h3";
+import { getCboxClient } from "../utils/client.js";
+export default defineEventHandler((event) => {
+  const client = getCboxClient(event);
+  const returnTo = getQuery(event).return_to;
+  const origin = getRequestURL(event).origin;
+  return sendRedirect(event, client.profileUrl(typeof returnTo === "string" ? returnTo : origin));
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cboxdk/id-nuxt",
-  "version": "0.1.0",
-  "description": "Nuxt module for Cbox ID — drop-in sign-in / callback / sign-out routes and session handling built on @cboxdk/id-js. Add authentication to a Nuxt app with one module entry.",
+  "version": "0.2.0",
+  "description": "Nuxt module for Cbox ID \u2014 drop-in sign-in / callback / sign-out routes and session handling built on @cboxdk/id-js. Add authentication to a Nuxt app with one module entry.",
   "type": "module",
   "license": "MIT",
   "author": "Sylvester Damgaard <sn@cbox.dk>",
@@ -42,17 +42,26 @@
   "scripts": {
     "prepare-types": "nuxt-module-build prepare",
     "build": "nuxt-module-build build",
-    "check": "npm run prepare-types && npm run build"
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check": "npm run prepare-types && npm run build && npm run test"
   },
   "dependencies": {
-    "@cboxdk/id-js": "^0.1.0",
+    "@cboxdk/id-js": "^0.2.0",
+    "@cboxdk/id-vue": "^0.2.0",
     "@nuxt/kit": "^3.0.0 || ^4.0.0",
     "defu": "^6.1.0",
     "h3": "^1.13.0"
   },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
   "devDependencies": {
     "@nuxt/module-builder": "^1.0.0",
     "@nuxt/schema": "^3.0.0 || ^4.0.0",
-    "typescript": "^5.9.2"
+    "nuxt": "^3.0.0",
+    "typescript": "^5.9.2",
+    "vitest": "^4.1.0",
+    "vue": "^3.5.0"
   }
 }