@drmhse/authos-vue 0.1.3 → 0.1.5

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { AUTH_OS_INJECTION_KEY, useAuthOS } from './chunk-OGRUDANK.mjs';
-export { AUTH_OS_INJECTION_KEY, useAuthOS } from './chunk-OGRUDANK.mjs';
+import { AUTH_OS_INJECTION_KEY, useAuthOS } from './chunk-YED35B36.mjs';
+export { AUTH_OS_INJECTION_KEY, useAuthOS } from './chunk-YED35B36.mjs';
 import './chunk-6DZX6EAA.mjs';
 import { defineComponent, reactive, provide, onMounted, onUnmounted, h, ref, computed, inject, nextTick } from 'vue';
 import { SsoClient, BrowserStorage, MemoryStorage, SsoApiError } from '@drmhse/sso-sdk';
@@ -17,7 +17,7 @@ function createAuthOS(options) {
     return new MemoryStorage();
   };
   const client = new SsoClient({
-    baseURL: options.baseUrl,
+    baseURL: options.baseURL,
     storage: getStorage(),
     token: options.initialToken
     // Pass initial token if provided
@@ -39,7 +39,8 @@ function createAuthOS(options) {
   });
   const context = {
     client,
-    state
+    state,
+    options
   };
   return {
     install(app) {
@@ -108,6 +109,11 @@ function useOrganization() {
     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;
@@ -122,13 +128,46 @@ function useOrganization() {
     isSwitching
   };
 }
+function usePermission(permission) {
+  const { user } = useUser();
+  return computed(() => {
+    if (!user.value || !permission) return false;
+    return user.value.permissions?.includes(permission) ?? false;
+  });
+}
+function useAnyPermission(permissions) {
+  const { user } = useUser();
+  return computed(() => {
+    if (!user.value || permissions.length === 0) return false;
+    return permissions.some((p) => user.value?.permissions?.includes(p));
+  });
+}
+function useAllPermissions(permissions) {
+  const { user } = useUser();
+  return computed(() => {
+    if (!user.value || permissions.length === 0) return false;
+    return permissions.every((p) => user.value?.permissions?.includes(p));
+  });
+}
 var AuthOSProvider = defineComponent({
   name: "AuthOSProvider",
   props: {
-    baseUrl: {
+    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
@@ -145,7 +184,7 @@ var AuthOSProvider = defineComponent({
       return new MemoryStorage();
     };
     const client = props.client ?? new SsoClient({
-      baseURL: props.baseUrl,
+      baseURL: props.baseURL,
       storage: getStorage()
     });
     const state = reactive({
@@ -155,7 +194,13 @@ var AuthOSProvider = defineComponent({
       currentOrganization: null,
       organizations: []
     });
-    const context = { client, state };
+    const options = {
+      baseURL: props.baseURL,
+      org: props.org,
+      service: props.service,
+      redirectUri: props.redirectUri
+    };
+    const context = { client, state, options };
     provide(AUTH_OS_INJECTION_KEY, context);
     let unsubscribe;
     onMounted(() => {
@@ -206,7 +251,7 @@ var SignIn = defineComponent({
   },
   emits: ["success", "error"],
   setup(props, { slots, emit }) {
-    const { client } = useAuthOS();
+    const { client, options } = useAuthOS();
     const email = ref("");
     const password = ref("");
     const mfaCode = ref("");
@@ -221,7 +266,9 @@ var SignIn = defineComponent({
         if (step.value === "credentials") {
           const result = await client.auth.login({
             email: email.value,
-            password: password.value
+            password: password.value,
+            org_slug: options.org,
+            service_slug: options.service
           });
           if (result.expires_in === MFA_PREAUTH_EXPIRY) {
             preauthToken.value = result.access_token;
@@ -300,6 +347,16 @@ var SignUp = defineComponent({
     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
     }
   },
   emits: ["success", "error"],
@@ -315,7 +372,9 @@ var SignUp = defineComponent({
       try {
         await client.auth.register({
           email: email.value,
-          password: password.value
+          password: password.value,
+          org_slug: props.orgSlug,
+          service_slug: props.serviceSlug
         });
         emit("success");
         props.onSuccess?.();
@@ -520,5 +579,296 @@ var Protect = defineComponent({
     };
   }
 });
+var PROVIDER_NAMES = {
+  github: "GitHub",
+  google: "Google",
+  microsoft: "Microsoft"
+};
+var OAuthButton = 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 = computed(() => !!(options.org && options.service));
+    const providerName = 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 h(
+        "button",
+        {
+          type: "button",
+          onClick: handleClick,
+          disabled: props.disabled || !isConfigured.value,
+          "data-authos-oauth": "",
+          "data-provider": props.provider
+        },
+        `Continue with ${providerName.value}`
+      );
+    };
+  }
+});
+var SignedIn = defineComponent({
+  name: "SignedIn",
+  setup(_, { slots }) {
+    const { isAuthenticated, isLoading } = useAuthOS();
+    return () => {
+      if (isLoading.value) {
+        return null;
+      }
+      if (!isAuthenticated.value) {
+        return null;
+      }
+      return slots.default?.();
+    };
+  }
+});
+var SignedOut = defineComponent({
+  name: "SignedOut",
+  setup(_, { slots }) {
+    const { isAuthenticated, isLoading } = useAuthOS();
+    return () => {
+      if (isLoading.value) {
+        return null;
+      }
+      if (isAuthenticated.value) {
+        return null;
+      }
+      return slots.default?.();
+    };
+  }
+});
+var MagicLinkSignIn = defineComponent({
+  name: "MagicLinkSignIn",
+  props: {
+    showPasswordSignIn: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["success", "error"],
+  setup(props, { emit, slots }) {
+    const { client } = useAuthOS();
+    const email = ref("");
+    const isLoading = ref(false);
+    const error = ref(null);
+    const isSent = 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 = 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 h("div", { "data-authos-magic-link": "", "data-state": "sent" }, [
+          h("div", { "data-authos-success": "" }, [
+            h("p", "Check your email!"),
+            h("p", ["We sent a login link to ", h("strong", email.value)])
+          ]),
+          h("button", {
+            type: "button",
+            onClick: () => {
+              isSent.value = false;
+            },
+            "data-authos-back": ""
+          }, "Use a different email")
+        ]);
+      }
+      return h("form", {
+        onSubmit: (e) => {
+          e.preventDefault();
+          handleSubmit();
+        },
+        "data-authos-magic-link": "",
+        "data-state": "form"
+      }, [
+        h("div", { "data-authos-field": "email" }, [
+          h("label", { for: "authos-magic-email" }, "Email"),
+          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 ? h("div", { "data-authos-error": "" }, error.value) : null,
+        h("button", {
+          type: "submit",
+          disabled: isLoading.value,
+          "data-authos-submit": ""
+        }, isLoading.value ? "Sending..." : "Send Magic Link"),
+        props.showPasswordSignIn ? h("div", { "data-authos-signin-prompt": "" }, [
+          h("a", { href: "/signin", "data-authos-link": "signin" }, "Sign in with password")
+        ]) : null
+      ]);
+    };
+  }
+});
+var PasskeySignIn = defineComponent({
+  name: "PasskeySignIn",
+  props: {
+    showPasswordSignIn: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["success", "error"],
+  setup(props, { emit, slots }) {
+    const { client } = useAuthOS();
+    const email = ref("");
+    const isLoading = ref(false);
+    const error = ref(null);
+    const isSupported = ref(true);
+    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 = 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 h("div", {
+          "data-authos-passkey": "",
+          "data-state": "unsupported"
+        }, [
+          h("div", { "data-authos-error": "" }, "Passkeys are not supported in this browser."),
+          props.showPasswordSignIn ? h("a", { href: "/signin", "data-authos-link": "signin" }, "Sign in with password") : null
+        ]);
+      }
+      return h("form", {
+        onSubmit: (e) => {
+          e.preventDefault();
+          handleSubmit();
+        },
+        "data-authos-passkey": ""
+      }, [
+        h("div", { "data-authos-field": "email" }, [
+          h("label", { for: "authos-passkey-email" }, "Email"),
+          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 ? h("div", { "data-authos-error": "" }, error.value) : null,
+        h("button", {
+          type: "submit",
+          disabled: isLoading.value,
+          "data-authos-submit": ""
+        }, isLoading.value ? "Authenticating..." : "Sign in with Passkey"),
+        props.showPasswordSignIn ? h("div", { "data-authos-signin-prompt": "" }, [
+          h("a", { href: "/signin", "data-authos-link": "signin" }, "Sign in with password")
+        ]) : null
+      ]);
+    };
+  }
+});
 
-export { AuthOSProvider, OrganizationSwitcher, Protect, SignIn, SignUp, UserButton, createAuthOS, useOrganization, useUser };
+export { AuthOSProvider, MagicLinkSignIn, OAuthButton, OrganizationSwitcher, PasskeySignIn, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton, createAuthOS, useAllPermissions, useAnyPermission, useOrganization, usePermission, useUser };

package/dist/nuxt.js

@@ -10492,12 +10492,16 @@ var AUTH_OS_INJECTION_KEY = /* @__PURE__ */ Symbol("authOS");
 function useAuthOS() {
   const context = vue.inject(AUTH_OS_INJECTION_KEY);
   if (!context) {
+    const defaultOptions = {
+      baseURL: "http://localhost:3001"
+    };
     const defaultClient = new ssoSdk.SsoClient({
-      baseURL: "http://localhost:3001",
+      baseURL: defaultOptions.baseURL,
       storage: new ssoSdk.MemoryStorage()
     });
     return {
       client: defaultClient,
+      options: defaultOptions,
       isLoading: vue.computed(() => false),
       isAuthenticated: vue.computed(() => false)
     };
@@ -10506,6 +10510,7 @@ function useAuthOS() {
   const isAuthenticated = vue.computed(() => context.state.isAuthenticated);
   return {
     client: context.client,
+    options: context.options,
     isLoading,
     isAuthenticated
   };

package/dist/nuxt.mjs

@@ -1,7 +1,7 @@
 import { defu, readPackageJSON, dirname, resolve, normalize, resolveModulePath, isAbsolute as isAbsolute$1, join, normalizeWindowsPath } from './chunk-QGSFJDIC.mjs';
 import './chunk-T2K7EIWY.mjs';
 import './chunk-C2J6NSID.mjs';
-import { useAuthOS } from './chunk-OGRUDANK.mjs';
+import { useAuthOS } from './chunk-YED35B36.mjs';
 import './chunk-VCTSSS2F.mjs';
 import './chunk-Z2UOP6GF.mjs';
 import './chunk-F6BPUSH3.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drmhse/authos-vue",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Vue and Nuxt adapter for AuthOS authentication",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -68,6 +68,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@drmhse/sso-sdk": "^0.3.4"
+    "@drmhse/sso-sdk": "^0.3.10"
   }
 }