@drmhse/authos-vue 0.2.6 → 0.2.8

package/dist/index.js

@@ -1,15 +1,13 @@
-'use strict';
-
-var vue = require('vue');
-var ssoSdk = require('@drmhse/sso-sdk');
-
-// src/plugin.ts
-
-// src/types.ts
-var AUTH_OS_INJECTION_KEY = /* @__PURE__ */ Symbol("authOS");
-
-// src/styles.ts
-var AUTHOS_STYLES = `
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useAuthOS = require("./useAuthOS-PBWjiXpo.js");
+let vue = require("vue");
+let _drmhse_sso_sdk = require("@drmhse/sso-sdk");
+//#region src/styles.ts
+/**
+* Built-in styles for AuthOS Vue components.
+* Provides polished default styling with CSS custom properties for theming.
+*/
+const AUTHOS_STYLES = `
 /* ==========================================================================
    AuthOS Component Styles
    CSS Variables + Default Theme
@@ -438,1228 +436,1311 @@ var AUTHOS_STYLES = `
   opacity: 0.6;
 }
 `;
-var stylesInjected = false;
+/**
+* Injects the AuthOS styles into the document head.
+* Only injects once, even if called multiple times.
+*/
+let stylesInjected = false;
 function injectStyles() {
-  if (stylesInjected) return;
-  if (typeof document === "undefined") return;
-  const styleElement = document.createElement("style");
-  styleElement.setAttribute("data-authos-styles", "");
-  styleElement.textContent = AUTHOS_STYLES;
-  document.head.appendChild(styleElement);
-  stylesInjected = true;
+	if (stylesInjected) return;
+	if (typeof document === "undefined") return;
+	const styleElement = document.createElement("style");
+	styleElement.setAttribute("data-authos-styles", "");
+	styleElement.textContent = AUTHOS_STYLES;
+	document.head.appendChild(styleElement);
+	stylesInjected = true;
 }
+/**
+* Applies custom CSS variable overrides for theming.
+*/
 function applyVariables(variables) {
-  if (typeof document === "undefined") return;
-  const root = document.documentElement;
-  for (const [key, value] of Object.entries(variables)) {
-    const cssVar = `--authos-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
-    root.style.setProperty(cssVar, value);
-  }
+	if (typeof document === "undefined") return;
+	const root = document.documentElement;
+	for (const [key, value] of Object.entries(variables)) {
+		const cssVar = `--authos-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+		root.style.setProperty(cssVar, value);
+	}
 }
-
-// src/plugin.ts
+//#endregion
+//#region src/plugin.ts
 function createAuthOS(options) {
-  const getStorage = () => {
-    if (options.storage) return options.storage;
-    try {
-      if (typeof window !== "undefined" && window.localStorage) {
-        return new ssoSdk.BrowserStorage();
-      }
-    } catch {
-    }
-    return new ssoSdk.MemoryStorage();
-  };
-  const client = new ssoSdk.SsoClient({
-    baseURL: options.baseURL,
-    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: !options.initialToken,
-    // Skip loading if we have initial token
-    currentOrganization: null,
-    organizations: []
-  });
-  const context = {
-    client,
-    state,
-    options
-  };
-  return {
-    install(app) {
-      injectStyles();
-      if (options.appearance?.variables) {
-        applyVariables(options.appearance.variables);
-      }
-      if (options.org && !options.service) {
-        console.warn(
-          '[AuthOS] You provided "org" but not "service". OAuth flows may not work correctly.'
-        );
-      }
-      if (!options.org && options.service) {
-        console.warn(
-          '[AuthOS] You provided "service" but not "org". OAuth flows may not work correctly.'
-        );
-      }
-      vue.nextTick(() => {
-        setInitialToken();
-      });
-      client.onAuthStateChange(async (isAuthenticated) => {
-        state.isAuthenticated = isAuthenticated;
-        state.isLoading = false;
-        if (isAuthenticated) {
-          try {
-            const profile = await client.user.getProfile();
-            state.user = profile;
-          } catch {
-            state.user = null;
-          }
-          try {
-            const orgs = await client.organizations.list();
-            state.organizations = orgs;
-            if (orgs.length > 0 && !state.currentOrganization) {
-              state.currentOrganization = orgs[0];
-            }
-          } catch {
-            state.organizations = [];
-          }
-        } else {
-          state.user = null;
-          state.currentOrganization = null;
-          state.organizations = [];
-        }
-      });
-      app.provide(AUTH_OS_INJECTION_KEY, context);
-      app.config.globalProperties.$authOS = context;
-    }
-  };
-}
-function useAuthOS() {
-  const context = vue.inject(AUTH_OS_INJECTION_KEY);
-  if (!context) {
-    const defaultOptions = {
-      baseURL: "http://localhost:3001"
-    };
-    const defaultClient = new ssoSdk.SsoClient({
-      baseURL: defaultOptions.baseURL,
-      storage: new ssoSdk.MemoryStorage()
-    });
-    return {
-      client: defaultClient,
-      options: defaultOptions,
-      isLoading: vue.computed(() => false),
-      isAuthenticated: vue.computed(() => false)
-    };
-  }
-  const isLoading = vue.computed(() => context.state.isLoading);
-  const isAuthenticated = vue.computed(() => context.state.isAuthenticated);
-  return {
-    client: context.client,
-    options: context.options,
-    isLoading,
-    isAuthenticated
-  };
+	const getStorage = () => {
+		if (options.storage) return options.storage;
+		try {
+			if (typeof window !== "undefined" && window.localStorage) return new _drmhse_sso_sdk.BrowserStorage();
+		} catch {}
+		return new _drmhse_sso_sdk.MemoryStorage();
+	};
+	const client = new _drmhse_sso_sdk.SsoClient({
+		baseURL: options.baseURL,
+		storage: getStorage(),
+		token: options.initialToken
+	});
+	let hasSetInitialToken = false;
+	const setInitialToken = async () => {
+		if (options.initialToken && !hasSetInitialToken) {
+			await client.setSession({ access_token: options.initialToken });
+			hasSetInitialToken = true;
+		}
+	};
+	const state = (0, vue.reactive)({
+		user: null,
+		isAuthenticated: false,
+		isLoading: !options.initialToken,
+		currentOrganization: null,
+		organizations: []
+	});
+	const context = {
+		client,
+		state,
+		options
+	};
+	return { install(app) {
+		injectStyles();
+		if (options.appearance?.variables) applyVariables(options.appearance.variables);
+		if (options.org && !options.service) console.warn("[AuthOS] You provided \"org\" but not \"service\". OAuth flows may not work correctly.");
+		if (!options.org && options.service) console.warn("[AuthOS] You provided \"service\" but not \"org\". OAuth flows may not work correctly.");
+		(0, vue.nextTick)(() => {
+			setInitialToken();
+		});
+		client.onAuthStateChange(async (isAuthenticated) => {
+			state.isAuthenticated = isAuthenticated;
+			state.isLoading = false;
+			if (isAuthenticated) {
+				try {
+					state.user = await client.user.getProfile();
+				} catch {
+					state.user = null;
+				}
+				try {
+					const orgs = await client.organizations.list();
+					state.organizations = orgs;
+					if (orgs.length > 0 && !state.currentOrganization) state.currentOrganization = orgs[0];
+				} catch {
+					state.organizations = [];
+				}
+			} else {
+				state.user = null;
+				state.currentOrganization = null;
+				state.organizations = [];
+			}
+		});
+		app.provide(require_useAuthOS.AUTH_OS_INJECTION_KEY, context);
+		app.config.globalProperties.$authOS = context;
+	} };
 }
+//#endregion
+//#region src/composables/useUser.ts
 function useUser() {
-  const context = vue.inject(AUTH_OS_INJECTION_KEY);
-  if (!context) {
-    return {
-      user: vue.ref(null),
-      isLoading: vue.computed(() => false)
-    };
-  }
-  const user = vue.computed(() => context.state.user);
-  const isLoading = vue.computed(() => context.state.isLoading);
-  return {
-    user,
-    isLoading
-  };
+	const context = (0, vue.inject)(require_useAuthOS.AUTH_OS_INJECTION_KEY);
+	if (!context) return {
+		user: (0, vue.ref)(null),
+		isLoading: (0, vue.computed)(() => false)
+	};
+	return {
+		user: (0, vue.computed)(() => context.state.user),
+		isLoading: (0, vue.computed)(() => context.state.isLoading)
+	};
 }
+//#endregion
+//#region src/composables/useOrganization.ts
+/**
+* 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>
+* ```
+*/
 function useOrganization() {
-  const context = vue.inject(AUTH_OS_INJECTION_KEY);
-  if (!context) {
-    return {
-      currentOrganization: vue.ref(null),
-      organizations: vue.ref([]),
-      switchOrganization: async () => null,
-      isSwitching: vue.ref(false)
-    };
-  }
-  const currentOrganization = vue.computed(() => context.state.currentOrganization);
-  const organizations = vue.computed(() => context.state.organizations);
-  const isSwitching = vue.ref(false);
-  async function switchOrganization(slug) {
-    if (!context) return;
-    isSwitching.value = true;
-    try {
-      const result = await context.client.organizations.select(slug);
-      await context.client.setSession({
-        access_token: result.access_token,
-        refresh_token: result.refresh_token
-      });
-      const orgResponse = await context.client.organizations.get(slug);
-      context.state.currentOrganization = orgResponse;
-      return orgResponse;
-    } finally {
-      isSwitching.value = false;
-    }
-  }
-  return {
-    currentOrganization,
-    organizations,
-    switchOrganization,
-    isSwitching
-  };
+	const context = (0, vue.inject)(require_useAuthOS.AUTH_OS_INJECTION_KEY);
+	if (!context) return {
+		currentOrganization: (0, vue.ref)(null),
+		organizations: (0, vue.ref)([]),
+		switchOrganization: async () => null,
+		isSwitching: (0, vue.ref)(false)
+	};
+	const currentOrganization = (0, vue.computed)(() => context.state.currentOrganization);
+	const organizations = (0, vue.computed)(() => context.state.organizations);
+	const isSwitching = (0, vue.ref)(false);
+	async function switchOrganization(slug) {
+		if (!context) return;
+		isSwitching.value = true;
+		try {
+			const result = await context.client.organizations.select(slug);
+			await context.client.setSession({
+				access_token: result.access_token,
+				refresh_token: result.refresh_token
+			});
+			const orgResponse = await context.client.organizations.get(slug);
+			context.state.currentOrganization = orgResponse;
+			return orgResponse;
+		} finally {
+			isSwitching.value = false;
+		}
+	}
+	return {
+		currentOrganization,
+		organizations,
+		switchOrganization,
+		isSwitching
+	};
 }
+//#endregion
+//#region src/composables/usePermission.ts
+/**
+* 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>
+* ```
+*/
 function usePermission(permission) {
-  const { user } = useUser();
-  return vue.computed(() => {
-    if (!user.value || !permission) return false;
-    return user.value.permissions?.includes(permission) ?? false;
-  });
+	const { user } = useUser();
+	return (0, vue.computed)(() => {
+		if (!user.value || !permission) return false;
+		return user.value.permissions?.includes(permission) ?? false;
+	});
 }
+/**
+* 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>
+* ```
+*/
 function useAnyPermission(permissions) {
-  const { user } = useUser();
-  return vue.computed(() => {
-    if (!user.value || permissions.length === 0) return false;
-    return permissions.some((p) => user.value?.permissions?.includes(p));
-  });
+	const { user } = useUser();
+	return (0, vue.computed)(() => {
+		if (!user.value || permissions.length === 0) return false;
+		return permissions.some((p) => user.value?.permissions?.includes(p));
+	});
 }
+/**
+* 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>
+* ```
+*/
 function useAllPermissions(permissions) {
-  const { user } = useUser();
-  return vue.computed(() => {
-    if (!user.value || permissions.length === 0) return false;
-    return permissions.every((p) => user.value?.permissions?.includes(p));
-  });
+	const { user } = useUser();
+	return (0, vue.computed)(() => {
+		if (!user.value || permissions.length === 0) return false;
+		return permissions.every((p) => user.value?.permissions?.includes(p));
+	});
 }
-var AuthOSProvider = vue.defineComponent({
-  name: "AuthOSProvider",
-  props: {
-    baseURL: {
-      type: String,
-      required: true
-    },
-    org: {
-      type: String,
-      default: void 0
-    },
-    service: {
-      type: String,
-      default: void 0
-    },
-    redirectUri: {
-      type: String,
-      default: void 0
-    },
-    storage: {
-      type: Object,
-      default: void 0
-    },
-    client: {
-      type: Object,
-      default: void 0
-    }
-  },
-  setup(props, { slots }) {
-    const getStorage = () => {
-      if (props.storage) return props.storage;
-      if (typeof window !== "undefined") return new ssoSdk.BrowserStorage();
-      return new ssoSdk.MemoryStorage();
-    };
-    const client = props.client ?? new ssoSdk.SsoClient({
-      baseURL: props.baseURL,
-      storage: getStorage()
-    });
-    const state = vue.reactive({
-      user: null,
-      isAuthenticated: false,
-      isLoading: true,
-      currentOrganization: null,
-      organizations: []
-    });
-    const options = {
-      baseURL: props.baseURL,
-      org: props.org,
-      service: props.service,
-      redirectUri: props.redirectUri
-    };
-    const context = { client, state, options };
-    vue.provide(AUTH_OS_INJECTION_KEY, context);
-    let unsubscribe;
-    vue.onMounted(() => {
-      unsubscribe = client.onAuthStateChange(async (isAuthenticated) => {
-        state.isAuthenticated = isAuthenticated;
-        state.isLoading = false;
-        if (isAuthenticated) {
-          try {
-            const profile = await client.user.getProfile();
-            state.user = profile;
-          } catch {
-            state.user = null;
-          }
-          try {
-            const orgs = await client.organizations.list();
-            state.organizations = orgs;
-            if (orgs.length > 0 && !state.currentOrganization) {
-              state.currentOrganization = orgs[0];
-            }
-          } catch {
-            state.organizations = [];
-          }
-        } else {
-          state.user = null;
-          state.currentOrganization = null;
-          state.organizations = [];
-        }
-      });
-    });
-    vue.onUnmounted(() => {
-      unsubscribe?.();
-    });
-    return () => slots.default ? slots.default() : vue.h("div");
-  }
+//#endregion
+//#region src/components/AuthOSProvider.ts
+const AuthOSProvider = (0, vue.defineComponent)({
+	name: "AuthOSProvider",
+	props: {
+		baseURL: {
+			type: String,
+			required: true
+		},
+		org: {
+			type: String,
+			default: void 0
+		},
+		service: {
+			type: String,
+			default: void 0
+		},
+		redirectUri: {
+			type: String,
+			default: void 0
+		},
+		storage: {
+			type: Object,
+			default: void 0
+		},
+		client: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const getStorage = () => {
+			if (props.storage) return props.storage;
+			if (typeof window !== "undefined") return new _drmhse_sso_sdk.BrowserStorage();
+			return new _drmhse_sso_sdk.MemoryStorage();
+		};
+		const client = props.client ?? new _drmhse_sso_sdk.SsoClient({
+			baseURL: props.baseURL,
+			storage: getStorage()
+		});
+		const state = (0, vue.reactive)({
+			user: null,
+			isAuthenticated: false,
+			isLoading: true,
+			currentOrganization: null,
+			organizations: []
+		});
+		(0, vue.provide)(require_useAuthOS.AUTH_OS_INJECTION_KEY, {
+			client,
+			state,
+			options: {
+				baseURL: props.baseURL,
+				org: props.org,
+				service: props.service,
+				redirectUri: props.redirectUri
+			}
+		});
+		let unsubscribe;
+		(0, vue.onMounted)(() => {
+			unsubscribe = client.onAuthStateChange(async (isAuthenticated) => {
+				state.isAuthenticated = isAuthenticated;
+				state.isLoading = false;
+				if (isAuthenticated) {
+					try {
+						state.user = await client.user.getProfile();
+					} catch {
+						state.user = null;
+					}
+					try {
+						const orgs = await client.organizations.list();
+						state.organizations = orgs;
+						if (orgs.length > 0 && !state.currentOrganization) state.currentOrganization = orgs[0];
+					} catch {
+						state.organizations = [];
+					}
+				} else {
+					state.user = null;
+					state.currentOrganization = null;
+					state.organizations = [];
+				}
+			});
+		});
+		(0, vue.onUnmounted)(() => {
+			unsubscribe?.();
+		});
+		return () => slots.default ? slots.default() : (0, vue.h)("div");
+	}
 });
-var MFA_PREAUTH_EXPIRY = 300;
-var SignIn = vue.defineComponent({
-  name: "SignIn",
-  props: {
-    onSuccess: {
-      type: Function,
-      default: void 0
-    },
-    onError: {
-      type: Function,
-      default: void 0
-    }
-  },
-  emits: ["success", "error"],
-  setup(props, { slots, emit }) {
-    const { client, options } = useAuthOS();
-    const email = vue.ref("");
-    const password = vue.ref("");
-    const mfaCode = vue.ref("");
-    const preauthToken = vue.ref("");
-    const step = vue.ref("credentials");
-    const error = vue.ref(null);
-    const isSubmitting = vue.ref(false);
-    async function submit() {
-      error.value = null;
-      isSubmitting.value = true;
-      try {
-        if (step.value === "credentials") {
-          const result = await client.auth.login({
-            email: email.value,
-            password: password.value,
-            org_slug: options.org,
-            service_slug: options.service
-          });
-          if (result.expires_in === MFA_PREAUTH_EXPIRY) {
-            preauthToken.value = result.access_token;
-            step.value = "mfa";
-          } else {
-            emit("success");
-            props.onSuccess?.();
-          }
-        } else {
-          await client.auth.verifyMfa(preauthToken.value, mfaCode.value);
-          emit("success");
-          props.onSuccess?.();
-        }
-      } catch (err) {
-        const message = err instanceof ssoSdk.SsoApiError ? err.message : "Login failed";
-        error.value = message;
-        const e = err instanceof Error ? err : new Error(message);
-        emit("error", e);
-        props.onError?.(e);
-      } finally {
-        isSubmitting.value = false;
-      }
-    }
-    return () => {
-      const slotProps = {
-        email: email.value,
-        password: password.value,
-        mfaCode: mfaCode.value,
-        step: step.value,
-        error: error.value,
-        isSubmitting: isSubmitting.value,
-        updateEmail: (v) => email.value = v,
-        updatePassword: (v) => password.value = v,
-        updateMfaCode: (v) => mfaCode.value = v,
-        submit
-      };
-      if (slots.default) {
-        return slots.default(slotProps);
-      }
-      if (step.value === "mfa") {
-        return vue.h("div", { "data-authos-signin": "", "data-state": "mfa" }, [
-          vue.h("form", { onSubmit: (e) => {
-            e.preventDefault();
-            submit();
-          } }, [
-            vue.h("div", { "data-authos-field": "mfa-code" }, [
-              vue.h("label", { for: "authos-mfa-code" }, "Verification Code"),
-              vue.h("input", {
-                id: "authos-mfa-code",
-                type: "text",
-                inputMode: "numeric",
-                autocomplete: "one-time-code",
-                value: mfaCode.value,
-                placeholder: "Enter 6-digit code",
-                required: true,
-                disabled: isSubmitting.value,
-                onInput: (e) => mfaCode.value = e.target.value
-              })
-            ]),
-            error.value && vue.h("div", { "data-authos-error": "" }, error.value),
-            vue.h("button", {
-              type: "submit",
-              disabled: isSubmitting.value,
-              "data-authos-submit": ""
-            }, isSubmitting.value ? "Verifying..." : "Verify"),
-            vue.h("button", {
-              type: "button",
-              "data-authos-back": "",
-              onClick: () => {
-                step.value = "credentials";
-                mfaCode.value = "";
-                preauthToken.value = "";
-                error.value = null;
-              }
-            }, "Back to login")
-          ])
-        ]);
-      }
-      return vue.h("div", { "data-authos-signin": "", "data-state": "credentials" }, [
-        vue.h("form", { onSubmit: (e) => {
-          e.preventDefault();
-          submit();
-        } }, [
-          vue.h("div", { "data-authos-field": "email" }, [
-            vue.h("label", { for: "authos-email" }, "Email"),
-            vue.h("input", {
-              id: "authos-email",
-              type: "email",
-              autocomplete: "email",
-              value: email.value,
-              placeholder: "Enter your email",
-              required: true,
-              disabled: isSubmitting.value,
-              onInput: (e) => email.value = e.target.value
-            })
-          ]),
-          vue.h("div", { "data-authos-field": "password" }, [
-            vue.h("label", { for: "authos-password" }, "Password"),
-            vue.h("input", {
-              id: "authos-password",
-              type: "password",
-              autocomplete: "current-password",
-              value: password.value,
-              placeholder: "Enter your password",
-              required: true,
-              disabled: isSubmitting.value,
-              onInput: (e) => password.value = e.target.value
-            })
-          ]),
-          error.value && vue.h("div", { "data-authos-error": "" }, error.value),
-          vue.h("button", {
-            type: "submit",
-            disabled: isSubmitting.value,
-            "data-authos-submit": ""
-          }, isSubmitting.value ? "Signing in..." : "Sign In")
-        ])
-      ]);
-    };
-  }
+//#endregion
+//#region src/components/SignIn.ts
+const MFA_PREAUTH_EXPIRY = 300;
+const SignIn = (0, vue.defineComponent)({
+	name: "SignIn",
+	props: {
+		onSuccess: {
+			type: Function,
+			default: void 0
+		},
+		onError: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: ["success", "error"],
+	setup(props, { slots, emit }) {
+		const { client, options } = require_useAuthOS.useAuthOS();
+		const email = (0, vue.ref)("");
+		const password = (0, vue.ref)("");
+		const mfaCode = (0, vue.ref)("");
+		const preauthToken = (0, vue.ref)("");
+		const step = (0, vue.ref)("credentials");
+		const error = (0, vue.ref)(null);
+		const isSubmitting = (0, vue.ref)(false);
+		async function submit() {
+			error.value = null;
+			isSubmitting.value = true;
+			try {
+				if (step.value === "credentials") {
+					const result = await client.auth.login({
+						email: email.value,
+						password: password.value,
+						org_slug: options.org,
+						service_slug: options.service
+					});
+					if (result.expires_in === MFA_PREAUTH_EXPIRY) {
+						preauthToken.value = result.access_token;
+						step.value = "mfa";
+					} else {
+						emit("success");
+						props.onSuccess?.();
+					}
+				} else {
+					await client.auth.verifyMfa(preauthToken.value, mfaCode.value);
+					emit("success");
+					props.onSuccess?.();
+				}
+			} catch (err) {
+				const message = err instanceof _drmhse_sso_sdk.SsoApiError ? err.message : "Login failed";
+				error.value = message;
+				const e = err instanceof Error ? err : new Error(message);
+				emit("error", e);
+				props.onError?.(e);
+			} finally {
+				isSubmitting.value = false;
+			}
+		}
+		return () => {
+			const slotProps = {
+				email: email.value,
+				password: password.value,
+				mfaCode: mfaCode.value,
+				step: step.value,
+				error: error.value,
+				isSubmitting: isSubmitting.value,
+				updateEmail: (v) => email.value = v,
+				updatePassword: (v) => password.value = v,
+				updateMfaCode: (v) => mfaCode.value = v,
+				submit
+			};
+			if (slots.default) return slots.default(slotProps);
+			if (step.value === "mfa") return (0, vue.h)("div", {
+				"data-authos-signin": "",
+				"data-state": "mfa"
+			}, [(0, vue.h)("form", { onSubmit: (e) => {
+				e.preventDefault();
+				submit();
+			} }, [
+				(0, vue.h)("div", { "data-authos-field": "mfa-code" }, [(0, vue.h)("label", { for: "authos-mfa-code" }, "Verification Code"), (0, vue.h)("input", {
+					id: "authos-mfa-code",
+					type: "text",
+					inputMode: "numeric",
+					autocomplete: "one-time-code",
+					value: mfaCode.value,
+					placeholder: "Enter 6-digit code",
+					required: true,
+					disabled: isSubmitting.value,
+					onInput: (e) => mfaCode.value = e.target.value
+				})]),
+				error.value && (0, vue.h)("div", { "data-authos-error": "" }, error.value),
+				(0, vue.h)("button", {
+					type: "submit",
+					disabled: isSubmitting.value,
+					"data-authos-submit": ""
+				}, isSubmitting.value ? "Verifying..." : "Verify"),
+				(0, vue.h)("button", {
+					type: "button",
+					"data-authos-back": "",
+					onClick: () => {
+						step.value = "credentials";
+						mfaCode.value = "";
+						preauthToken.value = "";
+						error.value = null;
+					}
+				}, "Back to login")
+			])]);
+			return (0, vue.h)("div", {
+				"data-authos-signin": "",
+				"data-state": "credentials"
+			}, [(0, vue.h)("form", { onSubmit: (e) => {
+				e.preventDefault();
+				submit();
+			} }, [
+				(0, vue.h)("div", { "data-authos-field": "email" }, [(0, vue.h)("label", { for: "authos-email" }, "Email"), (0, vue.h)("input", {
+					id: "authos-email",
+					type: "email",
+					autocomplete: "email",
+					value: email.value,
+					placeholder: "Enter your email",
+					required: true,
+					disabled: isSubmitting.value,
+					onInput: (e) => email.value = e.target.value
+				})]),
+				(0, vue.h)("div", { "data-authos-field": "password" }, [(0, vue.h)("label", { for: "authos-password" }, "Password"), (0, vue.h)("input", {
+					id: "authos-password",
+					type: "password",
+					autocomplete: "current-password",
+					value: password.value,
+					placeholder: "Enter your password",
+					required: true,
+					disabled: isSubmitting.value,
+					onInput: (e) => password.value = e.target.value
+				})]),
+				error.value && (0, vue.h)("div", { "data-authos-error": "" }, error.value),
+				(0, vue.h)("button", {
+					type: "submit",
+					disabled: isSubmitting.value,
+					"data-authos-submit": ""
+				}, isSubmitting.value ? "Signing in..." : "Sign In")
+			])]);
+		};
+	}
 });
-var PROVIDER_NAMES = {
-  github: "GitHub",
-  google: "Google",
-  microsoft: "Microsoft"
+//#endregion
+//#region src/components/OAuthButton.ts
+/**
+* Human-readable provider names for button labels
+*/
+const PROVIDER_NAMES = {
+	github: "GitHub",
+	google: "Google",
+	microsoft: "Microsoft"
 };
+/**
+* SVG icons for each OAuth provider
+*/
 function getProviderIcon(provider) {
-  switch (provider) {
-    case "github":
-      return vue.h("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "currentColor",
-        "aria-hidden": "true"
-      }, [
-        vue.h("path", {
-          d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
-        })
-      ]);
-    case "google":
-      return vue.h("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        "aria-hidden": "true"
-      }, [
-        vue.h("path", {
-          fill: "#4285F4",
-          d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-        }),
-        vue.h("path", {
-          fill: "#34A853",
-          d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-        }),
-        vue.h("path", {
-          fill: "#FBBC05",
-          d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-        }),
-        vue.h("path", {
-          fill: "#EA4335",
-          d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-        })
-      ]);
-    case "microsoft":
-      return vue.h("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 23 23",
-        "aria-hidden": "true"
-      }, [
-        vue.h("path", { fill: "#f35325", d: "M1 1h10v10H1z" }),
-        vue.h("path", { fill: "#81bc06", d: "M12 1h10v10H12z" }),
-        vue.h("path", { fill: "#05a6f0", d: "M1 12h10v10H1z" }),
-        vue.h("path", { fill: "#ffba08", d: "M12 12h10v10H12z" })
-      ]);
-  }
+	switch (provider) {
+		case "github": return (0, vue.h)("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			"aria-hidden": "true"
+		}, [(0, vue.h)("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" })]);
+		case "google": return (0, vue.h)("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			"aria-hidden": "true"
+		}, [
+			(0, vue.h)("path", {
+				fill: "#4285F4",
+				d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+			}),
+			(0, vue.h)("path", {
+				fill: "#34A853",
+				d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+			}),
+			(0, vue.h)("path", {
+				fill: "#FBBC05",
+				d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+			}),
+			(0, vue.h)("path", {
+				fill: "#EA4335",
+				d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+			})
+		]);
+		case "microsoft": return (0, vue.h)("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 23 23",
+			"aria-hidden": "true"
+		}, [
+			(0, vue.h)("path", {
+				fill: "#f35325",
+				d: "M1 1h10v10H1z"
+			}),
+			(0, vue.h)("path", {
+				fill: "#81bc06",
+				d: "M12 1h10v10H12z"
+			}),
+			(0, vue.h)("path", {
+				fill: "#05a6f0",
+				d: "M1 12h10v10H1z"
+			}),
+			(0, vue.h)("path", {
+				fill: "#ffba08",
+				d: "M12 12h10v10H12z"
+			})
+		]);
+	}
 }
