@drmhse/authos-vue 0.1.2 → 0.1.4

package/dist/index.js

@@ -21,7 +21,7 @@ function createAuthOS(options) {
     return new ssoSdk.MemoryStorage();
   };
   const client = new ssoSdk.SsoClient({
-    baseURL: options.baseUrl,
+    baseURL: options.baseURL,
     storage: getStorage(),
     token: options.initialToken
     // Pass initial token if provided
@@ -43,7 +43,8 @@ function createAuthOS(options) {
   });
   const context = {
     client,
-    state
+    state,
+    options
   };
   return {
     install(app) {
@@ -83,12 +84,16 @@ function createAuthOS(options) {
 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)
     };
@@ -97,6 +102,7 @@ function useAuthOS() {
   const isAuthenticated = vue.computed(() => context.state.isAuthenticated);
   return {
     client: context.client,
+    options: context.options,
     isLoading,
     isAuthenticated
   };
@@ -133,6 +139,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;
@@ -147,13 +158,46 @@ function useOrganization() {
     isSwitching
   };
 }
+function usePermission(permission) {
+  const { user } = useUser();
+  return vue.computed(() => {
+    if (!user.value || !permission) return false;
+    return user.value.permissions?.includes(permission) ?? false;
+  });
+}
+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));
+  });
+}
+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));
+  });
+}
 var AuthOSProvider = vue.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
@@ -170,7 +214,7 @@ var AuthOSProvider = vue.defineComponent({
       return new ssoSdk.MemoryStorage();
     };
     const client = props.client ?? new ssoSdk.SsoClient({
-      baseURL: props.baseUrl,
+      baseURL: props.baseURL,
       storage: getStorage()
     });
     const state = vue.reactive({
@@ -180,7 +224,13 @@ var AuthOSProvider = vue.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 };
     vue.provide(AUTH_OS_INJECTION_KEY, context);
     let unsubscribe;
     vue.onMounted(() => {
@@ -545,6 +595,297 @@ var Protect = vue.defineComponent({
     };
   }
 });
+var PROVIDER_NAMES = {
+  github: "GitHub",
+  google: "Google",
+  microsoft: "Microsoft"
+};
+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
+        },
+        `Continue with ${providerName.value}`
+      );
+    };
+  }
+});
+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?.();
+    };
+  }
+});
+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?.();
+    };
+  }
+});
+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
+      ]);
+    };
+  }
+});
+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
+      ]);
+    };
+  }
+});
 
 Object.defineProperty(exports, "AuthErrorCodes", {
   enumerable: true,
@@ -564,12 +905,20 @@ Object.defineProperty(exports, "SsoApiError", {
 });
 exports.AUTH_OS_INJECTION_KEY = AUTH_OS_INJECTION_KEY;
 exports.AuthOSProvider = AuthOSProvider;
+exports.MagicLinkSignIn = MagicLinkSignIn;
+exports.OAuthButton = OAuthButton;
 exports.OrganizationSwitcher = OrganizationSwitcher;
+exports.PasskeySignIn = PasskeySignIn;
 exports.Protect = Protect;
 exports.SignIn = SignIn;
 exports.SignUp = SignUp;
+exports.SignedIn = SignedIn;
+exports.SignedOut = SignedOut;
 exports.UserButton = UserButton;
 exports.createAuthOS = createAuthOS;
+exports.useAllPermissions = useAllPermissions;
+exports.useAnyPermission = useAnyPermission;
 exports.useAuthOS = useAuthOS;
 exports.useOrganization = useOrganization;
+exports.usePermission = usePermission;
 exports.useUser = useUser;