@meistrari/auth-nuxt 2.1.3 → 2.2.0

package/README.md

@@ -54,18 +54,20 @@ const token = await getToken()
 
 // Sign out
 await signOut(() => {
-  console.log('User signed out')
+    console.log('User signed out')
 })
 </script>
 
 <template>
-  <div v-if="user">
-    Welcome, {{ user.name }}!
-    <button @click="signOut">Sign Out</button>
-  </div>
-  <div v-else>
-    Please sign in
-  </div>
+    <div v-if="user">
+        Welcome, {{ user.name }}!
+        <button @click="signOut">
+            Sign Out
+        </button>
+    </div>
+    <div v-else>
+        Please sign in
+    </div>
 </template>
 ```
 
@@ -120,11 +122,11 @@ Manages organizations, members, invitations, and teams.
 ```vue
 <script setup>
 const {
-  activeOrganization,
-  activeMember,
-  getActiveOrganization,
-  setActiveOrganization,
-  inviteUserToOrganization
+    activeOrganization,
+    activeMember,
+    getActiveOrganization,
+    setActiveOrganization,
+    inviteUserToOrganization
 } = useTelaOrganization()
 
 // Get the active organization
@@ -135,16 +137,16 @@ await setActiveOrganization('org-id')
 
 // Invite a user
 await inviteUserToOrganization({
-  userEmail: 'user@example.com',
-  role: 'member'
+    userEmail: 'user@example.com',
+    role: 'member'
 })
 </script>
 
 <template>
-  <div v-if="activeOrganization">
-    <h2>{{ activeOrganization.name }}</h2>
-    <p>{{ activeOrganization.members.length }} members</p>
-  </div>
+    <div v-if="activeOrganization">
+        <h2>{{ activeOrganization.name }}</h2>
+        <p>{{ activeOrganization.members.length }} members</p>
+    </div>
 </template>
 ```
 
@@ -216,9 +218,9 @@ Manages API keys for programmatic access.
 ```vue
 <script setup>
 const {
-  listApiKeys,
-  createApiKey,
-  deleteApiKey
+    listApiKeys,
+    createApiKey,
+    deleteApiKey
 } = useTelaApiKey()
 
 // List all API keys
@@ -226,10 +228,10 @@ const apiKeys = await listApiKeys()
 
 // Create a new API key
 const newKey = await createApiKey({
-  name: 'Production API Key',
-  expiresIn: '90d',
-  prefix: 'prod',
-  metadata: { environment: 'production' }
+    name: 'Production API Key',
+    expiresIn: '90d',
+    prefix: 'prod',
+    metadata: { environment: 'production' }
 })
 
 // Delete an API key
@@ -237,10 +239,12 @@ await deleteApiKey('key-id')
 </script>
 
 <template>
