@drmhse/authos-vue 0.1.3 → 0.1.5

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { App, PropType, VNode } from 'vue';
+import { App, ComputedRef, PropType, VNode } from 'vue';
 import * as _drmhse_sso_sdk from '@drmhse/sso-sdk';
 import { TokenStorage, UserProfile, OrganizationResponse, SsoClient } from '@drmhse/sso-sdk';
 export { AuthErrorCodes, BrowserStorage, MemoryStorage, OrganizationResponse, SsoApiError, SsoClient, TokenStorage, UserProfile } from '@drmhse/sso-sdk';
@@ -14,10 +14,67 @@ interface AuthOSState {
 interface AuthOSContext {
     client: SsoClient;
     state: AuthOSState;
+    /** The plugin configuration options */
+    options: AuthOSPluginOptions;
 }
+/**
+ * Configuration options for the AuthOS Vue plugin.
+ *
+ * Supports two modes:
+ * - **Platform-level**: Just `baseURL` for platform owners/admins (email/password only)
+ * - **Multi-tenant**: With `org` and `service` for tenant apps (enables OAuth)
+ *
+ * @example Platform-level access
+ * ```ts
+ * app.use(createAuthOS({
+ *   baseURL: 'https://sso.example.com',
+ * }));
+ * ```
+ *
+ * @example Multi-tenant with OAuth
+ * ```ts
+ * app.use(createAuthOS({
+ *   baseURL: 'https://sso.example.com',
+ *   org: 'my-org',
+ *   service: 'my-app',
+ * }));
+ * ```
+ */
 interface AuthOSPluginOptions {
-    baseUrl: string;
+    /**
+     * Base URL of the AuthOS API service.
+     * @example 'https://sso.example.com'
+     */
+    baseURL: string;
+    /**
+     * Organization slug for OAuth flows.
+     * Only required when using OAuth login buttons.
+     * Omit for platform-level access.
+     * @example 'acme-corp'
+     */
+    org?: string;
+    /**
+     * Service slug for OAuth flows.
+     * Only required when using OAuth login buttons.
+     * Omit for platform-level access.
+     * @example 'main-app'
+     */
+    service?: string;
+    /**
+     * Redirect URI after OAuth authentication.
+     * Defaults to current window location origin + '/callback'.
+     * @example 'https://app.example.com/callback'
+     */
+    redirectUri?: string;
+    /**
+     * Custom storage provider (optional).
+     * Defaults to localStorage in browser, Memory in SSR.
+     */
     storage?: TokenStorage;
+    /**
+     * Automatically refresh expired tokens.
+     * @default true
+     */
     autoRefresh?: boolean;
     /**
      * Initial session token from server-side (for SSR hydration).
@@ -25,15 +82,46 @@ interface AuthOSPluginOptions {
      * Typically passed from cookies in Nuxt server components.
      */
     initialToken?: string;
+    /**
+     * URL to redirect to after successful sign-in.
+     * @example '/dashboard'
+     */
+    afterSignInUrl?: string;
+    /**
+     * URL to redirect to after successful sign-up.
+     * @example '/onboarding'
+     */
+    afterSignUpUrl?: string;
 }
 declare const AUTH_OS_INJECTION_KEY: unique symbol;
+/**
+ * Supported OAuth providers
+ */
+type SupportedOAuthProvider = 'github' | 'google' | 'microsoft';
 
 declare function createAuthOS(options: AuthOSPluginOptions): {
     install(app: App): void;
 };
 
+/**
+ * Access the AuthOS client, state, and configuration.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useAuthOS } from '@drmhse/authos-vue';
+ *
+ * const { client, isAuthenticated, isLoading, options } = useAuthOS();
+ *
+ * async function handleLogout() {
+ *   await client.auth.logout();
+ * }
+ * </script>
+ * ```
+ */
 declare function useAuthOS(): {
     client: SsoClient;
+    options: AuthOSPluginOptions;
     isLoading: vue.ComputedRef<boolean>;
     isAuthenticated: vue.ComputedRef<boolean>;
 };
@@ -46,6 +134,24 @@ declare function useUser(): {
     isLoading: vue.ComputedRef<boolean>;
 };
 
+/**
+ * Composable to access the current organization context and switch between organizations.
+ *
+ * When switching organizations, this calls the backend to issue new JWT tokens
+ * with the organization context, enabling seamless organization switching without
+ * requiring re-authentication.
+ *
+ * @returns The current organization and a function to switch organizations
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useOrganization } from '@drmhse/authos-vue';
+ *
+ * const { currentOrganization, switchOrganization, isSwitching } = useOrganization();
+ * </script>
+ * ```
+ */
 declare function useOrganization(): {
     currentOrganization: vue.Ref<null, null>;
     organizations: vue.Ref<never[], never[]>;
@@ -58,11 +164,76 @@ declare function useOrganization(): {
     isSwitching: vue.Ref<boolean, boolean>;
 };
 
+/**
+ * Check if the current user has a specific permission.
+ *
+ * @param permission The permission to check
+ * @returns A computed ref that is true if the user has the permission
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { usePermission } from '@drmhse/authos-vue';
+ *
+ * const canAccessAdmin = usePermission('admin:access');
+ * </script>
+ *
+ * <template>
+ *   <button v-if="canAccessAdmin">Admin Panel</button>
+ * </template>
+ * ```
+ */
+declare function usePermission(permission: string): ComputedRef<boolean>;
+/**
+ * Check if the current user has any of the specified permissions.
+ *
+ * @param permissions The permissions to check
+ * @returns A computed ref that is true if the user has any of the permissions
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useAnyPermission } from '@drmhse/authos-vue';
+ *
+ * const canAccessReports = useAnyPermission(['reports:read', 'admin:access']);
+ * </script>
+ * ```
+ */
+declare function useAnyPermission(permissions: string[]): ComputedRef<boolean>;
+/**
+ * Check if the current user has all of the specified permissions.
+ *
+ * @param permissions The permissions to check
+ * @returns A computed ref that is true if the user has all of the permissions
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useAllPermissions } from '@drmhse/authos-vue';
+ *
+ * const canManageBilling = useAllPermissions(['billing:read', 'billing:write']);
+ * </script>
+ * ```
+ */
+declare function useAllPermissions(permissions: string[]): ComputedRef<boolean>;
+
 declare const AuthOSProvider: vue.DefineComponent<vue.ExtractPropTypes<{
-    baseUrl: {
+    baseURL: {
         type: StringConstructor;
         required: true;
     };
+    org: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    service: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    redirectUri: {
+        type: StringConstructor;
+        default: undefined;
+    };
     storage: {
         type: PropType<TokenStorage>;
         default: undefined;
@@ -76,10 +247,22 @@ declare const AuthOSProvider: vue.DefineComponent<vue.ExtractPropTypes<{
 }> | vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    baseUrl: {
+    baseURL: {
         type: StringConstructor;
         required: true;
     };
+    org: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    service: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    redirectUri: {
+        type: StringConstructor;
+        default: undefined;
+    };
     storage: {
         type: PropType<TokenStorage>;
         default: undefined;
@@ -89,6 +272,9 @@ declare const AuthOSProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    org: string;
+    service: string;
+    redirectUri: string;
     storage: TokenStorage;
     client: SsoClient;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
@@ -154,6 +340,16 @@ declare const SignUp: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(error: Error) => void>;
         default: undefined;
     };
+    /** Organization slug for tenant context */
+    orgSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Service slug for tenant attribution (used with orgSlug) */
+    serviceSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -167,12 +363,24 @@ declare const SignUp: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(error: Error) => void>;
         default: undefined;
     };
+    /** Organization slug for tenant context */
+    orgSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Service slug for tenant attribution (used with orgSlug) */
+    serviceSlug: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{
     onSuccess?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
 }>, {
     onSuccess: () => void;
     onError: (error: Error) => void;
+    orgSlug: string;
+    serviceSlug: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 interface OrganizationSwitcherSlotProps {
@@ -272,4 +480,184 @@ declare const Protect: vue.DefineComponent<vue.ExtractPropTypes<{
     }> | (() => VNode);
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { AUTH_OS_INJECTION_KEY, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, OrganizationSwitcher, type OrganizationSwitcherSlotProps, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, UserButton, type UserButtonSlotProps, createAuthOS, useAuthOS, useOrganization, useUser };
+interface OAuthButtonSlotProps {
+    provider: SupportedOAuthProvider;
+    providerName: string;
+    isConfigured: boolean;
+    disabled: boolean;
+    handleClick: () => void;
+}
+/**
+ * OAuth login button for a specific provider.
+ * Redirects the user to the OAuth provider's login page.
+ *
+ * Requires `org` and `service` to be configured in createAuthOS options.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { OAuthButton } from '@drmhse/authos-vue';
+ * </script>
+ *
+ * <template>
+ *   <OAuthButton provider="github" />
+ *   <OAuthButton provider="google">Sign in with Google</OAuthButton>
+ * </template>
+ * ```
+ */
+declare const OAuthButton: vue.DefineComponent<vue.ExtractPropTypes<{
+    provider: {
+        type: PropType<SupportedOAuthProvider>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "redirect"[], "redirect", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    provider: {
+        type: PropType<SupportedOAuthProvider>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onRedirect?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Renders children only when the user is authenticated.
+ * Use with SignedOut to create conditional UI based on auth state.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { SignedIn, SignedOut, UserButton, SignIn } from '@drmhse/authos-vue';
+ * </script>
+ *
+ * <template>
+ *   <header>
+ *     <SignedIn>
+ *       <UserButton />
+ *     </SignedIn>
+ *     <SignedOut>
+ *       <SignIn />
+ *     </SignedOut>
+ *   </header>
+ * </template>
+ * ```
+ */
+declare const SignedIn: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Renders children only when the user is NOT authenticated.
+ * Use with SignedIn to create conditional UI based on auth state.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { SignedIn, SignedOut, UserButton, SignIn } from '@drmhse/authos-vue';
+ * </script>
+ *
+ * <template>
+ *   <header>
+ *     <SignedIn>
+ *       <UserButton />
+ *     </SignedIn>
+ *     <SignedOut>
+ *       <SignIn />
+ *     </SignedOut>
+ *   </header>
+ * </template>
+ * ```
+ */
+declare const SignedOut: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Passwordless sign-in via magic link (email).
+ *
+ * Sends a one-time login link to the user's email address.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { MagicLinkSignIn } from '@drmhse/authos-vue';
+ * </script>
+ *
+ * <template>
+ *   <MagicLinkSignIn @success="() => alert('Check your email!')" />
+ * </template>
+ * ```
+ */
+declare const MagicLinkSignIn: vue.DefineComponent<vue.ExtractPropTypes<{
+    showPasswordSignIn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("success" | "error")[], "success" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    showPasswordSignIn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onSuccess?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}>, {
+    showPasswordSignIn: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Passkey (WebAuthn) sign-in component.
+ *
+ * Uses the Web Authentication API for passwordless authentication
+ * via biometrics, security keys, or platform authenticators.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { PasskeySignIn } from '@drmhse/authos-vue';
+ * </script>
+ *
+ * <template>
+ *   <PasskeySignIn @success="() => router.push('/dashboard')" />
+ * </template>
+ * ```
+ */
+declare const PasskeySignIn: vue.DefineComponent<vue.ExtractPropTypes<{
+    showPasswordSignIn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("success" | "error")[], "success" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    showPasswordSignIn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onSuccess?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}>, {
+    showPasswordSignIn: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AUTH_OS_INJECTION_KEY, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };