@drmhse/authos-vue 0.2.3 → 0.2.5

package/README.md

@@ -3,462 +3,68 @@
 [![npm version](https://img.shields.io/npm/v/@drmhse/authos-vue)](https://www.npmjs.com/package/@drmhse/authos-vue)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-Vue 3 adapter for [AuthOS](https://authos.dev) - the multi-tenant authentication platform. Provides Vue composables, components, and Nuxt module.
+Vue 3 and Nuxt adapter for AuthOS.
 
-## Quick Start (5 minutes)
+Full documentation: [authos.dev/docs/packages/authos-vue/](https://authos.dev/docs/packages/authos-vue/)
+
+AI agent skills: [authos.dev/docs/ai-agent-skills/](https://authos.dev/docs/ai-agent-skills/) and [github.com/CkCreative/authos_skill](https://github.com/CkCreative/authos_skill)
+
+## Install
 
 ```bash
 npm install @drmhse/authos-vue
 ```
 
-Install the plugin and you're ready to go:
+## Quick start
 
 ```ts
-// main.ts
 import { createApp } from 'vue';
 import { createAuthOS } from '@drmhse/authos-vue';
 import App from './App.vue';
 
 const app = createApp(App);
 
-app.use(createAuthOS({
-  baseURL: 'https://sso.example.com',
-}));
+app.use(
+  createAuthOS({
+    baseURL: 'https://sso.example.com',
+  }),
+);
 
 app.mount('#app');
 ```
 
 ```vue
-<!-- App.vue -->
 <script setup>
 import { SignIn, SignedIn, SignedOut, UserButton } from '@drmhse/authos-vue';
 </script>
 
 <template>
   <SignedOut>
-    <SignIn @success="console.log('Welcome!')" />
+    <SignIn />
   </SignedOut>
   <SignedIn>
     <UserButton />
-    <p>You're signed in!</p>
   </SignedIn>
 </template>
 ```
 
-That's it. You now have:
-- Email/password authentication with MFA support
-- Automatic session management
-- User dropdown with logout
-- Conditional rendering based on auth state
-
-## Usage Modes
-
-AuthOS supports two usage modes:
-
-### Platform-Level Access
-
-For platform owners and administrators, use without `org`/`service`:
-
-```ts
-app.use(createAuthOS({
-  baseURL: 'https://sso.example.com',
-}));
-```
-
-### Multi-Tenant Access (Organizations)
-
-For tenant applications with OAuth support, add `org` and `service`:
-
-```ts
-app.use(createAuthOS({
-  baseURL: 'https://sso.example.com',
-  org: 'acme-corp',    // Organization slug
-  service: 'main-app', // Service slug  
-}));
-```
-
-### Using an Existing Client
-
-For advanced use cases, you can pass a pre-configured `SsoClient`:
-
-```ts
-import { SsoClient } from '@drmhse/sso-sdk';
-import { createAuthOS } from '@drmhse/authos-vue';
-
-// Create client with custom configuration
-const client = new SsoClient({
-  baseURL: 'https://sso.example.com',
-  storage: customStorage,
-});
-
-app.use(createAuthOS({ client }));
-```
-
-## OAuth / Social Login
-
-To use OAuth providers (GitHub, Google, Microsoft), configure your organization and service (see Multi-Tenant Access above):
+## Scoped tenant usage
 
 ```ts
-app.use(createAuthOS({
-  baseURL: 'https://sso.example.com',
-  org: 'my-org',           // Your organization slug
-  service: 'my-app',       // Your service slug
-  redirectUri: 'https://app.example.com/callback', // Optional
-}));
-```
-
-Then use individual OAuth buttons:
-
-```vue
-<script setup>
-import { OAuthButton } from '@drmhse/authos-vue';
-</script>
-
-<template>
-  <OAuthButton provider="github" />
-  <OAuthButton provider="google">Sign in with Google</OAuthButton>
-  <OAuthButton provider="microsoft" />
-</template>
-```
-
-## Components
-
-### SignIn
-
-Complete sign-in form with email/password authentication. Supports scoped slots for custom UI.
-
-```vue
-<script setup>
-import { SignIn } from '@drmhse/authos-vue';
-
-function handleSuccess() {
-  router.push('/dashboard');
-}
-</script>
-
-<template>
-  <SignIn @success="handleSuccess" @error="console.error" />
-</template>
-```
-
-**Events:**
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `@success` | - | Fired after successful login |
-| `@error` | `Error` | Fired on login error |
-
-**Scoped Slot:**
-```vue
-<SignIn v-slot="{ email, password, step, error, isSubmitting, updateEmail, updatePassword, submit }">
-  <form @submit.prevent="submit">
-    <input :value="email" @input="e => updateEmail(e.target.value)" />
-    <input :value="password" type="password" @input="e => updatePassword(e.target.value)" />
-    <button :disabled="isSubmitting">Sign In</button>
-    <p v-if="error">{{ error }}</p>
-  </form>
-</SignIn>
-```
-
-### SignUp
-
-Registration form for new users.
-
-```vue
-<SignUp @success="console.log('Check your email!')" @error="console.error" />
-```
-
-### MagicLinkSignIn
-
-Sign-in component for Magic Links (passwordless).
-
-```vue
-<MagicLinkSignIn @success="console.log('Magic link sent!')" />
-```
-
-### PasskeySignIn
-
-Sign-in component for Passkeys (WebAuthn).
-
-```vue
-<PasskeySignIn @success="console.log('Authenticated!')" />
-```
-
-### SignedIn / SignedOut
-
-Conditional rendering based on authentication state. Inspired by Clerk's API.
-
-```vue
-<SignedIn>
-  <!-- Only shown when user is logged in -->
-  <UserButton />
-</SignedIn>
-
-<SignedOut>
-  <!-- Only shown when user is logged out -->
-  <SignIn />
-</SignedOut>
-```
-
-### UserButton
-
-User menu button with avatar and logout.
-
-```vue
-<UserButton @logout="router.push('/')" />
-```
-
-### OrganizationSwitcher
-
-Dropdown to switch between organizations.
-
-When switching organizations, the SDK automatically issues new JWT tokens with the new organization context, enabling seamless multi-tenant switching without re-authentication.
-
-```vue
-<OrganizationSwitcher @switch="org => console.log('Switched to:', org.name)" />
-```
-
-### Protect
-
-Conditional rendering based on user permissions.
-
-```vue
-<Protect permission="admin:access">
-  <template #default>
-    <AdminDashboard />
-  </template>
-  <template #fallback>
-    <p>Access denied</p>
-  </template>
-</Protect>
-```
-
-### OAuthButton
-
-Individual OAuth provider button. Requires `org` and `service` in plugin options.
-
-```vue
-<OAuthButton provider="github" />
-<OAuthButton provider="google">Continue with Google</OAuthButton>
-```
-
-**Scoped Slot:**
-```vue
-<OAuthButton provider="github" v-slot="{ providerName, isConfigured, handleClick }">
-  <button @click="handleClick" :disabled="!isConfigured">
-    Continue with {{ providerName }}
-  </button>
-</OAuthButton>
-```
-
-## Composables
-
-### useAuthOS
-
-Access the AuthOS client, state, and configuration.
-
-```vue
-<script setup>
-import { useAuthOS } from '@drmhse/authos-vue';
-
-const { client, options, isAuthenticated, isLoading } = useAuthOS();
-
-async function handleLogout() {
-  await client.auth.logout();
-}
-</script>
-```
-
-### useUser
-
-Get the current user's profile.
-
-```vue
-<script setup>
-import { useUser } from '@drmhse/authos-vue';
-
-const { user, isLoading } = useUser();
-</script>
-
-<template>
-  <div v-if="isLoading">Loading...</div>
-  <div v-else>Welcome, {{ user?.email }}</div>
-</template>
-```
-
-### useOrganization
-
-Get and switch between organizations.
-
-```vue
-<script setup>
-import { useOrganization } from '@drmhse/authos-vue';
-
-const { currentOrganization, organizations, switchOrganization, isSwitching } = useOrganization();
-</script>
-
-<template>
-  <h3>{{ currentOrganization?.name }}</h3>
-  <ul>
-    <li v-for="org in organizations" :key="org.id">
-      <button @click="switchOrganization(org.slug)">{{ org.name }}</button>
-    </li>
-  </ul>
-</template>
-```
-
-### usePermission / useAnyPermission / useAllPermissions
-
-Check user permissions.
-
-```vue
-<script setup>
-import { usePermission, useAnyPermission, useAllPermissions } from '@drmhse/authos-vue';
-
-const canAccessAdmin = usePermission('admin:access');
-const canReadOrWrite = useAnyPermission(['read:data', 'write:data']);
-const hasFullAccess = useAllPermissions(['read:data', 'write:data', 'delete:data']);
-</script>
-
-<template>
-  <button v-if="canAccessAdmin">Admin Panel</button>
-</template>
-```
-
-## Nuxt Integration
-
-### Plugin Installation
-
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ['@drmhse/authos-vue/nuxt'],
-});
-```
-
-### Auth Middleware
-
-```ts
-// middleware/auth.ts
-import { authMiddleware } from '@drmhse/authos-vue/nuxt';
-
-export default authMiddleware({
-  redirectTo: '/login',
-});
-```
-
-Then use in your pages:
-
-```vue
-<script setup>
-definePageMeta({
-  middleware: ['auth'],
-});
-</script>
-
-<template>
-  <div>Protected page</div>
-</template>
-```
-
-### Server-Side Usage
-
-```ts
-// server/api/user.get.ts
-import { currentUser } from '@drmhse/authos-vue/nuxt';
-
-export default defineEventHandler(async (event) => {
-  const user = await currentUser(event);
-
-  if (!user) {
-    throw createError({
-      statusCode: 401,
-      message: 'Unauthorized',
-    });
-  }
-
-  return user;
-});
-```
-
-## Configuration Reference
-
-### createAuthOS Options
-
-| Option | Type | Required | Description |
-|--------|------|----------|-------------|
-| `baseURL` | `string` | ✅ | AuthOS API URL |
-| `org` | `string` | For OAuth | Organization slug for OAuth flows |
-| `service` | `string` | For OAuth | Service slug for OAuth flows |
-| `redirectUri` | `string` | - | OAuth redirect URI (defaults to origin + '/callback') |
-| `afterSignInUrl` | `string` | - | Redirect URL after sign-in |
-| `afterSignUpUrl` | `string` | - | Redirect URL after sign-up |
-| `storage` | `TokenStorage` | - | Custom token storage |
-| `autoRefresh` | `boolean` | - | Auto-refresh expired tokens (default: true) |
-| `initialToken` | `string` | - | SSR token for hydration |
-
-## Styling
-
-AuthOS components come with **polished default styling** out of the box, similar to best-in-class auth providers. The styling is fully customizable via the `appearance` option or by overriding CSS variables.
-
-### Customization
-
-You can customize the theme colors, fonts, and more by passing an `appearance` object to `createAuthOS`.
-
-```ts
-app.use(createAuthOS({
-  // ... other options
-  appearance: {
-    variables: {
-      colorPrimary: '#0066cc',
-      colorBackground: '#f5f5f5',
-      borderRadius: '0.25rem',
-      fontFamily: 'Inter, sans-serif',
-    },
-  },
-}));
-```
-
-### CSS Variables
-
-You can also override these CSS variables in your own stylesheet:
-
-```css
-:root {
-  --authos-color-primary: #0066cc;
-  --authos-border-radius: 4px;
-}
-```
-
-### Headless Styling
-
-If you prefer to completely style the components yourself, you can target the data attributes. The default styles have low specificity, so your CSS classes will easily override them.
-
-```css
-[data-authos-signin] { /* Container */ }
-[data-authos-field="email"] { /* Email field wrapper */ }
-[data-authos-field="password"] { /* Password field wrapper */ }
-[data-authos-submit] { /* Submit button */ }
-[data-authos-error] { /* Error message */ }
-[data-authos-oauth] { /* OAuth button */ }
-[data-authos-oauth][data-provider="github"] { /* GitHub button */ }
-[data-authos-divider] { /* "or" divider */ }
-[data-authos-magic-link] { /* Magic Link container */ }
-[data-authos-passkey] { /* Passkey container */ }
-```
-
-## Migration from v1
-
-If you're upgrading from v1, note the following breaking change:
-
-```diff
- app.use(createAuthOS({
--  baseUrl: 'https://sso.example.com',
-+  baseURL: 'https://sso.example.com',
- }));
+app.use(
+  createAuthOS({
+    baseURL: 'https://sso.example.com',
+    org: 'acme-corp',
+    service: 'main-app',
+    redirectUri: 'https://app.acme.com/callback',
+  }),
+);
 ```
 
-The `baseUrl` property has been renamed to `baseURL` (uppercase URL) for consistency with the React package and underlying SDK.
+## Includes
 
-## License
+- Plugin factory `createAuthOS`
+- Components such as `SignIn`, `SignUp`, `Callback`, `OAuthButton`, `Protect`, and `OrganizationSwitcher`
+- Composables for auth state, profile data, organizations, and permissions
 
-MIT © DRM HSE
+See the docs site for Nuxt details, slot APIs, and advanced integration patterns.

package/dist/chunk-5OCDR7QV.mjs

@@ -0,0 +1,68 @@
+// ../../node_modules/confbox/dist/_chunks/libs/detect-indent.mjs
+var e = /^(?:( )+|\t+)/;
+var t = `space`;
+function n(e2, n3, r3) {
+  return e2 && n3 === t && r3 === 1;
+}
+function r(r3, a3) {
+  let o3 = /* @__PURE__ */ new Map(), s2 = 0, c2, l;
+  for (let u of r3.split(/\n/g)) {
+    if (!u) continue;
+    let r4 = u.match(e);
+    if (r4 === null) s2 = 0, c2 = ``;
+    else {
+      let e2 = r4[0].length, u2 = r4[1] ? t : `tab`;
+      if (n(a3, u2, e2)) continue;
+      u2 !== c2 && (s2 = 0), c2 = u2;
+      let d = 1, f = 0, p = e2 - s2;
+      if (s2 = e2, p === 0) d = 0, f = 1;
+      else {
+        let e3 = Math.abs(p);
+        if (n(a3, u2, e3)) continue;
+        l = i(u2, e3);
+      }
+      let m = o3.get(l);
+      o3.set(l, m === void 0 ? [1, 0] : [m[0] + d, m[1] + f]);
+    }
+  }
+  return o3;
+}
+function i(e2, n3) {
+  return (e2 === t ? `s` : `t`) + String(n3);
+}
+function a(e2) {
+  return { type: e2[0] === `s` ? t : `tab`, amount: Number(e2.slice(1)) };
+}
+function o(e2) {
+  let t3, n3 = 0, r3 = 0;
+  for (let [i3, [a3, o3]] of e2) (a3 > n3 || a3 === n3 && o3 > r3) && (n3 = a3, r3 = o3, t3 = i3);
+  return t3;
+}
+function s(e2, n3) {
+  return (e2 === t ? ` ` : `	`).repeat(n3);
+}
+function c(e2) {
+  if (typeof e2 != `string`) throw TypeError(`Expected a string`);
+  let t3 = r(e2, true);
+  t3.size === 0 && (t3 = r(e2, false));
+  let n3 = o(t3), i3, c2 = 0, l = ``;
+  return n3 !== void 0 && ({ type: i3, amount: c2 } = a(n3), l = s(i3, c2)), { amount: c2, type: i3, indent: l };
+}
+
+// ../../node_modules/confbox/dist/_chunks/_format.mjs
+var t2 = /* @__PURE__ */ Symbol.for(`__confbox_fmt__`);
+var n2 = /^(\s+)/;
+var r2 = /(\s+)$/;
+function i2(e2, t3 = {}) {
+  return { sample: t3.indent === void 0 && t3.preserveIndentation !== false && e2.slice(0, t3?.sampleSize || 1024), whiteSpace: t3.preserveWhitespace === false ? void 0 : { start: n2.exec(e2)?.[0] || ``, end: r2.exec(e2)?.[0] || `` } };
+}
+function a2(e2, n3, r3) {
+  !n3 || typeof n3 != `object` || Object.defineProperty(n3, t2, { enumerable: false, configurable: true, writable: true, value: i2(e2, r3) });
+}
+function o2(n3, r3) {
+  if (!n3 || typeof n3 != `object` || !(t2 in n3)) return { indent: r3?.indent ?? 2, whitespace: { start: ``, end: `` } };
+  let i3 = n3[t2];
+  return { indent: r3?.indent || c(i3.sample || ``).indent, whitespace: i3.whiteSpace || { start: ``, end: `` } };
+}
+
+export { a2 as a, o2 as o };