-  <div v-for="key in apiKeys" :key="key.id">
-    <span>{{ key.name }}</span>
-    <button @click="deleteApiKey(key.id)">Delete</button>
-  </div>
+    <div v-for="key in apiKeys" :key="key.id">
+        <span>{{ key.name }}</span>
+        <button @click="deleteApiKey(key.id)">
+            Delete
+        </button>
+    </div>
 </template>
 ```
 

package/dist/module.d.mts

@@ -14,7 +14,7 @@ interface ModuleOptions {
         dashboardUrl: string;
         /** The ID of the application to authenticate with */
         applicationId: string;
-        /** The redirect URI to redirect to after authentication. Must be registered in the application's settings. */
+        /** The authentication callback URL. Usually `{your-app-url}/auth/callback` */
         redirectUri: string;
         /** Path to redirect to when authentication is required (default: '/login') */
         loginPath?: string;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/auth-nuxt",
   "configKey": "telaAuth",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addImports, addPlugin, extendPages, addComponent, addServerImportsDir, addServerHandler } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addImports, addComponent, addServerImportsDir, addServerHandler, addPlugin } from '@nuxt/kit';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -18,14 +18,6 @@ const module$1 = defineNuxtModule({
         as: "useTelaApplicationAuth",
         from: resolver.resolve("runtime/composables/application-auth")
       });
-      addPlugin(resolver.resolve("./runtime/plugins/application-token-refresh"));
-      extendPages((pages) => {
-        pages.unshift({
-          name: "auth-callback",
-          path: "/auth/callback",
-          file: resolver.resolve("./runtime/pages/callback.vue")
-        });
-      });
       addComponent({
         name: "TelaRole",
         filePath: resolver.resolve("./runtime/components/tela-role.vue"),
@@ -37,8 +29,6 @@ const module$1 = defineNuxtModule({
           path: resolver.resolve("./runtime/types/page-meta.d.ts")
         });
       });
-      addPlugin(resolver.resolve("./runtime/plugins/auth-guard"));
-      addPlugin(resolver.resolve("./runtime/plugins/directives"));
       addServerImportsDir(resolver.resolve("./runtime/server/utils"));
       if (!options.skipServerMiddleware) {
         addServerHandler({
@@ -46,6 +36,39 @@ const module$1 = defineNuxtModule({
           handler: resolver.resolve("./runtime/server/middleware/application-auth")
         });
       }
+      addServerHandler({
+        route: "/auth/callback",
+        handler: resolver.resolve("./runtime/server/routes/auth/callback"),
+        method: "get"
+      });
+      addServerHandler({
+        route: "/auth/login",
+        handler: resolver.resolve("./runtime/server/routes/auth/login"),
+        method: "post"
+      });
+      addServerHandler({
+        route: "/auth/refresh",
+        handler: resolver.resolve("./runtime/server/routes/auth/refresh"),
+        method: "post"
+      });
+      addServerHandler({
+        route: "/auth/logout",
+        handler: resolver.resolve("./runtime/server/routes/auth/logout"),
+        method: "post"
+      });
+      addServerHandler({
+        route: "/auth/organizations",
+        handler: resolver.resolve("./runtime/server/routes/auth/organizations"),
+        method: "get"
+      });
+      addServerHandler({
+        route: "/auth/switch-organization",
+        handler: resolver.resolve("./runtime/server/routes/auth/switch-organization"),
+        method: "post"
+      });
+      addPlugin(resolver.resolve("./runtime/plugins/application-token-refresh"));
+      addPlugin(resolver.resolve("./runtime/plugins/auth-guard"));
+      addPlugin(resolver.resolve("./runtime/plugins/directives"));
       return;
     }
     if (!options.skipServerMiddleware) {

package/dist/runtime/components/tela-role.vue

@@ -1,15 +1,15 @@
 <script setup>
 import { useTelaApplicationAuth } from "../composables/application-auth";
-const { user } = useTelaApplicationAuth();
 defineProps({
   allowedRoles: { type: Array, required: true }
 });
+const { user } = useTelaApplicationAuth();
 </script>
 
 <template>
-  <template v-if="user">
-    <slot v-if="user.role && allowedRoles.includes(user.role)" :role="user.role" />
-    <slot v-else name="not-authorized" :role="user.role" />
-  </template>
-  <slot v-else name="logged-out" />
+    <template v-if="user">
+        <slot v-if="user.role && allowedRoles.includes(user.role)" :role="user.role" />
+        <slot v-else name="not-authorized" :role="user.role" />
+    </template>
+    <slot v-else name="logged-out" />
 </template>

package/dist/runtime/composables/application-auth.d.ts

@@ -1,3 +1,11 @@
+type RawOrganization = {
+    title: string;
+    id: string;
+    createdAt: Date;
+    avatarUrl: string | null;
+    metadata: string | null;
+    slug: string | null;
+};
 /**
  * Composable for managing Tela application authentication with OAuth 2.0 PKCE flow
  *
@@ -36,8 +44,9 @@ export declare function useTelaApplicationAuth(): {
     login: () => Promise<void>;
     logout: () => Promise<void>;
     initSession: () => Promise<void>;
-    getAvailableOrganizations: () => Promise<import("@meistrari/auth-core").Organization[]>;
+    getAvailableOrganizations: () => Promise<RawOrganization[]>;
     switchOrganization: (organizationId: string) => Promise<void>;
+    refreshToken: () => Promise<void>;
     user: import("vue").Ref<{
         id: string;
         createdAt: Date;
@@ -69,3 +78,4 @@ export declare function useTelaApplicationAuth(): {
     } | null>;
     activeOrganization: import("vue").Ref<Omit<import("@meistrari/auth-core").FullOrganization, "members" | "invitations" | "teams"> | null, Omit<import("@meistrari/auth-core").FullOrganization, "members" | "invitations" | "teams"> | null>;
 };
+export {};

package/dist/runtime/composables/application-auth.js

@@ -1,38 +1,8 @@
-import { navigateTo, useCookie, useRoute, useRuntimeConfig } from "#app";
-import { AuthorizationFlowError, isTokenExpired, RefreshTokenExpiredError } from "@meistrari/auth-core";
-import { createNuxtAuthClient } from "../shared.js";
+import { navigateTo, useCookie, useRuntimeConfig } from "#app";
+import { AuthorizationFlowError, isTokenExpired, RefreshTokenExpiredError, UserNotLoggedInError } from "@meistrari/auth-core";
 import { useApplicationSessionState } from "./state.js";
-const SEVEN_DAYS = 60 * 60 * 24 * 7;
 const FIFTEEN_MINUTES = 60 * 15;
 const ONE_MINUTE = 60 * 1e3;
-function verifier(stateKey) {
-  return `code_verifier_${stateKey}`;
-}
-function hexEncode(bytes) {
-  return Array.from(bytes).map((b) => b.toString(16).padStart(2, "0")).join("");
-}
-function generateStateKey(query) {
-  if (query.state && typeof query.state === "string") {
-    return query.state;
-  }
-  const array = new Uint8Array(8);
-  crypto.getRandomValues(array);
-  return hexEncode(array);
-}
-function generateCodeVerifier() {
-  const array = new Uint8Array(32);
-  crypto.getRandomValues(array);
-  return base64UrlEncode(array);
-}
-async function generateCodeChallenge(verifier2) {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(verifier2);
-  const digest = await crypto.subtle.digest("SHA-256", data);
-  return base64UrlEncode(new Uint8Array(digest));
-}
-function base64UrlEncode(bytes) {
-  return btoa(String.fromCharCode(...bytes)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-}
 function mapOrganization(organization) {
   return {
     name: organization.title,
@@ -45,18 +15,11 @@ function mapOrganization(organization) {
 }
 export function useTelaApplicationAuth() {
   const appConfig = useRuntimeConfig().public.telaAuth;
-  const query = useRoute().query;
   const accessTokenCookie = useCookie("tela-access-token", {
-    secure: true,
+    secure: !import.meta.dev,
     sameSite: "lax",
     maxAge: FIFTEEN_MINUTES
   });
-  const refreshTokenCookie = useCookie("tela-refresh-token", {
-    secure: true,
-    sameSite: "lax",
-    maxAge: SEVEN_DAYS
-  });
-  const authClient = createNuxtAuthClient(appConfig.apiUrl, () => null, () => refreshTokenCookie.value ?? null);
   const state = useApplicationSessionState();
   if (!appConfig.application?.dashboardUrl) {
     throw new Error(
@@ -78,100 +41,61 @@ export function useTelaApplicationAuth() {
     if (import.meta.server) {
       throw new AuthorizationFlowError("The login function can only be called on the client side.");
     }
-    if (typeof localStorage === "undefined") {
-      throw new AuthorizationFlowError("localStorage is not available. The login function must be called on the client side.");
-    }
-    const codeVerifier = generateCodeVerifier();
-    const codeChallenge = await generateCodeChallenge(codeVerifier);
-    const stateKey = generateStateKey(query);
-    localStorage.setItem(verifier(stateKey), codeVerifier);
+    const { state: stateKey, challenge: codeChallenge } = await $fetch("/auth/login", { method: "POST" });
     const url = new URL("/applications/login", appConfig.application?.dashboardUrl);
     url.searchParams.set("application_id", applicationId);
     url.searchParams.set("code_challenge", codeChallenge);
     url.searchParams.set("redirect_uri", redirectUri);
     url.searchParams.set("state", stateKey);
-    navigateTo(url.toString(), { external: true });
+    await navigateTo(url.toString(), { external: true });
   }
   async function logout() {
-    accessTokenCookie.value = null;
-    refreshTokenCookie.value = null;
     state.user.value = null;
     state.activeOrganization.value = null;
-    if (typeof localStorage !== "undefined") {
-      for (const key in localStorage) {
-        if (key.startsWith("code_verifier_")) {
-          localStorage.removeItem(key);
-        }
-      }
-    }
-  }
-  async function exchangeCodeForToken() {
-    if (import.meta.server) {
-      throw new AuthorizationFlowError("The exchangeCodeForToken function can only be called on the client side.");
-    }
-    const code = query.code;
-    const stateKey = query.state;
-    if (!code) {
-      throw new AuthorizationFlowError("Authorization code not found in query parameters");
-    }
-    if (!stateKey) {
-      throw new AuthorizationFlowError("State parameter not found in query parameters");
-    }
-    if (typeof localStorage === "undefined") {
-      throw new AuthorizationFlowError("localStorage is not available");
-    }
-    const codeVerifierKey = verifier(stateKey);
-    const codeVerifier = localStorage.getItem(codeVerifierKey);
-    if (!codeVerifier) {
-      throw new AuthorizationFlowError("Code verifier not found. This may indicate a CSRF attack or expired session.");
-    }
-    try {
-      const { accessToken, refreshToken: refreshToken2, user, organization } = await authClient.application.completeAuthorizationFlow(code, codeVerifier);
-      accessTokenCookie.value = accessToken;
-      refreshTokenCookie.value = refreshToken2;
-      state.user.value = user;
-      state.activeOrganization.value = mapOrganization(organization);
-    } finally {
-      localStorage.removeItem(codeVerifierKey);
-    }
+    await $fetch("/auth/logout", { method: "POST" });
   }
   async function refreshToken() {
-    if (!refreshTokenCookie.value) {
+    try {
+      const result = await $fetch("/auth/refresh", {
+        method: "POST"
+      });
+      state.user.value = result.user;
+      state.activeOrganization.value = mapOrganization(result.organization);
+    } catch (error) {
+      console.error("[Auth Refresh] Failed to refresh token:", error);
       throw new RefreshTokenExpiredError();
     }
-    const { accessToken, refreshToken: refreshToken2, user, organization } = await authClient.application.refreshAccessToken(refreshTokenCookie.value);
-    accessTokenCookie.value = accessToken;
-    refreshTokenCookie.value = refreshToken2;
-    state.user.value = user;
-    state.activeOrganization.value = mapOrganization(organization);
   }
   async function initSession() {
-    const code = query.code;
-    if (code) {
-      await exchangeCodeForToken();
-    }
-    if (!accessTokenCookie.value && !refreshTokenCookie.value) {
-      throw new RefreshTokenExpiredError();
+    if (!accessTokenCookie.value) {
+      throw new UserNotLoggedInError("No access token found in cookies");
     }
     const isExpiredOrClose = accessTokenCookie.value ? isTokenExpired(accessTokenCookie.value, ONE_MINUTE) : true;
-    if (isExpiredOrClose && !refreshTokenCookie.value) {
-      await logout();
-      throw new RefreshTokenExpiredError();
-    }
-    if (isExpiredOrClose && refreshTokenCookie.value) {
+    if (isExpiredOrClose) {
       await refreshToken();
     }
   }
   async function getAvailableOrganizations() {
-    const { organizations } = await authClient.application.listCandidateOrganizations(applicationId);
-    return organizations;
+    try {
+      const result = await $fetch("/auth/organizations", { method: "GET" });
+      return result.organizations;
+    } catch (error) {
+      console.error("[Auth Orgs] Failed to list organizations:", error);
+      throw error;
+    }
   }
   async function switchOrganization(organizationId) {
-    const { accessToken, refreshToken: refreshToken2, user, organization } = await authClient.application.switchOrganization(organizationId, accessTokenCookie.value);
-    accessTokenCookie.value = accessToken;
-    refreshTokenCookie.value = refreshToken2;
-    state.user.value = user;
-    state.activeOrganization.value = mapOrganization(organization);
+    try {
+      const result = await $fetch("/auth/switch-organization", {
+        method: "POST",
+        body: { organizationId }
+      });
+      state.user.value = result.user;
+      state.activeOrganization.value = mapOrganization(result.organization);
+    } catch (error) {
+      console.error("[Auth Switch Org] Failed to switch organization:", error);
+      throw error;
+    }
   }
   return {
     ...state,
@@ -179,6 +103,7 @@ export function useTelaApplicationAuth() {
     logout,
     initSession,
     getAvailableOrganizations,
-    switchOrganization
+    switchOrganization,
+    refreshToken
   };
 }

package/dist/runtime/composables/organization.d.ts

@@ -1,5 +1,5 @@
-import type { Ref } from 'vue';
 import type { CreateTeamPayload, FullOrganization, Invitation, InviteUserToOrganizationOptions, ListMembersOptions, Member, RemoveUserFromOrganizationOptions, Team, TeamMember, UpdateMemberRoleOptions, UpdateOrganizationPayload, UpdateTeamPayload } from '@meistrari/auth-core';
+import type { Ref } from 'vue';
 export interface UseTelaOrganizationReturn {
     /** Reactive reference to the active organization with members, invitations, and teams. */
     activeOrganization: Ref<FullOrganization | null>;

package/dist/runtime/composables/organization.js

@@ -10,7 +10,8 @@ export function useTelaOrganization() {
     if (!session.value?.activeOrganizationId) {
       return;
     }
-    const organization = await authClient.organization.getOrganization(session.value?.activeOrganizationId);
+    const activeOrganizationId = session.value?.activeOrganizationId;
+    const organization = await authClient.organization.getOrganization(activeOrganizationId);
     activeOrganization.value = organization;
     return organization;
   }

package/dist/runtime/composables/state.d.ts

@@ -34,29 +34,63 @@ export declare function useSessionState(): {
         lastActiveAt?: Date | null | undefined;
     } | null>;
     session: import("vue").Ref<{
-        id: string;
-        createdAt: Date;
-        updatedAt: Date;
-        userId: string;
-        expiresAt: Date;
-        token: string;
-        ipAddress?: string | null | undefined;
-        userAgent?: string | null | undefined;
-        activeOrganizationId?: string | null | undefined;
-        activeTeamId?: string | null | undefined;
-        impersonatedBy?: string | null | undefined;
+        user: {
+            id: string;
+            createdAt: Date;
+            updatedAt: Date;
+            email: string;
+            emailVerified: boolean;
+            name: string;
+            image?: string | null | undefined;
+            twoFactorEnabled: boolean | null | undefined;
+            banned: boolean | null | undefined;
+            role?: string | null | undefined;
+            banReason?: string | null | undefined;
+            banExpires?: Date | null | undefined;
+            lastActiveAt?: Date | null | undefined;
+        };
+        session: {
+            id: string;
+            createdAt: Date;
+            updatedAt: Date;
+            userId: string;
+            expiresAt: Date;
+            token: string;
+            ipAddress?: string | null | undefined;
+            userAgent?: string | null | undefined;
+            activeOrganizationId?: string | null | undefined;
+            activeTeamId?: string | null | undefined;
+            impersonatedBy?: string | null | undefined;
+        };
     } | null, {
-        id: string;
-        createdAt: Date;
-        updatedAt: Date;
-        userId: string;
-        expiresAt: Date;
-        token: string;
-        ipAddress?: string | null | undefined;
-        userAgent?: string | null | undefined;
-        activeOrganizationId?: string | null | undefined;
-        activeTeamId?: string | null | undefined;
-        impersonatedBy?: string | null | undefined;
+        user: {
+            id: string;
+            createdAt: Date;
+            updatedAt: Date;
+            email: string;
+            emailVerified: boolean;
+            name: string;
+            image?: string | null | undefined;
+            twoFactorEnabled: boolean | null | undefined;
+            banned: boolean | null | undefined;
+            role?: string | null | undefined;
+            banReason?: string | null | undefined;
+            banExpires?: Date | null | undefined;
+            lastActiveAt?: Date | null | undefined;
+        };
+        session: {
+            id: string;
+            createdAt: Date;
+            updatedAt: Date;
+            userId: string;
+            expiresAt: Date;
+            token: string;
+            ipAddress?: string | null | undefined;
+            userAgent?: string | null | undefined;
+            activeOrganizationId?: string | null | undefined;
+            activeTeamId?: string | null | undefined;
+            impersonatedBy?: string | null | undefined;
+        };
     } | null>;
 };
 /**

package/dist/runtime/plugins/application-token-refresh.js

@@ -1,19 +1,15 @@
 import { defineNuxtPlugin, useCookie, useRuntimeConfig } from "#app";
-import { isTokenExpired, RefreshTokenExpiredError } from "@meistrari/auth-core";
-import { watch } from "vue";
+import { isTokenExpired } from "@meistrari/auth-core";
+import { decodeJwt } from "jose";
+import { useTelaApplicationAuth } from "../composables/application-auth.js";
 import { useApplicationSessionState } from "../composables/state.js";
 import { createNuxtAuthClient } from "../shared.js";
-import { useTelaApplicationAuth } from "../composables/application-auth.js";
 const SEVEN_DAYS = 60 * 60 * 24 * 7;
 const FIFTEEN_MINUTES = 60 * 15;
 const TWO_MINUTES = 2 * 60 * 1e3;
 function parseTokenExpiry(token) {
   try {
-    const tokenParts = token.split(".");
-    const payloadPart = tokenParts[1];
-    if (!payloadPart)
-      return null;
-    const payload = JSON.parse(atob(payloadPart));
+    const payload = decodeJwt(token);
     if (!payload.exp)
       return null;
     return payload.exp * 1e3;
@@ -42,12 +38,13 @@ export default defineNuxtPlugin({
     const state = useApplicationSessionState();
     const { login, logout: sdkLogout } = useTelaApplicationAuth();
     const accessTokenCookie = useCookie("tela-access-token", {
-      secure: true,
+      secure: !import.meta.dev,
       sameSite: "lax",
       maxAge: FIFTEEN_MINUTES
     });
     const refreshTokenCookie = useCookie("tela-refresh-token", {
-      secure: true,
+      httpOnly: true,
+      secure: !import.meta.dev,
       sameSite: "lax",
       maxAge: SEVEN_DAYS
     });
@@ -60,12 +57,17 @@ export default defineNuxtPlugin({
       }
       isRefreshing = true;
       try {
-        if (!refreshTokenCookie.value) {
-          throw new RefreshTokenExpiredError();
+        if (import.meta.server) {
+          const { accessToken, refreshToken: refreshToken2, user: user2, organization: organization2 } = await authClient.application.refreshAccessToken(refreshTokenCookie.value ?? "");
+          accessTokenCookie.value = accessToken;
+          refreshTokenCookie.value = refreshToken2;
+          state.user.value = user2;
+          state.activeOrganization.value = mapOrganization(organization2);
+          return;
         }
-        const { accessToken, refreshToken: refreshToken2, user, organization } = await authClient.application.refreshAccessToken(refreshTokenCookie.value);
-        accessTokenCookie.value = accessToken;
-        refreshTokenCookie.value = refreshToken2;
+        const { user, organization } = await $fetch("/auth/refresh", {
+          method: "POST"
+        });
         state.user.value = user;
         state.activeOrganization.value = mapOrganization(organization);
       } catch {
@@ -79,7 +81,6 @@ export default defineNuxtPlugin({
     }
     function logout() {
       accessTokenCookie.value = null;
-      refreshTokenCookie.value = null;
       state.user.value = null;
       state.activeOrganization.value = null;
     }
@@ -99,7 +100,7 @@ export default defineNuxtPlugin({
         return;
       }
       const nextRefresh = Math.max(expiry - TWO_MINUTES - Date.now(), 0);
-      tokenRefreshInterval = window.setTimeout(refreshToken, nextRefresh);
+      tokenRefreshInterval = window.setTimeout(() => void refreshToken(), nextRefresh);
     }
     if (import.meta.server) {
       if (accessTokenCookie.value) {
@@ -134,11 +135,7 @@ export default defineNuxtPlugin({
       return;
     }
     if (import.meta.client) {
-      watch(refreshTokenCookie, async (newVal) => {
-        if (newVal) {
-          await scheduleTokenRefresh();
-        }
-      }, { immediate: true });
+      void scheduleTokenRefresh();
     }
   }
 });