@drmhse/authos-vue 0.1.0

package/dist/index.js

@@ -0,0 +1,562 @@
+'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/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()
+  });
+  const state = vue.reactive({
+    user: null,
+    isAuthenticated: false,
+    isLoading: true,
+    currentOrganization: null,
+    organizations: []
+  });
+  const context = {
+    client,
+    state
+  };
+  return {
+    install(app) {
+      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 defaultClient = new ssoSdk.SsoClient({
+      baseURL: "http://localhost:3001",
+      storage: new ssoSdk.MemoryStorage()
+    });
+    return {
+      client: defaultClient,
+      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,
+    isLoading,
+    isAuthenticated
+  };
+}
+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
+  };
+}
+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 orgResponse = await context.client.organizations.get(slug);
+      context.state.currentOrganization = orgResponse;
+      return orgResponse;
+    } finally {
+      isSwitching.value = false;
+    }
+  }
+  return {
+    currentOrganization,
+    organizations,
+    switchOrganization,
+    isSwitching
+  };
+}
+var AuthOSProvider = vue.defineComponent({
+  name: "AuthOSProvider",
+  props: {
+    baseUrl: {
+      type: String,
+      required: true
+    },
+    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 context = { client, state };
+    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");
+  }
+});
+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 } = 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
+          });
+          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);
+      }
+      return vue.h("form", { onSubmit: (e) => {
+        e.preventDefault();
+        submit();
+      } }, [
+        step.value === "credentials" ? [
+          vue.h("input", {
+            type: "email",
+            value: email.value,
+            placeholder: "Email",
+            onInput: (e) => email.value = e.target.value
+          }),
+          vue.h("input", {
+            type: "password",
+            value: password.value,
+            placeholder: "Password",
+            onInput: (e) => password.value = e.target.value
+          })
+        ] : vue.h("input", {
+          type: "text",
+          value: mfaCode.value,
+          placeholder: "MFA Code",
+          onInput: (e) => mfaCode.value = e.target.value
+        }),
+        error.value && vue.h("p", { style: "color: red" }, error.value),
+        vue.h("button", { type: "submit", disabled: isSubmitting.value }, isSubmitting.value ? "Signing in..." : "Sign In")
+      ]);
+    };
+  }
+});
+var SignUp = vue.defineComponent({
+  name: "SignUp",
+  props: {
+    onSuccess: {
+      type: Function,
+      default: void 0
+    },
+    onError: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["success", "error"],
+  setup(props, { slots, emit }) {
+    const { client } = useAuthOS();
+    const email = vue.ref("");
+    const password = vue.ref("");
+    const error = vue.ref(null);
+    const isSubmitting = vue.ref(false);
+    async function submit() {
+      error.value = null;
+      isSubmitting.value = true;
+      try {
+        await client.auth.register({
+          email: email.value,
+          password: password.value
+        });
+        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);
+      }
+      return vue.h("form", { onSubmit: (e) => {
+        e.preventDefault();
+        submit();
+      } }, [
+        vue.h("input", {
+          type: "email",
+          value: email.value,
+          placeholder: "Email",
+          onInput: (e) => email.value = e.target.value
+        }),
+        vue.h("input", {
+          type: "password",
+          value: password.value,
+          placeholder: "Password",
+          onInput: (e) => password.value = e.target.value
+        }),
+        error.value && vue.h("p", { style: "color: red" }, error.value),
+        vue.h("button", { type: "submit", disabled: isSubmitting.value }, isSubmitting.value ? "Creating account..." : "Sign Up")
+      ]);
+    };
+  }
+});
+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"
+      );
+    };
+  }
+});
+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");
+      }
+      return vue.h("div", { "data-authos-userbutton": "", "data-state": "signed-in", style: "display: flex; align-items: center; gap: 8px;" }, [
+        vue.h("span", user.value.email),
+        vue.h(
+          "button",
+          {
+            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" });
+    };
+  }
+});
+
+Object.defineProperty(exports, "AuthErrorCodes", {
+  enumerable: true,
+  get: function () { return ssoSdk.AuthErrorCodes; }
+});
+Object.defineProperty(exports, "BrowserStorage", {
+  enumerable: true,
+  get: function () { return ssoSdk.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.OrganizationSwitcher = OrganizationSwitcher;
+exports.Protect = Protect;
+exports.SignIn = SignIn;
+exports.SignUp = SignUp;
+exports.UserButton = UserButton;
+exports.createAuthOS = createAuthOS;
+exports.useAuthOS = useAuthOS;
+exports.useOrganization = useOrganization;
+exports.useUser = useUser;