@authsome/ui-vue 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,168 @@
+import { AuthConfig, User, Session, AuthClient } from '@authsome/ui-core';
+export { APIError, AuthConfig, AuthState, MFAEnrollment, Member, Organization, Session, TokenStorage, User } from '@authsome/ui-core';
+import * as vue from 'vue';
+import { App, Ref } from 'vue';
+
+/**
+ * Creates a Vue plugin that provides AuthSome authentication.
+ *
+ * ```ts
+ * const app = createApp(App);
+ * app.use(createAuthPlugin({ baseURL: "https://api.example.com" }));
+ * ```
+ */
+declare function createAuthPlugin(config: AuthConfig): {
+    install(app: App): void;
+};
+/**
+ * Main auth composable providing state and actions.
+ */
+declare function useAuth(): {
+    state: Readonly<Ref<{
+        readonly status: "idle";
+    } | {
+        readonly status: "loading";
+    } | {
+        readonly status: "authenticated";
+        readonly user: {
+            readonly app_id: {};
+            readonly ban_expires?: string | undefined;
+            readonly ban_reason?: string | undefined;
+            readonly banned: boolean;
+            readonly created_at: string;
+            readonly deleted_at?: string | undefined;
+            readonly display_username?: string | undefined;
+            readonly email: string;
+            readonly email_verified: boolean;
+            readonly id: {};
+            readonly image?: string | undefined;
+            readonly metadata?: {
+                readonly [x: string]: Readonly<unknown>;
+            } | undefined;
+            readonly name: string;
+            readonly phone?: string | undefined;
+            readonly phone_verified: boolean;
+            readonly updated_at: string;
+            readonly username?: string | undefined;
+        };
+        readonly session: {
+            readonly session_token: string;
+            readonly refresh_token: string;
+            readonly expires_at: string;
+        };
+    } | {
+        readonly status: "unauthenticated";
+    } | {
+        readonly status: "mfa_required";
+        readonly session: {
+            readonly session_token: string;
+            readonly refresh_token: string;
+            readonly expires_at: string;
+        };
+    } | {
+        readonly status: "error";
+        readonly error: string;
+    }, {
+        readonly status: "idle";
+    } | {
+        readonly status: "loading";
+    } | {
+        readonly status: "authenticated";
+        readonly user: {
+            readonly app_id: {};
+            readonly ban_expires?: string | undefined;
+            readonly ban_reason?: string | undefined;
+            readonly banned: boolean;
+            readonly created_at: string;
+            readonly deleted_at?: string | undefined;
+            readonly display_username?: string | undefined;
+            readonly email: string;
+            readonly email_verified: boolean;
+            readonly id: {};
+            readonly image?: string | undefined;
+            readonly metadata?: {
+                readonly [x: string]: Readonly<unknown>;
+            } | undefined;
+            readonly name: string;
+            readonly phone?: string | undefined;
+            readonly phone_verified: boolean;
+            readonly updated_at: string;
+            readonly username?: string | undefined;
+        };
+        readonly session: {
+            readonly session_token: string;
+            readonly refresh_token: string;
+            readonly expires_at: string;
+        };
+    } | {
+        readonly status: "unauthenticated";
+    } | {
+        readonly status: "mfa_required";
+        readonly session: {
+            readonly session_token: string;
+            readonly refresh_token: string;
+            readonly expires_at: string;
+        };
+    } | {
+        readonly status: "error";
+        readonly error: string;
+    }>>;
+    isAuthenticated: vue.ComputedRef<boolean>;
+    isLoading: vue.ComputedRef<boolean>;
+    user: vue.ComputedRef<User | null>;
+    session: vue.ComputedRef<Session | null>;
+    error: vue.ComputedRef<string | null>;
+    client: AuthClient;
+    signIn: (email: string, password: string) => Promise<void>;
+    signUp: (email: string, password: string, name?: string) => Promise<void>;
+    signOut: () => Promise<void>;
+    submitMFACode: (enrollmentId: string, code: string) => Promise<void>;
+    submitRecoveryCode: (code: string) => Promise<void>;
+};
+/**
+ * Composable to fetch and reload the user profile.
+ */
+declare function useUser(): {
+    user: vue.ComputedRef<User | null>;
+    isLoading: vue.ComputedRef<boolean>;
+    reload: () => Promise<void>;
+};
+/**
+ * Composable to list organizations.
+ */
+declare function useOrganizations(): {
+    organizations: Readonly<Ref<readonly {
+        readonly app_id: {};
+        readonly created_at: string;
+        readonly created_by: {};
+        readonly id: {};
+        readonly logo?: string | undefined;
+        readonly metadata?: {
+            readonly [x: string]: Readonly<unknown>;
+        } | undefined;
+        readonly name: string;
+        readonly slug: string;
+        readonly updated_at: string;
+    }[], readonly {
+        readonly app_id: {};
+        readonly created_at: string;
+        readonly created_by: {};
+        readonly id: {};
+        readonly logo?: string | undefined;
+        readonly metadata?: {
+            readonly [x: string]: Readonly<unknown>;
+        } | undefined;
+        readonly name: string;
+        readonly slug: string;
+        readonly updated_at: string;
+    }[]>>;
+    total: Readonly<Ref<number, number>>;
+    isLoading: Readonly<Ref<boolean, boolean>>;
+    reload: () => Promise<void>;
+};
+/**
+ * Composable that returns the current session token.
+ */
+declare function useSessionToken(): vue.ComputedRef<string | null>;
+
+export { createAuthPlugin, useAuth, useOrganizations, useSessionToken, useUser };