-var OAuthButton = vue.defineComponent({
-  name: "OAuthButton",
-  props: {
-    provider: {
-      type: String,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["redirect"],
-  setup(props, { slots, emit }) {
-    const { client, options } = useAuthOS();
-    const isConfigured = vue.computed(() => !!(options.org && options.service));
-    const providerName = vue.computed(() => PROVIDER_NAMES[props.provider]);
-    function handleClick() {
-      if (!options.org || !options.service) {
-        console.error(
-          `[AuthOS] OAuth login requires "org" and "service" in createAuthOS options.
-Current options: { org: ${options.org ? `"${options.org}"` : "undefined"}, service: ${options.service ? `"${options.service}"` : "undefined"} }
-
-Example:
-  app.use(createAuthOS({
-    baseURL: "${options.baseURL}",
-    org: "your-org-slug",
-    service: "your-service-slug",
-  }));
-
-See: https://docs.authos.dev/vue/oauth-setup`
-        );
-        return;
-      }
-      const redirectUri = options.redirectUri ?? (typeof window !== "undefined" ? window.location.origin + "/callback" : void 0);
-      const url = client.auth.getLoginUrl(props.provider, {
-        org: options.org,
-        service: options.service,
-        redirect_uri: redirectUri
-      });
-      emit("redirect");
-      window.location.href = url;
-    }
-    return () => {
-      const slotProps = {
-        provider: props.provider,
-        providerName: providerName.value,
-        isConfigured: isConfigured.value,
-        disabled: props.disabled,
-        handleClick
-      };
-      if (slots.default) {
-        return slots.default(slotProps);
-      }
-      return vue.h(
-        "button",
-        {
-          type: "button",
-          onClick: handleClick,
-          disabled: props.disabled || !isConfigured.value,
-          "data-authos-oauth": "",
-          "data-provider": props.provider
-        },
-        [
-          getProviderIcon(props.provider),
-          vue.h("span", `Continue with ${providerName.value}`)
-        ]
-      );
-    };
-  }
+/**
+* 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>
+* ```
+*/
+const OAuthButton = (0, vue.defineComponent)({
+	name: "OAuthButton",
+	props: {
+		provider: {
+			type: String,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["redirect"],
+	setup(props, { slots, emit }) {
+		const { client, options } = require_useAuthOS.useAuthOS();
+		const isConfigured = (0, vue.computed)(() => !!(options.org && options.service));
+		const providerName = (0, vue.computed)(() => PROVIDER_NAMES[props.provider]);
+		function handleClick() {
+			if (!options.org || !options.service) {
+				console.error(`[AuthOS] OAuth login requires "org" and "service" in createAuthOS options.\nCurrent options: { org: ${options.org ? `"${options.org}"` : "undefined"}, service: ${options.service ? `"${options.service}"` : "undefined"} }\n\nExample:\n  app.use(createAuthOS({\n    baseURL: "${options.baseURL}",\n    org: "your-org-slug",\n    service: "your-service-slug",\n  }));\n\nSee: https://docs.authos.dev/vue/oauth-setup`);
+				return;
+			}
+			const redirectUri = options.redirectUri ?? (typeof window !== "undefined" ? window.location.origin + "/callback" : void 0);
+			const url = client.auth.getLoginUrl(props.provider, {
+				org: options.org,
+				service: options.service,
+				redirect_uri: redirectUri
+			});
+			emit("redirect");
+			window.location.href = url;
+		}
+		return () => {
+			const slotProps = {
+				provider: props.provider,
+				providerName: providerName.value,
+				isConfigured: isConfigured.value,
+				disabled: props.disabled,
+				handleClick
+			};
+			if (slots.default) return slots.default(slotProps);
+			return (0, vue.h)("button", {
+				type: "button",
+				onClick: handleClick,
+				disabled: props.disabled || !isConfigured.value,
+				"data-authos-oauth": "",
+				"data-provider": props.provider
+			}, [getProviderIcon(props.provider), (0, vue.h)("span", `Continue with ${providerName.value}`)]);
+		};
+	}
 });
-
-// src/components/SignUp.ts
-var SignUp = vue.defineComponent({
-  name: "SignUp",
-  props: {
-    onSuccess: {
-      type: Function,
-      default: void 0
-    },
-    onError: {
-      type: Function,
-      default: void 0
-    },
-    /** Organization slug for tenant context */
-    orgSlug: {
-      type: String,
-      default: void 0
-    },
-    /** Service slug for tenant attribution (used with orgSlug) */
-    serviceSlug: {
-      type: String,
-      default: void 0
-    },
-    /** List of OAuth providers to display buttons for */
-    providers: {
-      type: [Array, Boolean],
-      default: false
-    },
-    /** Show divider between OAuth and email form */
-    showDivider: {
-      type: Boolean,
-      default: true
-    },
-    /** Show sign in link */
-    showSignIn: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ["success", "error"],
-  setup(props, { slots, emit }) {
-    const { client, options } = useAuthOS();
-    const email = vue.ref("");
-    const password = vue.ref("");
-    const confirmPassword = vue.ref("");
-    const error = vue.ref(null);
-    const isSubmitting = vue.ref(false);
-    const isSuccess = vue.ref(false);
-    const hasOAuthConfig = !!(options.org && options.service);
-    const oauthProviders = Array.isArray(props.providers) ? props.providers : [];
-    async function submit() {
-      error.value = null;
-      if (password.value !== confirmPassword.value) {
-        error.value = "Passwords do not match";
-        return;
-      }
-      if (password.value.length < 8) {
-        error.value = "Password must be at least 8 characters";
-        return;
-      }
-      isSubmitting.value = true;
-      try {
-        await client.auth.register({
-          email: email.value,
-          password: password.value,
-          org_slug: props.orgSlug ?? options.org,
-          service_slug: props.serviceSlug ?? options.service
-        });
-        isSuccess.value = true;
-        emit("success");
-        props.onSuccess?.();
-      } catch (err) {
-        const message = err instanceof ssoSdk.SsoApiError ? err.message : "Registration failed";
-        error.value = message;
-        const e = err instanceof Error ? err : new Error(message);
-        emit("error", e);
-        props.onError?.(e);
-      } finally {
-        isSubmitting.value = false;
-      }
-    }
-    return () => {
-      const slotProps = {
-        email: email.value,
-        password: password.value,
-        error: error.value,
-        isSubmitting: isSubmitting.value,
-        updateEmail: (v) => email.value = v,
-        updatePassword: (v) => password.value = v,
-        submit
-      };
-      if (slots.default) {
-        return slots.default(slotProps);
-      }
-      if (isSuccess.value) {
-        return vue.h("div", { "data-authos-signup": "", "data-state": "success" }, [
-          vue.h("div", { "data-authos-success": "" }, [
-            vue.h("h2", "Check your email"),
-            vue.h("p", `We've sent a verification link to ${email.value}. Please click the link to verify your account.`)
-          ])
-        ]);
-      }
-      return vue.h("div", { "data-authos-signup": "", "data-state": "credentials" }, [
-        // OAuth Section
-        oauthProviders.length > 0 && vue.h("div", { "data-authos-oauth-section": "" }, [
-          oauthProviders.map(
-            (provider) => vue.h(OAuthButton, {
-              key: provider,
-              provider,
-              disabled: isSubmitting.value || !hasOAuthConfig
-            })
-          ),
-          !hasOAuthConfig && vue.h("p", {
-            "data-authos-oauth-warning": "",
-            style: { color: "orange", fontSize: "0.875rem" }
-          }, "OAuth requires org and service in plugin options")
-        ]),
-        // Divider
-        oauthProviders.length > 0 && props.showDivider && vue.h("div", { "data-authos-divider": "" }, [
-          vue.h("span", "or")
-        ]),
-        vue.h("form", { onSubmit: (e) => {
-          e.preventDefault();
-          submit();
-        } }, [
-          vue.h("div", { "data-authos-field": "email" }, [
-            vue.h("label", { for: "authos-signup-email" }, "Email"),
-            vue.h("input", {
-              id: "authos-signup-email",
-              type: "email",
-              autocomplete: "email",
-              value: email.value,
-              placeholder: "Enter your email",
-              required: true,
-              disabled: isSubmitting.value,
-              onInput: (e) => email.value = e.target.value
-            })
-          ]),
-          vue.h("div", { "data-authos-field": "password" }, [
-            vue.h("label", { for: "authos-signup-password" }, "Password"),
-            vue.h("input", {
-              id: "authos-signup-password",
-              type: "password",
-              autocomplete: "new-password",
-              value: password.value,
-              placeholder: "Create a password",
-              required: true,
-              disabled: isSubmitting.value,
-              onInput: (e) => password.value = e.target.value
-            })
-          ]),
-          // Confirm Password
-          vue.h("div", { "data-authos-field": "confirm-password" }, [
-            vue.h("label", { for: "authos-signup-confirm" }, "Confirm Password"),
-            vue.h("input", {
-              id: "authos-signup-confirm",
-              type: "password",
-              autocomplete: "new-password",
-              value: confirmPassword.value,
-              placeholder: "Confirm your password",
-              required: true,
-              disabled: isSubmitting.value,
-              onInput: (e) => confirmPassword.value = e.target.value
-            })
-          ]),
-          error.value && vue.h("div", { "data-authos-error": "" }, error.value),
-          vue.h("button", {
-            type: "submit",
-            disabled: isSubmitting.value,
-            "data-authos-submit": ""
-          }, isSubmitting.value ? "Creating account..." : "Sign Up"),
-          // Sign In Link
-          props.showSignIn && vue.h("div", { "data-authos-signin-prompt": "" }, [
-            "Already have an account? ",
-            vue.h("a", { href: "/signin", "data-authos-link": "signin" }, "Sign in")
-          ])
-        ])
-      ]);
-    };
-  }
+//#endregion
+//#region src/components/SignUp.ts
+const SignUp = (0, vue.defineComponent)({
+	name: "SignUp",
+	props: {
+		onSuccess: {
+			type: Function,
+			default: void 0
+		},
+		onError: {
+			type: Function,
+			default: void 0
+		},
+		/** Organization slug for tenant context */
+		orgSlug: {
+			type: String,
+			default: void 0
+		},
+		/** Service slug for tenant attribution (used with orgSlug) */
+		serviceSlug: {
+			type: String,
+			default: void 0
+		},
+		/** List of OAuth providers to display buttons for */
+		providers: {
+			type: [Array, Boolean],
+			default: false
+		},
+		/** Show divider between OAuth and email form */
+		showDivider: {
+			type: Boolean,
+			default: true
+		},
+		/** Show sign in link */
+		showSignIn: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["success", "error"],
+	setup(props, { slots, emit }) {
+		const { client, options } = require_useAuthOS.useAuthOS();
+		const email = (0, vue.ref)("");
+		const password = (0, vue.ref)("");
+		const confirmPassword = (0, vue.ref)("");
+		const error = (0, vue.ref)(null);
+		const isSubmitting = (0, vue.ref)(false);
+		const isSuccess = (0, vue.ref)(false);
+		const hasOAuthConfig = !!(options.org && options.service);
+		const oauthProviders = Array.isArray(props.providers) ? props.providers : [];
+		async function submit() {
+			error.value = null;
+			if (password.value !== confirmPassword.value) {
+				error.value = "Passwords do not match";
+				return;
+			}
+			if (password.value.length < 8) {
+				error.value = "Password must be at least 8 characters";
+				return;
+			}
+			isSubmitting.value = true;
+			try {
+				await client.auth.register({
+					email: email.value,
+					password: password.value,
+					org_slug: props.orgSlug ?? options.org,
+					service_slug: props.serviceSlug ?? options.service
+				});
+				isSuccess.value = true;
+				emit("success");
+				props.onSuccess?.();
+			} catch (err) {
+				const message = err instanceof _drmhse_sso_sdk.SsoApiError ? err.message : "Registration failed";
+				error.value = message;
+				const e = err instanceof Error ? err : new Error(message);
+				emit("error", e);
+				props.onError?.(e);
+			} finally {
+				isSubmitting.value = false;
+			}
+		}
+		return () => {
+			const slotProps = {
+				email: email.value,
+				password: password.value,
+				error: error.value,
+				isSubmitting: isSubmitting.value,
+				updateEmail: (v) => email.value = v,
+				updatePassword: (v) => password.value = v,
+				submit
+			};
+			if (slots.default) return slots.default(slotProps);
+			if (isSuccess.value) return (0, vue.h)("div", {
+				"data-authos-signup": "",
+				"data-state": "success"
+			}, [(0, vue.h)("div", { "data-authos-success": "" }, [(0, vue.h)("h2", "Check your email"), (0, vue.h)("p", `We've sent a verification link to ${email.value}. Please click the link to verify your account.`)])]);
+			return (0, vue.h)("div", {
+				"data-authos-signup": "",
+				"data-state": "credentials"
+			}, [
+				oauthProviders.length > 0 && (0, vue.h)("div", { "data-authos-oauth-section": "" }, [oauthProviders.map((provider) => (0, vue.h)(OAuthButton, {
+					key: provider,
+					provider,
+					disabled: isSubmitting.value || !hasOAuthConfig
+				})), !hasOAuthConfig && (0, vue.h)("p", {
+					"data-authos-oauth-warning": "",
+					style: {
+						color: "orange",
+						fontSize: "0.875rem"
+					}
+				}, "OAuth requires org and service in plugin options")]),
+				oauthProviders.length > 0 && props.showDivider && (0, vue.h)("div", { "data-authos-divider": "" }, [(0, vue.h)("span", "or")]),
+				(0, vue.h)("form", { onSubmit: (e) => {
+					e.preventDefault();
+					submit();
+				} }, [
+					(0, vue.h)("div", { "data-authos-field": "email" }, [(0, vue.h)("label", { for: "authos-signup-email" }, "Email"), (0, vue.h)("input", {
+						id: "authos-signup-email",
+						type: "email",
+						autocomplete: "email",
+						value: email.value,
+						placeholder: "Enter your email",
+						required: true,
+						disabled: isSubmitting.value,
+						onInput: (e) => email.value = e.target.value
+					})]),
+					(0, vue.h)("div", { "data-authos-field": "password" }, [(0, vue.h)("label", { for: "authos-signup-password" }, "Password"), (0, vue.h)("input", {
+						id: "authos-signup-password",
+						type: "password",
+						autocomplete: "new-password",
+						value: password.value,
+						placeholder: "Create a password",
+						required: true,
+						disabled: isSubmitting.value,
+						onInput: (e) => password.value = e.target.value
+					})]),
+					(0, vue.h)("div", { "data-authos-field": "confirm-password" }, [(0, vue.h)("label", { for: "authos-signup-confirm" }, "Confirm Password"), (0, vue.h)("input", {
+						id: "authos-signup-confirm",
+						type: "password",
+						autocomplete: "new-password",
+						value: confirmPassword.value,
+						placeholder: "Confirm your password",
+						required: true,
+						disabled: isSubmitting.value,
+						onInput: (e) => confirmPassword.value = e.target.value
+					})]),
+					error.value && (0, vue.h)("div", { "data-authos-error": "" }, error.value),
+					(0, vue.h)("button", {
+						type: "submit",
+						disabled: isSubmitting.value,
+						"data-authos-submit": ""
+					}, isSubmitting.value ? "Creating account..." : "Sign Up"),
+					props.showSignIn && (0, vue.h)("div", { "data-authos-signin-prompt": "" }, ["Already have an account? ", (0, vue.h)("a", {
+						href: "/signin",
+						"data-authos-link": "signin"
+					}, "Sign in")])
+				])
+			]);
+		};
+	}
 });
-var OrganizationSwitcher = vue.defineComponent({
-  name: "OrganizationSwitcher",
-  props: {
-    onSwitch: {
-      type: Function,
-      default: void 0
-    }
-  },
-  emits: ["switch"],
-  setup(props, { slots, emit }) {
-    const { currentOrganization, organizations, switchOrganization, isSwitching } = useOrganization();
-    async function switchTo(slug) {
-      await switchOrganization(slug);
-      const org = organizations.value.find((o) => o.organization.slug === slug);
-      if (org) {
-        emit("switch", org);
-        props.onSwitch?.(org);
-      }
-    }
-    return () => {
-      const slotProps = {
-        currentOrganization: currentOrganization.value,
-        organizations: organizations.value,
-        isSwitching: isSwitching.value,
-        switchTo
-      };
-      if (slots.default) {
-        return slots.default(slotProps);
-      }
-      return vue.h(
-        "div",
-        { "data-authos-orgswitcher": "", "data-state": organizations.value.length > 0 ? "ready" : "empty" },
-        organizations.value.length > 0 ? vue.h(
-          "select",
-          {
-            value: currentOrganization.value?.organization.slug ?? "",
-            disabled: isSwitching.value,
-            onChange: (e) => switchTo(e.target.value)
-          },
-          organizations.value.map(
-            (org) => vue.h("option", { key: org.organization.id, value: org.organization.slug }, org.organization.name)
-          )
-        ) : "No organizations"
-      );
-    };
-  }
+//#endregion
+//#region src/components/OrganizationSwitcher.ts
+const OrganizationSwitcher = (0, vue.defineComponent)({
+	name: "OrganizationSwitcher",
+	props: { onSwitch: {
+		type: Function,
+		default: void 0
+	} },
+	emits: ["switch"],
+	setup(props, { slots, emit }) {
+		const { currentOrganization, organizations, switchOrganization, isSwitching } = useOrganization();
+		async function switchTo(slug) {
+			await switchOrganization(slug);
+			const org = organizations.value.find((o) => o.organization.slug === slug);
+			if (org) {
+				emit("switch", org);
+				props.onSwitch?.(org);
+			}
+		}
+		return () => {
+			const slotProps = {
+				currentOrganization: currentOrganization.value,
+				organizations: organizations.value,
+				isSwitching: isSwitching.value,
+				switchTo
+			};
+			if (slots.default) return slots.default(slotProps);
+			return (0, vue.h)("div", {
+				"data-authos-orgswitcher": "",
+				"data-state": organizations.value.length > 0 ? "ready" : "empty"
+			}, organizations.value.length > 0 ? (0, vue.h)("select", {
+				value: currentOrganization.value?.organization.slug ?? "",
+				disabled: isSwitching.value,
+				onChange: (e) => switchTo(e.target.value)
+			}, organizations.value.map((org) => (0, vue.h)("option", {
+				key: org.organization.id,
+				value: org.organization.slug
+			}, org.organization.name))) : "No organizations");
+		};
+	}
 });
-var UserButton = vue.defineComponent({
-  name: "UserButton",
-  props: {
-    onLogout: {
-      type: Function,
-      default: void 0
-    }
-  },
-  emits: ["logout"],
-  setup(props, { slots, emit }) {
-    const { user, isLoading } = useUser();
-    const { client } = useAuthOS();
-    const isLoggingOut = vue.ref(false);
-    async function logout() {
-      isLoggingOut.value = true;
-      try {
-        await client.auth.logout();
-        emit("logout");
-        props.onLogout?.();
-      } finally {
-        isLoggingOut.value = false;
-      }
-    }
-    return () => {
-      const slotProps = {
-        user: user.value,
-        isLoading: isLoading.value,
-        isLoggingOut: isLoggingOut.value,
-        logout
-      };
-      if (slots.default) {
-        return slots.default(slotProps);
-      }
-      if (isLoading.value) {
-        return vue.h("div", { "data-authos-userbutton": "", "data-state": "loading" }, "Loading...");
-      }
-      if (!user.value) {
-        return vue.h("div", { "data-authos-userbutton": "", "data-state": "signed-out" }, "Not signed in");
-      }
-      const getInitials = (email) => {
-        const name = email.split("@")[0];
-        return name.substring(0, 2).toUpperCase();
-      };
-      return vue.h("div", { "data-authos-userbutton": "", "data-state": "signed-in" }, [
-        vue.h("div", { "data-authos-avatar": "" }, getInitials(user.value.email)),
-        vue.h("span", { "data-authos-email": "" }, user.value.email),
-        vue.h(
-          "button",
-          {
-            "data-authos-logout": "",
-            onClick: logout,
-            disabled: isLoggingOut.value
-          },
-          isLoggingOut.value ? "Logging out..." : "Logout"
-        )
-      ]);
-    };
-  }
+//#endregion
+//#region src/components/UserButton.ts
+const UserButton = (0, vue.defineComponent)({
+	name: "UserButton",
+	props: { onLogout: {
+		type: Function,
+		default: void 0
+	} },
+	emits: ["logout"],
+	setup(props, { slots, emit }) {
+		const { user, isLoading } = useUser();
+		const { client } = require_useAuthOS.useAuthOS();
+		const isLoggingOut = (0, vue.ref)(false);
+		async function logout() {
+			isLoggingOut.value = true;
+			try {
+				await client.auth.logout();
+				emit("logout");
+				props.onLogout?.();
+			} finally {
+				isLoggingOut.value = false;
+			}
+		}
+		return () => {
+			const slotProps = {
+				user: user.value,
+				isLoading: isLoading.value,
+				isLoggingOut: isLoggingOut.value,
+				logout
+			};
+			if (slots.default) return slots.default(slotProps);
+			if (isLoading.value) return (0, vue.h)("div", {
+				"data-authos-userbutton": "",
+				"data-state": "loading"
+			}, "Loading...");
+			if (!user.value) return (0, vue.h)("div", {
+				"data-authos-userbutton": "",
+				"data-state": "signed-out"
+			}, "Not signed in");
+			const getInitials = (email) => {
+				return email.split("@")[0].substring(0, 2).toUpperCase();
+			};
+			return (0, vue.h)("div", {
+				"data-authos-userbutton": "",
+				"data-state": "signed-in"
+			}, [
+				(0, vue.h)("div", { "data-authos-avatar": "" }, getInitials(user.value.email)),
+				(0, vue.h)("span", { "data-authos-email": "" }, user.value.email),
+				(0, vue.h)("button", {
+					"data-authos-logout": "",
+					onClick: logout,
+					disabled: isLoggingOut.value
+				}, isLoggingOut.value ? "Logging out..." : "Logout")
+			]);
+		};
+	}
 });
-var Protect = vue.defineComponent({
-  name: "Protect",
-  props: {
-    permission: {
-      type: String,
-      default: void 0
-    },
-    permissions: {
-      type: Array,
-      default: void 0
-    },
-    requireAll: {
-      type: Boolean,
-      default: false
-    },
-    fallback: {
-      type: [Object, Function],
-      default: void 0
-    }
-  },
-  setup(props, { slots }) {
-    const { user, isLoading } = useUser();
-    const hasAccess = vue.computed(() => {
-      if (isLoading.value || !user.value) {
-        return false;
-      }
-      const userPermissions = user.value.permissions ?? [];
-      if (props.permission) {
-        return userPermissions.includes(props.permission);
-      }
-      if (props.permissions && props.permissions.length > 0) {
-        if (props.requireAll) {
-          return props.permissions.every((p) => userPermissions.includes(p));
-        }
-        return props.permissions.some((p) => userPermissions.includes(p));
-      }
-      return true;
-    });
-    return () => {
-      if (isLoading.value) {
-        return vue.h("div", { "data-authos-protect": "", "data-state": "loading" });
-      }
-      if (hasAccess.value) {
-        return vue.h("div", { "data-authos-protect": "", "data-state": "allowed" }, slots.default?.());
-      }
-      if (props.fallback) {
-        const fallbackContent = typeof props.fallback === "function" ? props.fallback() : props.fallback;
-        return vue.h("div", { "data-authos-protect": "", "data-state": "denied" }, [fallbackContent]);
-      }
-      if (slots.fallback) {
-        return vue.h("div", { "data-authos-protect": "", "data-state": "denied" }, slots.fallback());
-      }
-      return vue.h("div", { "data-authos-protect": "", "data-state": "denied" });
-    };
-  }
+//#endregion
+//#region src/components/Protect.ts
+const Protect = (0, vue.defineComponent)({
+	name: "Protect",
+	props: {
+		permission: {
+			type: String,
+			default: void 0
+		},
+		permissions: {
+			type: Array,
+			default: void 0
+		},
+		requireAll: {
+			type: Boolean,
+			default: false
+		},
+		fallback: {
+			type: [Object, Function],
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const { user, isLoading } = useUser();
+		const hasAccess = (0, vue.computed)(() => {
+			if (isLoading.value || !user.value) return false;
+			const userPermissions = user.value.permissions ?? [];
+			if (props.permission) return userPermissions.includes(props.permission);
+			if (props.permissions && props.permissions.length > 0) {
+				if (props.requireAll) return props.permissions.every((p) => userPermissions.includes(p));
+				return props.permissions.some((p) => userPermissions.includes(p));
+			}
+			return true;
+		});
+		return () => {
+			if (isLoading.value) return (0, vue.h)("div", {
+				"data-authos-protect": "",
+				"data-state": "loading"
+			});
+			if (hasAccess.value) return (0, vue.h)("div", {
+				"data-authos-protect": "",
+				"data-state": "allowed"
+			}, slots.default?.());
+			if (props.fallback) return (0, vue.h)("div", {
+				"data-authos-protect": "",
+				"data-state": "denied"
+			}, [typeof props.fallback === "function" ? props.fallback() : props.fallback]);
+			if (slots.fallback) return (0, vue.h)("div", {
+				"data-authos-protect": "",
+				"data-state": "denied"
+			}, slots.fallback());
+			return (0, vue.h)("div", {
+				"data-authos-protect": "",
+				"data-state": "denied"
+			});
+		};
+	}
 });
-var SignedIn = vue.defineComponent({
-  name: "SignedIn",
-  setup(_, { slots }) {
-    const { isAuthenticated, isLoading } = useAuthOS();
-    return () => {
-      if (isLoading.value) {
-        return null;
-      }
-      if (!isAuthenticated.value) {
-        return null;
-      }
-      return slots.default?.();
-    };
-  }
+//#endregion
+//#region src/components/SignedIn.ts
+/**
+* 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>
+* ```
+*/
+const SignedIn = (0, vue.defineComponent)({
+	name: "SignedIn",
+	setup(_, { slots }) {
+		const { isAuthenticated, isLoading } = require_useAuthOS.useAuthOS();
+		return () => {
+			if (isLoading.value) return null;
+			if (!isAuthenticated.value) return null;
+			return slots.default?.();
+		};
+	}
 });
-var SignedOut = vue.defineComponent({
-  name: "SignedOut",
-  setup(_, { slots }) {
-    const { isAuthenticated, isLoading } = useAuthOS();
-    return () => {
-      if (isLoading.value) {
-        return null;
-      }
-      if (isAuthenticated.value) {
-        return null;
-      }
-      return slots.default?.();
-    };
-  }
+//#endregion
+//#region src/components/SignedOut.ts
+/**
+* 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>
+* ```
+*/
+const SignedOut = (0, vue.defineComponent)({
+	name: "SignedOut",
+	setup(_, { slots }) {
+		const { isAuthenticated, isLoading } = require_useAuthOS.useAuthOS();
+		return () => {
+			if (isLoading.value) return null;
+			if (isAuthenticated.value) return null;
+			return slots.default?.();
+		};
+	}
 });
-var MagicLinkSignIn = vue.defineComponent({
-  name: "MagicLinkSignIn",
-  props: {
-    showPasswordSignIn: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ["success", "error"],
-  setup(props, { emit, slots }) {
-    const { client } = useAuthOS();
-    const email = vue.ref("");
-    const isLoading = vue.ref(false);
-    const error = vue.ref(null);
-    const isSent = vue.ref(false);
-    async function handleSubmit() {
-      error.value = null;
-      isLoading.value = true;
-      try {
-        await client.magicLinks.request({ email: email.value });
-        isSent.value = true;
-        emit("success");
-      } catch (err) {
-        const message = err instanceof Error ? err.message : "Failed to send magic link";
-        error.value = message;
-        emit("error", err);
-      } finally {
-        isLoading.value = false;
-      }
-    }
-    const slotProps = vue.computed(() => ({
-      email: email.value,
-      isLoading: isLoading.value,
-      error: error.value,
-      isSent: isSent.value,
-      updateEmail: (val) => {
-        email.value = val;
-      },
-      submit: handleSubmit,
-      reset: () => {
-        isSent.value = false;
-      }
-    }));
-    return () => {
-      if (slots.default) {
-        return slots.default(slotProps.value);
-      }
-      if (isSent.value) {
-        return vue.h("div", { "data-authos-magic-link": "", "data-state": "sent" }, [
-          vue.h("div", { "data-authos-success": "" }, [
-            vue.h("p", "Check your email!"),
-            vue.h("p", ["We sent a login link to ", vue.h("strong", email.value)])
-          ]),
-          vue.h("button", {
-            type: "button",
-            onClick: () => {
-              isSent.value = false;
-            },
-            "data-authos-back": ""
-          }, "Use a different email")
-        ]);
-      }
-      return vue.h("form", {
-        onSubmit: (e) => {
-          e.preventDefault();
-          handleSubmit();
-        },
-        "data-authos-magic-link": "",
-        "data-state": "form"
-      }, [
-        vue.h("div", { "data-authos-field": "email" }, [
-          vue.h("label", { for: "authos-magic-email" }, "Email"),
-          vue.h("input", {
-            id: "authos-magic-email",
-            type: "email",
-            autocomplete: "email",
-            value: email.value,
-            onInput: (e) => {
-              email.value = e.target.value;
-            },
-            placeholder: "Enter your email",
-            required: true,
-            disabled: isLoading.value
-          })
-        ]),
-        error.value ? vue.h("div", { "data-authos-error": "" }, error.value) : null,
-        vue.h("button", {
-          type: "submit",
-          disabled: isLoading.value,
-          "data-authos-submit": ""
-        }, isLoading.value ? "Sending..." : "Send Magic Link"),
-        props.showPasswordSignIn ? vue.h("div", { "data-authos-signin-prompt": "" }, [
-          vue.h("a", { href: "/signin", "data-authos-link": "signin" }, "Sign in with password")
-        ]) : null
-      ]);
-    };
-  }
+//#endregion
+//#region src/components/MagicLinkSignIn.ts
+/**
+* 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>
+* ```
+*/
+const MagicLinkSignIn = (0, vue.defineComponent)({
+	name: "MagicLinkSignIn",
+	props: { showPasswordSignIn: {
+		type: Boolean,
+		default: true
+	} },
+	emits: ["success", "error"],
+	setup(props, { emit, slots }) {
+		const { client } = require_useAuthOS.useAuthOS();
+		const email = (0, vue.ref)("");
+		const isLoading = (0, vue.ref)(false);
+		const error = (0, vue.ref)(null);
+		const isSent = (0, vue.ref)(false);
+		async function handleSubmit() {
+			error.value = null;
+			isLoading.value = true;
+			try {
+				await client.magicLinks.request({ email: email.value });
+				isSent.value = true;
+				emit("success");
+			} catch (err) {
+				error.value = err instanceof Error ? err.message : "Failed to send magic link";
+				emit("error", err);
+			} finally {
+				isLoading.value = false;
+			}
+		}
+		const slotProps = (0, vue.computed)(() => ({
+			email: email.value,
+			isLoading: isLoading.value,
+			error: error.value,
+			isSent: isSent.value,
+			updateEmail: (val) => {
+				email.value = val;
+			},
+			submit: handleSubmit,
+			reset: () => {
+				isSent.value = false;
+			}
+		}));
+		return () => {
+			if (slots.default) return slots.default(slotProps.value);
+			if (isSent.value) return (0, vue.h)("div", {
+				"data-authos-magic-link": "",
+				"data-state": "sent"
+			}, [(0, vue.h)("div", { "data-authos-success": "" }, [(0, vue.h)("p", "Check your email!"), (0, vue.h)("p", ["We sent a login link to ", (0, vue.h)("strong", email.value)])]), (0, vue.h)("button", {
+				type: "button",
+				onClick: () => {
+					isSent.value = false;
+				},
+				"data-authos-back": ""
+			}, "Use a different email")]);
+			return (0, vue.h)("form", {
+				onSubmit: (e) => {
+					e.preventDefault();
+					handleSubmit();
+				},
+				"data-authos-magic-link": "",
+				"data-state": "form"
+			}, [
+				(0, vue.h)("div", { "data-authos-field": "email" }, [(0, vue.h)("label", { for: "authos-magic-email" }, "Email"), (0, vue.h)("input", {
+					id: "authos-magic-email",
+					type: "email",
+					autocomplete: "email",
+					value: email.value,
+					onInput: (e) => {
+						email.value = e.target.value;
+					},
+					placeholder: "Enter your email",
+					required: true,
+					disabled: isLoading.value
+				})]),
+				error.value ? (0, vue.h)("div", { "data-authos-error": "" }, error.value) : null,
+				(0, vue.h)("button", {
+					type: "submit",
+					disabled: isLoading.value,
+					"data-authos-submit": ""
+				}, isLoading.value ? "Sending..." : "Send Magic Link"),
+				props.showPasswordSignIn ? (0, vue.h)("div", { "data-authos-signin-prompt": "" }, [(0, vue.h)("a", {
+					href: "/signin",
+					"data-authos-link": "signin"
+				}, "Sign in with password")]) : null
+			]);
+		};
+	}
 });
-var PasskeySignIn = vue.defineComponent({
-  name: "PasskeySignIn",
-  props: {
-    showPasswordSignIn: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ["success", "error"],
-  setup(props, { emit, slots }) {
-    const { client } = useAuthOS();
-    const email = vue.ref("");
-    const isLoading = vue.ref(false);
-    const error = vue.ref(null);
-    const isSupported = vue.ref(true);
-    vue.onMounted(() => {
-      isSupported.value = client.passkeys.isSupported();
-    });
-    async function handleSubmit() {
-      error.value = null;
-      isLoading.value = true;
-      try {
-        await client.passkeys.login(email.value);
-        emit("success");
-      } catch (err) {
-        const message = err instanceof Error ? err.message : "Passkey authentication failed";
-        error.value = message;
-        emit("error", err);
-      } finally {
-        isLoading.value = false;
-      }
-    }
-    const slotProps = vue.computed(() => ({
-      email: email.value,
-      isLoading: isLoading.value,
-      error: error.value,
-      isSupported: isSupported.value,
-      updateEmail: (val) => {
-        email.value = val;
-      },
-      submit: handleSubmit
-    }));
-    return () => {
-      if (slots.default) {
-        return slots.default(slotProps.value);
-      }
-      if (!isSupported.value) {
-        return vue.h("div", {
-          "data-authos-passkey": "",
-          "data-state": "unsupported"
-        }, [
-          vue.h("div", { "data-authos-error": "" }, "Passkeys are not supported in this browser."),
-          props.showPasswordSignIn ? vue.h("a", { href: "/signin", "data-authos-link": "signin" }, "Sign in with password") : null
-        ]);
-      }
-      return vue.h("form", {
-        onSubmit: (e) => {
-          e.preventDefault();
-          handleSubmit();
-        },
-        "data-authos-passkey": ""
-      }, [
-        vue.h("div", { "data-authos-field": "email" }, [
-          vue.h("label", { for: "authos-passkey-email" }, "Email"),
-          vue.h("input", {
-            id: "authos-passkey-email",
-            type: "email",
-            autocomplete: "email webauthn",
-            value: email.value,
-            onInput: (e) => {
-              email.value = e.target.value;
-            },
-            placeholder: "Enter your email",
-            required: true,
-            disabled: isLoading.value
-          })
-        ]),
-        error.value ? vue.h("div", { "data-authos-error": "" }, error.value) : null,
-        vue.h("button", {
-          type: "submit",
-          disabled: isLoading.value,
-          "data-authos-submit": ""
-        }, isLoading.value ? "Authenticating..." : "Sign in with Passkey"),
-        props.showPasswordSignIn ? vue.h("div", { "data-authos-signin-prompt": "" }, [
-          vue.h("a", { href: "/signin", "data-authos-link": "signin" }, "Sign in with password")
-        ]) : null
-      ]);
-    };
-  }
+//#endregion
+//#region src/components/PasskeySignIn.ts
+/**
+* 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>
+* ```
+*/
+const PasskeySignIn = (0, vue.defineComponent)({
+	name: "PasskeySignIn",
+	props: {
+		showPasswordSignIn: {
+			type: Boolean,
+			default: true
+		},
+		orgSlug: {
+			type: String,
+			default: void 0
+		},
+		serviceSlug: {
+			type: String,
+			default: void 0
+		},
+		redirectUri: {
+			type: String,
+			default: void 0
+		},
+		state: {
+			type: String,
+			default: void 0
+		}
+	},
+	emits: ["success", "error"],
+	setup(props, { emit, slots }) {
+		const { client, options } = require_useAuthOS.useAuthOS();
+		const email = (0, vue.ref)("");
+		const isLoading = (0, vue.ref)(false);
+		const error = (0, vue.ref)(null);
+		const isSupported = (0, vue.ref)(true);
+		(0, vue.onMounted)(() => {
+			isSupported.value = client.passkeys.isSupported();
+		});
+		async function handleSubmit() {
+			error.value = null;
+			isLoading.value = true;
+			try {
+				const org = props.orgSlug ?? options.org;
+				const service = props.serviceSlug ?? options.service;
+				const passkeyContext = org && service ? {
+					org_slug: org,
+					service_slug: service,
+					redirect_uri: props.redirectUri ?? options.redirectUri,
+					state: props.state
+				} : void 0;
+				await client.passkeys.login(email.value, passkeyContext);
+				emit("success");
+			} catch (err) {
+				error.value = err instanceof Error ? err.message : "Passkey authentication failed";
+				emit("error", err);
+			} finally {
+				isLoading.value = false;
+			}
+		}
+		const slotProps = (0, vue.computed)(() => ({
+			email: email.value,
+			isLoading: isLoading.value,
+			error: error.value,
+			isSupported: isSupported.value,
+			updateEmail: (val) => {
+				email.value = val;
+			},
+			submit: handleSubmit
+		}));
+		return () => {
+			if (slots.default) return slots.default(slotProps.value);
+			if (!isSupported.value) return (0, vue.h)("div", {
+				"data-authos-passkey": "",
+				"data-state": "unsupported"
+			}, [(0, vue.h)("div", { "data-authos-error": "" }, "Passkeys are not supported in this browser."), props.showPasswordSignIn ? (0, vue.h)("a", {
+				href: "/signin",
+				"data-authos-link": "signin"
+			}, "Sign in with password") : null]);
+			return (0, vue.h)("form", {
+				onSubmit: (e) => {
+					e.preventDefault();
+					handleSubmit();
+				},
+				"data-authos-passkey": ""
+			}, [
+				(0, vue.h)("div", { "data-authos-field": "email" }, [(0, vue.h)("label", { for: "authos-passkey-email" }, "Email"), (0, vue.h)("input", {
+					id: "authos-passkey-email",
+					type: "email",
+					autocomplete: "email webauthn",
+					value: email.value,
+					onInput: (e) => {
+						email.value = e.target.value;
+					},
+					placeholder: "Enter your email",
+					required: true,
+					disabled: isLoading.value
+				})]),
+				error.value ? (0, vue.h)("div", { "data-authos-error": "" }, error.value) : null,
+				(0, vue.h)("button", {
+					type: "submit",
+					disabled: isLoading.value,
+					"data-authos-submit": ""
+				}, isLoading.value ? "Authenticating..." : "Sign in with Passkey"),
+				props.showPasswordSignIn ? (0, vue.h)("div", { "data-authos-signin-prompt": "" }, [(0, vue.h)("a", {
+					href: "/signin",
+					"data-authos-link": "signin"
+				}, "Sign in with password")]) : null
+			]);
+		};
+	}
 });
-var Callback = vue.defineComponent({
-  name: "Callback",
-  props: {
-    onSuccess: {
-      type: Function,
-      default: void 0
-    },
-    onError: {
-      type: Function,
-      default: void 0
-    }
-  },
-  emits: ["success", "error"],
-  setup(props, { slots, emit }) {
-    const { client } = useAuthOS();
-    const error = vue.ref(null);
-    vue.onMounted(async () => {
-      if (!client) {
-        error.value = "AuthOS client not initialized";
-        return;
-      }
-      const hashParams = new URLSearchParams(window.location.hash.substring(1));
-      const queryParams = new URLSearchParams(window.location.search);
-      const accessToken = hashParams.get("access_token") || queryParams.get("access_token");
-      const refreshToken = hashParams.get("refresh_token") || queryParams.get("refresh_token");
-      const errorParam = hashParams.get("error") || queryParams.get("error");
-      const errorDescription = hashParams.get("error_description") || queryParams.get("error_description");
-      if (errorParam) {
-        const msg = errorDescription || errorParam;
-        error.value = msg;
-        const e = new Error(msg);
-        emit("error", e);
-        props.onError?.(e);
-        return;
-      }
-      if (accessToken) {
-        try {
-          await client.setSession({
-            access_token: accessToken,
-            refresh_token: refreshToken || void 0
-          });
-          emit("success");
-          props.onSuccess?.();
-        } catch (err) {
-          const message = err.message || "Failed to set session";
-          error.value = message;
-          const e = err instanceof Error ? err : new Error(message);
-          emit("error", e);
-          props.onError?.(e);
-        }
-      } else {
-        const message = "No authentication tokens found in callback URL.";
-        error.value = message;
-        const e = new Error(message);
-        emit("error", e);
-        props.onError?.(e);
-      }
-    });
-    return () => {
-      const slotProps = {
-        error: error.value
-      };
-      if (slots.default) {
-        return slots.default(slotProps);
-      }
-      return vue.h("div", { "data-authos-callback": "" }, [
-        error.value ? vue.h("div", { "data-authos-error": "" }, error.value) : vue.h("div", { "data-authos-loading": "" }, "Completing sign in...")
-      ]);
-    };
-  }
+//#endregion
+//#region src/components/Callback.ts
+const Callback = (0, vue.defineComponent)({
+	name: "Callback",
+	props: {
+		onSuccess: {
+			type: Function,
+			default: void 0
+		},
+		onError: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: ["success", "error"],
+	setup(props, { slots, emit }) {
+		const { client } = require_useAuthOS.useAuthOS();
+		const error = (0, vue.ref)(null);
+		(0, vue.onMounted)(async () => {
+			if (!client) {
+				error.value = "AuthOS client not initialized";
+				return;
+			}
+			const hashParams = new URLSearchParams(window.location.hash.substring(1));
+			const queryParams = new URLSearchParams(window.location.search);
+			const accessToken = hashParams.get("access_token") || queryParams.get("access_token");
+			const refreshToken = hashParams.get("refresh_token") || queryParams.get("refresh_token");
+			const errorParam = hashParams.get("error") || queryParams.get("error");
+			const errorDescription = hashParams.get("error_description") || queryParams.get("error_description");
+			if (errorParam) {
+				const msg = errorDescription || errorParam;
+				error.value = msg;
+				const e = new Error(msg);
+				emit("error", e);
+				props.onError?.(e);
+				return;
+			}
+			if (accessToken) try {
+				await client.setSession({
+					access_token: accessToken,
+					refresh_token: refreshToken || void 0
+				});
+				emit("success");
+				props.onSuccess?.();
+			} catch (err) {
+				const message = err.message || "Failed to set session";
+				error.value = message;
+				const e = err instanceof Error ? err : new Error(message);
+				emit("error", e);
+				props.onError?.(e);
+			}
+			else {
+				const message = "No authentication tokens found in callback URL.";
+				error.value = message;
+				const e = /* @__PURE__ */ new Error(message);
+				emit("error", e);
+				props.onError?.(e);
+			}
+		});
+		return () => {
+			const slotProps = { error: error.value };
+			if (slots.default) return slots.default(slotProps);
+			return (0, vue.h)("div", { "data-authos-callback": "" }, [error.value ? (0, vue.h)("div", { "data-authos-error": "" }, error.value) : (0, vue.h)("div", { "data-authos-loading": "" }, "Completing sign in...")]);
+		};
+	}
 });
-
+//#endregion
+exports.AUTH_OS_INJECTION_KEY = require_useAuthOS.AUTH_OS_INJECTION_KEY;
 Object.defineProperty(exports, "AuthErrorCodes", {
-  enumerable: true,
-  get: function () { return ssoSdk.AuthErrorCodes; }
+	enumerable: true,
+	get: function() {
+		return _drmhse_sso_sdk.AuthErrorCodes;
+	}
 });
+exports.AuthOSProvider = AuthOSProvider;
 Object.defineProperty(exports, "BrowserStorage", {
-  enumerable: true,
-  get: function () { return ssoSdk.BrowserStorage; }
+	enumerable: true,
+	get: function() {
+		return _drmhse_sso_sdk.BrowserStorage;
+	}
 });
-Object.defineProperty(exports, "MemoryStorage", {
-  enumerable: true,
-  get: function () { return ssoSdk.MemoryStorage; }
-});
-Object.defineProperty(exports, "SsoApiError", {
-  enumerable: true,
-  get: function () { return ssoSdk.SsoApiError; }
-});
-exports.AUTH_OS_INJECTION_KEY = AUTH_OS_INJECTION_KEY;
-exports.AuthOSProvider = AuthOSProvider;
 exports.Callback = Callback;
 exports.MagicLinkSignIn = MagicLinkSignIn;
+Object.defineProperty(exports, "MemoryStorage", {
+	enumerable: true,
+	get: function() {
+		return _drmhse_sso_sdk.MemoryStorage;
+	}
+});
 exports.OAuthButton = OAuthButton;
 exports.OrganizationSwitcher = OrganizationSwitcher;
 exports.PasskeySignIn = PasskeySignIn;
@@ -1668,11 +1749,17 @@ exports.SignIn = SignIn;
 exports.SignUp = SignUp;
 exports.SignedIn = SignedIn;
 exports.SignedOut = SignedOut;
+Object.defineProperty(exports, "SsoApiError", {
+	enumerable: true,
+	get: function() {
+		return _drmhse_sso_sdk.SsoApiError;
+	}
+});
 exports.UserButton = UserButton;
 exports.createAuthOS = createAuthOS;
 exports.useAllPermissions = useAllPermissions;
 exports.useAnyPermission = useAnyPermission;
-exports.useAuthOS = useAuthOS;
+exports.useAuthOS = require_useAuthOS.useAuthOS;
 exports.useOrganization = useOrganization;
 exports.usePermission = usePermission;
 exports.useUser = useUser;