@drmhse/authos-vue 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,335 @@
+# @drmhse/authos-vue
+
+[![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.
+
+## Installation
+
+```bash
+npm install @drmhse/authos-vue
+```
+
+Peer dependencies:
+```bash
+npm install vue
+```
+
+## Quick Start
+
+### Vue App
+
+Install the plugin and use the composables/components:
+
+```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.mount('#app');
+```
+
+### Nuxt App
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@drmhse/authos-vue/nuxt']
+});
+```
+
+## Components
+
+### SignIn
+
+Pre-built sign-in form with email/password and OAuth provider buttons.
+
+```vue
+<script setup lang="ts">
+import { SignIn } from '@drmhse/authos-vue';
+
+function handleSuccess() {
+  console.log('Logged in!');
+}
+
+function handleError(err: Error) {
+  console.error(err);
+}
+</script>
+
+<template>
+  <SignIn @success="handleSuccess" @error="handleError" />
+</template>
+```
+
+**Events:**
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `@success` | - | Fired after successful login |
+| `@error` | `Error` | Fired on login error |
+
+### SignUp
+
+Registration form for new users.
+
+```vue
+<script setup lang="ts">
+import { SignUp } from '@drmhse/authos-vue';
+</script>
+
+<template>
+  <SignUp />
+</template>
+```
+
+**Events:** Same as `SignIn`
+
+### UserButton
+
+User menu button that shows avatar/name and dropdown with profile/signout.
+
+```vue
+<script setup lang="ts">
+import { UserButton } from '@drmhse/authos-vue';
+</script>
+
+<template>
+  <header>
+    <UserButton />
+  </header>
+</template>
+```
+
+### OrganizationSwitcher
+
+Dropdown to switch between organizations (for multi-tenant users).
+
+```vue
+<script setup lang="ts">
+import { OrganizationSwitcher } from '@drmhse/authos-vue';
+</script>
+
+<template>
+  <aside>
+    <OrganizationSwitcher />
+  </aside>
+</template>
+```
+
+### Protect
+
+Conditional rendering based on user permissions.
+
+```vue
+<script setup lang="ts">
+import { Protect } from '@drmhse/authos-vue';
+</script>
+
+<template>
+  <Protect permission="admin:access">
+    <template #default>
+      <AdminDashboard />
+    </template>
+    <template #fallback>
+      <p>Access denied. Admins only.</p>
+    </template>
+  </Protect>
+</template>
+```
+
+**Props:**
+| Prop | Type | Description |
+|------|------|-------------|
+| `permission` | `string` | Required permission to access content |
+| `fallback` | `slot` | Shown when user lacks permission |
+| `default` | `slot` | Protected content |
+
+## Composables
+
+### useAuthOS
+
+Access the AuthOS client directly.
+
+```vue
+<script setup lang="ts">
+import { useAuthOS } from '@drmhse/authos-vue';
+
+const { client, isAuthenticated, isLoading } = useAuthOS();
+
+async function handleLogout() {
+  await client.auth.logout();
+}
+</script>
+
+<template>
+  <div v-if="isLoading">Loading...</div>
+  <div v-else-if="!isAuthenticated">Please log in</div>
+  <div v-else>
+    <button @click="handleLogout">Logout</button>
+  </div>
+</template>
+```
+
+**Returns:**
+| Property | Type | Description |
+|----------|------|-------------|
+| `client` | `SsoClient` | The AuthOS SDK client |
+| `isLoading` | `Ref<boolean>` | True while checking auth state |
+| `isAuthenticated` | `Ref<boolean>` | True if user is logged in |
+
+### useUser
+
+Get the current user's profile.
+
+```vue
+<script setup lang="ts">
+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>
+```
+
+**Returns:**
+| Property | Type | Description |
+|----------|------|-------------|
+| `user` | `Ref<UserProfile | null>` | Current user profile |
+| `isLoading` | `Ref<boolean>` | True while checking auth state |
+
+### useOrganization
+
+Get the current organization and list of organizations.
+
+```vue
+<script setup lang="ts">
+import { useOrganization } from '@drmhse/authos-vue';
+
+const { currentOrganization, organizations, switchOrganization } = useOrganization();
+</script>
+
+<template>
+  <div>
+    <h3>{{ currentOrganization?.name }}</h3>
+    <ul>
+      <li v-for="org in organizations" :key="org.id">
+        {{ org.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+```
+
+**Returns:**
+| Property | Type | Description |
+|----------|------|-------------|
+| `currentOrganization` | `Ref<Organization | null>` | Current organization |
+| `organizations` | `Ref<Organization[]>` | All user's organizations |
+| `switchOrganization` | `(slug: string) => Promise<void>` | Switch to a different org |
+| `isSwitching` | `Ref<boolean>` | True while switching |
+
+## Nuxt Module
+
+When using the Nuxt module, the plugin is auto-installed and provides additional server utilities:
+
+```vue
+<!-- app.vue -->
+<script setup lang="ts">
+// Plugin is auto-installed, composables work automatically
+import { useUser } from '@drmhse/authos-vue';
+
+const { user } = useUser();
+</script>
+
+<template>
+  <div v-if="user">
+    Welcome, {{ user.email }}
+  </div>
+</template>
+```
+
+### Nuxt Auth Middleware
+
+Protect pages with the 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;
+});
+```
+
+## SsoClient API
+
+The underlying client from `@drmhse/sso-sdk`. See [SDK docs](https://www.npmjs.com/package/@drmhse/sso-sdk) for full API.
+
+```ts
+const { client } = useAuthOS();
+
+// Authentication
+await client.auth.login({ email, password });
+await client.auth.logout();
+await client.auth.register({ email, password, org_slug });
+
+// User
+await client.user.getProfile();
+await client.user.updateProfile({ name });
+await client.user.changePassword({ old, new });
+
+// Organizations
+await client.organizations.list();
+await client.organizations.get(slug);
+
+// And more...
+```
+
+## License
+
+MIT © DRM HSE

package/dist/index.d.mts

@@ -19,6 +19,12 @@ interface AuthOSPluginOptions {
     baseUrl: string;
     storage?: TokenStorage;
     autoRefresh?: boolean;
+    /**
+     * Initial session token from server-side (for SSR hydration).
+     * When provided, skips the initial loading state on the client.
+     * Typically passed from cookies in Nuxt server components.
+     */
+    initialToken?: string;
 }
 declare const AUTH_OS_INJECTION_KEY: unique symbol;
 

package/dist/index.d.ts

@@ -19,6 +19,12 @@ interface AuthOSPluginOptions {
     baseUrl: string;
     storage?: TokenStorage;
     autoRefresh?: boolean;
+    /**
+     * Initial session token from server-side (for SSR hydration).
+     * When provided, skips the initial loading state on the client.
+     * Typically passed from cookies in Nuxt server components.
+     */
+    initialToken?: string;
 }
 declare const AUTH_OS_INJECTION_KEY: unique symbol;
 

package/dist/index.js

@@ -22,12 +22,22 @@ function createAuthOS(options) {
   };
   const client = new ssoSdk.SsoClient({
     baseURL: options.baseUrl,
-    storage: getStorage()
+    storage: getStorage(),
+    token: options.initialToken
+    // Pass initial token if provided
   });
+  let hasSetInitialToken = false;
+  const setInitialToken = async () => {
+    if (options.initialToken && !hasSetInitialToken) {
+      await client.setSession({ access_token: options.initialToken });
+      hasSetInitialToken = true;
+    }
+  };
   const state = vue.reactive({
     user: null,
     isAuthenticated: false,
-    isLoading: true,
+    isLoading: !options.initialToken,
+    // Skip loading if we have initial token
     currentOrganization: null,
     organizations: []
   });
@@ -37,6 +47,9 @@ function createAuthOS(options) {
   };
   return {
     install(app) {
+      vue.nextTick(() => {
+        setInitialToken();
+      });
       client.onAuthStateChange(async (isAuthenticated) => {
         state.isAuthenticated = isAuthenticated;
         state.isLoading = false;

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { AUTH_OS_INJECTION_KEY, useAuthOS } from './chunk-OGRUDANK.mjs';
 export { AUTH_OS_INJECTION_KEY, useAuthOS } from './chunk-OGRUDANK.mjs';
 import './chunk-6DZX6EAA.mjs';
-import { defineComponent, reactive, provide, onMounted, onUnmounted, h, ref, computed, inject } from 'vue';
+import { defineComponent, reactive, provide, onMounted, onUnmounted, h, ref, computed, inject, nextTick } from 'vue';
 import { SsoClient, BrowserStorage, MemoryStorage, SsoApiError } from '@drmhse/sso-sdk';
 export { AuthErrorCodes, BrowserStorage, MemoryStorage, SsoApiError } from '@drmhse/sso-sdk';
 
@@ -18,12 +18,22 @@ function createAuthOS(options) {
   };
   const client = new SsoClient({
     baseURL: options.baseUrl,
-    storage: getStorage()
+    storage: getStorage(),
+    token: options.initialToken
+    // Pass initial token if provided
   });
+  let hasSetInitialToken = false;
+  const setInitialToken = async () => {
+    if (options.initialToken && !hasSetInitialToken) {
+      await client.setSession({ access_token: options.initialToken });
+      hasSetInitialToken = true;
+    }
+  };
   const state = reactive({
     user: null,
     isAuthenticated: false,
-    isLoading: true,
+    isLoading: !options.initialToken,
+    // Skip loading if we have initial token
     currentOrganization: null,
     organizations: []
   });
@@ -33,6 +43,9 @@ function createAuthOS(options) {
   };
   return {
     install(app) {
+      nextTick(() => {
+        setInitialToken();
+      });
       client.onAuthStateChange(async (isAuthenticated) => {
         state.isAuthenticated = isAuthenticated;
         state.isLoading = false;

package/dist/nuxt.d.mts

@@ -3,6 +3,26 @@ import * as nuxt_app from 'nuxt/app';
 
 interface AuthOSModuleOptions {
     baseUrl: string;
+    /**
+     * Cookie name for storing the access token
+     * @default 'authos_token'
+     */
+    tokenCookie?: string;
+    /**
+     * Cookie domain (optional)
+     * Use this for subdomain-wide auth
+     */
+    domain?: string;
+    /**
+     * Cookie path
+     * @default '/'
+     */
+    path?: string;
+    /**
+     * SameSite cookie attribute
+     * @default 'lax'
+     */
+    sameSite?: 'strict' | 'lax' | 'none';
 }
 declare const _default: _nuxt_schema.NuxtModule<AuthOSModuleOptions, AuthOSModuleOptions, false>;
 

package/dist/nuxt.d.ts

@@ -3,6 +3,26 @@ import * as nuxt_app from 'nuxt/app';
 
 interface AuthOSModuleOptions {
     baseUrl: string;
+    /**
+     * Cookie name for storing the access token
+     * @default 'authos_token'
+     */
+    tokenCookie?: string;
+    /**
+     * Cookie domain (optional)
+     * Use this for subdomain-wide auth
+     */
+    domain?: string;
+    /**
+     * Cookie path
+     * @default '/'
+     */
+    path?: string;
+    /**
+     * SameSite cookie attribute
+     * @default 'lax'
+     */
+    sameSite?: 'strict' | 'lax' | 'none';
 }
 declare const _default: _nuxt_schema.NuxtModule<AuthOSModuleOptions, AuthOSModuleOptions, false>;
 

package/dist/nuxt.js

@@ -10464,12 +10464,19 @@ var module_default = defineNuxtModule({
     }
   },
   defaults: {
-    baseUrl: ""
+    baseUrl: "",
+    tokenCookie: "authos_token",
+    path: "/",
+    sameSite: "lax"
   },
   setup(options, nuxt) {
     const resolver = createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('nuxt.js', document.baseURI).href)));
     nuxt.options.runtimeConfig.public.authOS = {
-      baseUrl: options.baseUrl
+      baseUrl: options.baseUrl,
+      tokenCookie: options.tokenCookie,
+      domain: options.domain,
+      path: options.path,
+      sameSite: options.sameSite
     };
     addPlugin(resolver.resolve("./runtime/plugin"));
     addImports([

package/dist/nuxt.mjs

@@ -7953,12 +7953,19 @@ var module_default = defineNuxtModule({
     }
   },
   defaults: {
-    baseUrl: ""
+    baseUrl: "",
+    tokenCookie: "authos_token",
+    path: "/",
+    sameSite: "lax"
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     nuxt.options.runtimeConfig.public.authOS = {
-      baseUrl: options.baseUrl
+      baseUrl: options.baseUrl,
+      tokenCookie: options.tokenCookie,
+      domain: options.domain,
+      path: options.path,
+      sameSite: options.sameSite
     };
     addPlugin(resolver.resolve("./runtime/plugin"));
     addImports([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drmhse/authos-vue",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Vue and Nuxt adapter for AuthOS authentication",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -35,7 +35,6 @@
     "dev": "tsup --watch",
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint src --ext .ts,.vue",
-    "test:ct": "playwright test -c playwright-ct.config.ts --reporter=list",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -53,8 +52,6 @@
     "vue": ">=3.4.0"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "^1.48.0",
-    "@playwright/test": "^1.48.0",
     "@types/node": "^25.0.3",
     "nuxt": "^3.14.0",
     "tsup": "^8.3.5",