package/dist/index.js

@@ -0,0 +1,142 @@
+// src/composables.ts
+import {
+  computed,
+  inject,
+  onMounted,
+  readonly,
+  ref
+} from "vue";
+import {
+  AuthManager
+} from "@authsome/ui-core";
+var AUTH_KEY = /* @__PURE__ */ Symbol("authsome");
+var AUTH_STATE_KEY = /* @__PURE__ */ Symbol("authsome:state");
+function createAuthPlugin(config) {
+  return {
+    install(app) {
+      const manager = new AuthManager(config);
+      const state = ref(manager.getState());
+      manager.subscribe((s) => {
+        state.value = s;
+      });
+      app.provide(AUTH_KEY, manager);
+      app.provide(AUTH_STATE_KEY, state);
+      void manager.initialize();
+    }
+  };
+}
+function useManager() {
+  const manager = inject(AUTH_KEY);
+  if (!manager) {
+    throw new Error("useAuth requires the authsome plugin. Call app.use(createAuthPlugin(...)).");
+  }
+  return manager;
+}
+function useAuthState() {
+  const state = inject(AUTH_STATE_KEY);
+  if (!state) {
+    throw new Error("useAuth requires the authsome plugin. Call app.use(createAuthPlugin(...)).");
+  }
+  return state;
+}
+function useAuth() {
+  const manager = useManager();
+  const state = useAuthState();
+  const isAuthenticated = computed(() => state.value.status === "authenticated");
+  const isLoading = computed(() => state.value.status === "loading");
+  const user = computed(
+    () => state.value.status === "authenticated" ? state.value.user : null
+  );
+  const session = computed(
+    () => state.value.status === "authenticated" ? state.value.session : null
+  );
+  const error = computed(
+    () => state.value.status === "error" ? state.value.error : null
+  );
+  async function signIn(email, password) {
+    await manager.signIn({ email, password });
+  }
+  async function signUp(email, password, name) {
+    await manager.signUp({ email, password, name });
+  }
+  async function signOut() {
+    await manager.signOut();
+  }
+  async function submitMFACode(enrollmentId, code) {
+    await manager.submitMFACode(enrollmentId, code);
+  }
+  async function submitRecoveryCode(code) {
+    await manager.submitRecoveryCode(code);
+  }
+  return {
+    state: readonly(state),
+    isAuthenticated,
+    isLoading,
+    user,
+    session,
+    error,
+    client: manager.getClient(),
+    signIn,
+    signUp,
+    signOut,
+    submitMFACode,
+    submitRecoveryCode
+  };
+}
+function useUser() {
+  const { user: authUser, isLoading, session } = useAuth();
+  const manager = useManager();
+  const localUser = ref(authUser.value);
+  const stopWatch = computed(() => authUser.value);
+  async function reload() {
+    if (!session.value) return;
+    const u = await manager.getClient().getMe(session.value.session_token);
+    localUser.value = u;
+  }
+  return {
+    user: computed(() => localUser.value ?? authUser.value),
+    isLoading,
+    reload
+  };
+}
+function useOrganizations() {
+  const { session, isAuthenticated } = useAuth();
+  const manager = useManager();
+  const organizations = ref([]);
+  const total = ref(0);
+  const isLoading = ref(false);
+  async function load() {
+    if (!session.value) return;
+    isLoading.value = true;
+    try {
+      const res = await manager.getClient().listOrganizations(session.value.session_token);
+      organizations.value = res.items;
+      total.value = res.total;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+  onMounted(() => {
+    if (isAuthenticated.value) {
+      void load();
+    }
+  });
+  return {
+    organizations: readonly(organizations),
+    total: readonly(total),
+    isLoading: readonly(isLoading),
+    reload: load
+  };
+}
+function useSessionToken() {
+  const { session } = useAuth();
+  return computed(() => session.value?.session_token ?? null);
+}
+export {
+  createAuthPlugin,
+  useAuth,
+  useOrganizations,
+  useSessionToken,
+  useUser
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/composables.ts"],"sourcesContent":["/**\n * Vue 3 composables for AuthSome authentication.\n *\n * Usage:\n * ```ts\n * // main.ts\n * import { createAuthPlugin } from \"@authsome/ui-vue\";\n * app.use(createAuthPlugin({ baseURL: \"https://api.example.com\" }));\n *\n * // Component.vue\n * import { useAuth, useUser } from \"@authsome/ui-vue\";\n * const { signIn, isAuthenticated, user } = useAuth();\n * ```\n */\n\nimport {\n  computed,\n  inject,\n  onMounted,\n  onUnmounted,\n  readonly,\n  ref,\n  type App,\n  type InjectionKey,\n  type Ref,\n} from \"vue\";\nimport {\n  AuthManager,\n  type AuthConfig,\n  type AuthState,\n  type AuthClient,\n  type User,\n  type Session,\n  type Organization,\n  type ListResponse,\n} from \"@authsome/ui-core\";\n\n/** Injection key for the AuthManager. */\nconst AUTH_KEY: InjectionKey<AuthManager> = Symbol(\"authsome\");\n\n/** Injection key for the reactive auth state. */\nconst AUTH_STATE_KEY: InjectionKey<Ref<AuthState>> = Symbol(\"authsome:state\");\n\n/**\n * Creates a Vue plugin that provides AuthSome authentication.\n *\n * ```ts\n * const app = createApp(App);\n * app.use(createAuthPlugin({ baseURL: \"https://api.example.com\" }));\n * ```\n */\nexport function createAuthPlugin(config: AuthConfig) {\n  return {\n    install(app: App) {\n      const manager = new AuthManager(config);\n      const state = ref<AuthState>(manager.getState());\n\n      manager.subscribe((s) => {\n        state.value = s;\n      });\n\n      app.provide(AUTH_KEY, manager);\n      app.provide(AUTH_STATE_KEY, state);\n\n      // Initialize on mount (hydrate from storage).\n      void manager.initialize();\n    },\n  };\n}\n\nfunction useManager(): AuthManager {\n  const manager = inject(AUTH_KEY);\n  if (!manager) {\n    throw new Error(\"useAuth requires the authsome plugin. Call app.use(createAuthPlugin(...)).\");\n  }\n  return manager;\n}\n\nfunction useAuthState(): Ref<AuthState> {\n  const state = inject(AUTH_STATE_KEY);\n  if (!state) {\n    throw new Error(\"useAuth requires the authsome plugin. Call app.use(createAuthPlugin(...)).\");\n  }\n  return state;\n}\n\n/**\n * Main auth composable providing state and actions.\n */\nexport function useAuth() {\n  const manager = useManager();\n  const state = useAuthState();\n\n  const isAuthenticated = computed(() => state.value.status === \"authenticated\");\n  const isLoading = computed(() => state.value.status === \"loading\");\n\n  const user = computed<User | null>(() =>\n    state.value.status === \"authenticated\" ? state.value.user : null,\n  );\n\n  const session = computed<Session | null>(() =>\n    state.value.status === \"authenticated\" ? state.value.session : null,\n  );\n\n  const error = computed<string | null>(() =>\n    state.value.status === \"error\" ? state.value.error : null,\n  );\n\n  async function signIn(email: string, password: string) {\n    await manager.signIn({ email, password });\n  }\n\n  async function signUp(email: string, password: string, name?: string) {\n    await manager.signUp({ email, password, name });\n  }\n\n  async function signOut() {\n    await manager.signOut();\n  }\n\n  async function submitMFACode(enrollmentId: string, code: string) {\n    await manager.submitMFACode(enrollmentId, code);\n  }\n\n  async function submitRecoveryCode(code: string) {\n    await manager.submitRecoveryCode(code);\n  }\n\n  return {\n    state: readonly(state),\n    isAuthenticated,\n    isLoading,\n    user,\n    session,\n    error,\n    client: manager.getClient(),\n    signIn,\n    signUp,\n    signOut,\n    submitMFACode,\n    submitRecoveryCode,\n  };\n}\n\n/**\n * Composable to fetch and reload the user profile.\n */\nexport function useUser() {\n  const { user: authUser, isLoading, session } = useAuth();\n  const manager = useManager();\n  const localUser = ref<User | null>(authUser.value);\n\n  // Keep in sync with auth state.\n  const stopWatch = computed(() => authUser.value);\n\n  async function reload() {\n    if (!session.value) return;\n    const u = await manager.getClient().getMe(session.value.session_token);\n    localUser.value = u;\n  }\n\n  return {\n    user: computed(() => localUser.value ?? authUser.value),\n    isLoading,\n    reload,\n  };\n}\n\n/**\n * Composable to list organizations.\n */\nexport function useOrganizations() {\n  const { session, isAuthenticated } = useAuth();\n  const manager = useManager();\n\n  const organizations = ref<Organization[]>([]);\n  const total = ref(0);\n  const isLoading = ref(false);\n\n  async function load() {\n    if (!session.value) return;\n    isLoading.value = true;\n    try {\n      const res = await manager\n        .getClient()\n        .listOrganizations(session.value.session_token) as unknown as ListResponse<Organization>;\n      organizations.value = res.items;\n      total.value = res.total;\n    } finally {\n      isLoading.value = false;\n    }\n  }\n\n  onMounted(() => {\n    if (isAuthenticated.value) {\n      void load();\n    }\n  });\n\n  return {\n    organizations: readonly(organizations),\n    total: readonly(total),\n    isLoading: readonly(isLoading),\n    reload: load,\n  };\n}\n\n/**\n * Composable that returns the current session token.\n */\nexport function useSessionToken() {\n  const { session } = useAuth();\n  return computed(() => session.value?.session_token ?? null);\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@authsome/ui-vue",
+  "version": "1.0.0",
+  "description": "Vue.js bindings for AuthSome authentication UI",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xraph/authsome.git",
+    "directory": "ui/packages/vue"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@authsome/ui-core": "^1.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vue": "^3.4.0"
+  }
+}