@autional/vue 0.2.0

package/README.md

@@ -0,0 +1,58 @@
+# @authms/vue
+
+AuthMS Vue SDK — `createAuthms()` plugin, `useAuthms()` composable, `v-auth` directive, and `authmsGuard` router guard.
+
+## What's Inside
+
+- **`createAuthms(config)`** — Vue plugin that creates and initializes an `AuthMS` instance, injects via `provide`
+- **`useAuthms()`** — composable returning `{ authms, user, isLoading, isAuthenticated, login, logout }`
+- **`vAuth`** — directive for conditional rendering based on auth state
+- **`authmsGuard`** — `beforeEach` navigation guard for vue-router
+
+## Install
+
+```bash
+npm install @authms/core @authms/vue
+```
+
+## Quick Start
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import { createAuthms } from '@authms/vue';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(createAuthms({
+  appId: 'my-app',
+  issuer: 'https://auth.iam.tianv.com',
+}));
+app.mount('#app');
+```
+
+```vue
+<!-- Dashboard.vue -->
+<script setup lang="ts">
+import { useAuthms } from '@authms/vue';
+
+const { user, isLoading, login, logout } = useAuthms();
+</script>
+
+<template>
+  <div v-if="isLoading">Loading...</div>
+  <div v-else-if="!user">
+    <button @click="login({ email: 'a@b.com', password: 'x' })">Login</button>
+  </div>
+  <div v-else>
+    <h1>Welcome, {{ user.displayName }}</h1>
+    <button @click="logout">Logout</button>
+  </div>
+</template>
+```
+
+## Project Setup
+
+Copy [`examples/vue-authms.ts`](../../examples/vue-authms.ts) to `src/authms.ts`, edit `appId` and `issuer`. All your components import from `./authms`.
+
+See the [root SDK README](../../README.md) for full documentation.

package/dist/index.d.mts

@@ -0,0 +1,43 @@
+import { InjectionKey, Plugin, Ref, ComputedRef, Directive } from 'vue';
+import { AuthMS, User, LoginRequest, AuthResult, OAuthOptions, RegisterRequest } from '@authms/core';
+
+interface VueAuthmsConfig {
+    appId: string;
+    issuer: string;
+    apiUrl?: string;
+    storagePrefix?: string;
+    syncTabs?: boolean;
+}
+declare const AUTHMS_KEY: InjectionKey<AuthMS>;
+declare function getAuthms(): AuthMS | null;
+declare function createAuthms(config: VueAuthmsConfig): Plugin;
+
+interface UseAuthmsReturn {
+    authms: AuthMS;
+    user: Ref<User | null>;
+    isLoading: Ref<boolean>;
+    isAuthenticated: ComputedRef<boolean>;
+    login: (credentials: LoginRequest) => Promise<AuthResult>;
+    loginWithOAuth: (options: OAuthOptions) => Promise<void>;
+    register: (data: RegisterRequest) => Promise<AuthResult>;
+    logout: () => Promise<void>;
+    getAccessToken: () => Promise<string | null>;
+}
+declare function useAuthms(): UseAuthmsReturn;
+
+type AuthRoles = string | string[];
+declare const vAuth: Directive<HTMLElement, AuthRoles>;
+
+interface RouteLocation {
+    path: string;
+    fullPath: string;
+    query: Record<string, unknown>;
+}
+type GuardReturn = boolean | {
+    path: string;
+    query?: Record<string, string>;
+};
+type NavigationGuard = (to: RouteLocation, from: RouteLocation) => GuardReturn;
+declare function authmsGuard(roles?: string[]): NavigationGuard;
+
+export { AUTHMS_KEY, type UseAuthmsReturn, type VueAuthmsConfig, authmsGuard, createAuthms, getAuthms, useAuthms, vAuth };

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import { InjectionKey, Plugin, Ref, ComputedRef, Directive } from 'vue';
+import { AuthMS, User, LoginRequest, AuthResult, OAuthOptions, RegisterRequest } from '@authms/core';
+
+interface VueAuthmsConfig {
+    appId: string;
+    issuer: string;
+    apiUrl?: string;
+    storagePrefix?: string;
+    syncTabs?: boolean;
+}
+declare const AUTHMS_KEY: InjectionKey<AuthMS>;
+declare function getAuthms(): AuthMS | null;
+declare function createAuthms(config: VueAuthmsConfig): Plugin;
+
+interface UseAuthmsReturn {
+    authms: AuthMS;
+    user: Ref<User | null>;
+    isLoading: Ref<boolean>;
+    isAuthenticated: ComputedRef<boolean>;
+    login: (credentials: LoginRequest) => Promise<AuthResult>;
+    loginWithOAuth: (options: OAuthOptions) => Promise<void>;
+    register: (data: RegisterRequest) => Promise<AuthResult>;
+    logout: () => Promise<void>;
+    getAccessToken: () => Promise<string | null>;
+}
+declare function useAuthms(): UseAuthmsReturn;
+
+type AuthRoles = string | string[];
+declare const vAuth: Directive<HTMLElement, AuthRoles>;
+
+interface RouteLocation {
+    path: string;
+    fullPath: string;
+    query: Record<string, unknown>;
+}
+type GuardReturn = boolean | {
+    path: string;
+    query?: Record<string, string>;
+};
+type NavigationGuard = (to: RouteLocation, from: RouteLocation) => GuardReturn;
+declare function authmsGuard(roles?: string[]): NavigationGuard;
+
+export { AUTHMS_KEY, type UseAuthmsReturn, type VueAuthmsConfig, authmsGuard, createAuthms, getAuthms, useAuthms, vAuth };

package/dist/index.js

@@ -0,0 +1,171 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AUTHMS_KEY: () => AUTHMS_KEY,
+  authmsGuard: () => authmsGuard,
+  createAuthms: () => createAuthms,
+  getAuthms: () => getAuthms,
+  useAuthms: () => useAuthms,
+  vAuth: () => vAuth
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/createAuthms.ts
+var import_vue = require("vue");
+var import_core = require("@authms/core");
+var AUTHMS_KEY = /* @__PURE__ */ Symbol("authms");
+var _authms = null;
+function getAuthms() {
+  return _authms;
+}
+function createAuthms(config) {
+  const coreConfig = {
+    appId: config.appId,
+    issuer: config.issuer,
+    apiUrl: config.apiUrl,
+    platform: import_core.browserPlatform,
+    storagePrefix: config.storagePrefix,
+    syncTabs: config.syncTabs
+  };
+  const authms = new import_core.AuthMS(coreConfig);
+  _authms = authms;
+  return {
+    install(app) {
+      app.provide(AUTHMS_KEY, authms);
+      authms.initialize().catch((err) => {
+        console.error("[AuthMS Vue] Initialization failed:", err);
+      });
+    }
+  };
+}
+
+// src/useAuthms.ts
+var import_vue2 = require("vue");
+var import_core2 = require("@authms/core");
+function useAuthms() {
+  const authms = (0, import_vue2.inject)(AUTHMS_KEY);
+  if (!authms) {
+    throw new import_core2.AuthmsError(
+      "CONFIG_ERROR",
+      "useAuthms() must be used within a Vue app that has createAuthms() plugin installed",
+      500
+    );
+  }
+  const user = (0, import_vue2.ref)(authms.user);
+  const isLoading = (0, import_vue2.ref)(!authms.isReady());
+  const isAuthenticated = (0, import_vue2.computed)(() => !!user.value);
+  let unsubReady;
+  let unsubUser;
+  (0, import_vue2.onMounted)(() => {
+    if (authms.isReady()) {
+      isLoading.value = false;
+    }
+    unsubReady = authms.on("READY", () => {
+      isLoading.value = false;
+    });
+    unsubUser = authms.on("USER_CHANGED", () => {
+      user.value = authms.user;
+    });
+  });
+  (0, import_vue2.onUnmounted)(() => {
+    unsubReady?.();
+    unsubUser?.();
+  });
+  return {
+    authms,
+    user,
+    isLoading,
+    isAuthenticated,
+    login: (credentials) => authms.login(credentials),
+    loginWithOAuth: (options) => authms.loginWithOAuth(options),
+    register: (data) => authms.register(data),
+    logout: () => authms.logout(),
+    getAccessToken: () => authms.getAccessToken()
+  };
+}
+
+// src/directive.ts
+var import_vue3 = require("vue");
+function hasRequiredRole(roles) {
+  const authms = getAuthms();
+  if (!authms?.isAuthenticated()) return false;
+  const user = authms.user;
+  if (!user) return false;
+  const userRole = user.role;
+  if (!userRole) return false;
+  const required = Array.isArray(roles) ? roles : [roles];
+  return required.length === 0 || required.includes(userRole);
+}
+function updateVisibility(el, binding) {
+  const visible = hasRequiredRole(binding.value);
+  if (visible) {
+    if (el.style.display === "none") {
+      el.style.display = el.__vAuthOrigDisplay ?? "";
+    }
+  } else {
+    if (el.style.display !== "none") {
+      el.__vAuthOrigDisplay = el.style.display;
+      el.style.display = "none";
+    }
+  }
+}
+var vAuth = {
+  mounted(el, binding) {
+    updateVisibility(el, binding);
+  },
+  updated(el, binding) {
+    if (binding.value !== binding.oldValue) {
+      updateVisibility(el, binding);
+    }
+  }
+};
+
+// src/guard.ts
+function authmsGuard(roles) {
+  return (to) => {
+    const authms = getAuthms();
+    if (!authms || !authms.isReady()) {
+      return true;
+    }
+    if (!authms.isAuthenticated()) {
+      if (to.path === "/login") return true;
+      return { path: "/login", query: { redirect: to.fullPath } };
+    }
+    if (roles && roles.length > 0) {
+      const user = authms.user;
+      const userRole = user?.["role"];
+      if (!userRole || !roles.includes(userRole)) {
+        return { path: "/forbidden" };
+      }
+    }
+    return true;
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AUTHMS_KEY,
+  authmsGuard,
+  createAuthms,
+  getAuthms,
+  useAuthms,
+  vAuth
+});

package/dist/index.mjs

@@ -0,0 +1,141 @@
+// src/createAuthms.ts
+import "vue";
+import { AuthMS, browserPlatform } from "@authms/core";
+var AUTHMS_KEY = /* @__PURE__ */ Symbol("authms");
+var _authms = null;
+function getAuthms() {
+  return _authms;
+}
+function createAuthms(config) {
+  const coreConfig = {
+    appId: config.appId,
+    issuer: config.issuer,
+    apiUrl: config.apiUrl,
+    platform: browserPlatform,
+    storagePrefix: config.storagePrefix,
+    syncTabs: config.syncTabs
+  };
+  const authms = new AuthMS(coreConfig);
+  _authms = authms;
+  return {
+    install(app) {
+      app.provide(AUTHMS_KEY, authms);
+      authms.initialize().catch((err) => {
+        console.error("[AuthMS Vue] Initialization failed:", err);
+      });
+    }
+  };
+}
+
+// src/useAuthms.ts
+import { inject, ref, computed, onMounted, onUnmounted } from "vue";
+import {
+  AuthmsError
+} from "@authms/core";
+function useAuthms() {
+  const authms = inject(AUTHMS_KEY);
+  if (!authms) {
+    throw new AuthmsError(
+      "CONFIG_ERROR",
+      "useAuthms() must be used within a Vue app that has createAuthms() plugin installed",
+      500
+    );
+  }
+  const user = ref(authms.user);
+  const isLoading = ref(!authms.isReady());
+  const isAuthenticated = computed(() => !!user.value);
+  let unsubReady;
+  let unsubUser;
+  onMounted(() => {
+    if (authms.isReady()) {
+      isLoading.value = false;
+    }
+    unsubReady = authms.on("READY", () => {
+      isLoading.value = false;
+    });
+    unsubUser = authms.on("USER_CHANGED", () => {
+      user.value = authms.user;
+    });
+  });
+  onUnmounted(() => {
+    unsubReady?.();
+    unsubUser?.();
+  });
+  return {
+    authms,
+    user,
+    isLoading,
+    isAuthenticated,
+    login: (credentials) => authms.login(credentials),
+    loginWithOAuth: (options) => authms.loginWithOAuth(options),
+    register: (data) => authms.register(data),
+    logout: () => authms.logout(),
+    getAccessToken: () => authms.getAccessToken()
+  };
+}
+
+// src/directive.ts
+import "vue";
+function hasRequiredRole(roles) {
+  const authms = getAuthms();
+  if (!authms?.isAuthenticated()) return false;
+  const user = authms.user;
+  if (!user) return false;
+  const userRole = user.role;
+  if (!userRole) return false;
+  const required = Array.isArray(roles) ? roles : [roles];
+  return required.length === 0 || required.includes(userRole);
+}
+function updateVisibility(el, binding) {
+  const visible = hasRequiredRole(binding.value);
+  if (visible) {
+    if (el.style.display === "none") {
+      el.style.display = el.__vAuthOrigDisplay ?? "";
+    }
+  } else {
+    if (el.style.display !== "none") {
+      el.__vAuthOrigDisplay = el.style.display;
+      el.style.display = "none";
+    }
+  }
+}
+var vAuth = {
+  mounted(el, binding) {
+    updateVisibility(el, binding);
+  },
+  updated(el, binding) {
+    if (binding.value !== binding.oldValue) {
+      updateVisibility(el, binding);
+    }
+  }
+};
+
+// src/guard.ts
+function authmsGuard(roles) {
+  return (to) => {
+    const authms = getAuthms();
+    if (!authms || !authms.isReady()) {
+      return true;
+    }
+    if (!authms.isAuthenticated()) {
+      if (to.path === "/login") return true;
+      return { path: "/login", query: { redirect: to.fullPath } };
+    }
+    if (roles && roles.length > 0) {
+      const user = authms.user;
+      const userRole = user?.["role"];
+      if (!userRole || !roles.includes(userRole)) {
+        return { path: "/forbidden" };
+      }
+    }
+    return true;
+  };
+}
+export {
+  AUTHMS_KEY,
+  authmsGuard,
+  createAuthms,
+  getAuthms,
+  useAuthms,
+  vAuth
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@autional/vue",
+  "version": "0.2.0",
+  "description": "AuthMS Vue SDK — createAuthms plugin, useAuthms composable, vAuth directive, and authmsGuard router guard",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external @autional/core --external vue",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external @autional/core --external vue",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "clean": "rimraf dist"
+  },
+  "files": ["dist", "src"],
+  "keywords": ["auth", "vue", "authentication", "authms"],
+  "license": "MIT",
+  "peerDependencies": {
+    "@autional/core": ">=0.1.0",
+    "vue": ">=3.0.0"
+  },
+  "dependencies": {
+    "@autional/core": ">=0.1.0"
+  },
+  "devDependencies": {
+    "@autional/tsconfig": ">=0.1.0",
+    "rimraf": "^5.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.0",
+    "vitest": "^3.0.0"
+  }
+}

package/src/__tests__/index.test.ts

@@ -0,0 +1,160 @@
+// @ts-nocheck — vitest mock types
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+const { mockVueInject, mockVueRef, mockVueComputed, mockVueOnMounted, mockVueOnUnmounted } = vi.hoisted(() => ({
+  mockVueInject: vi.fn(),
+  mockVueRef: vi.fn((initial: any) => ({ value: initial })),
+  mockVueComputed: vi.fn((fn: () => any) => ({ value: fn() })),
+  mockVueOnMounted: vi.fn((fn: () => void) => fn()),
+  mockVueOnUnmounted: vi.fn(),
+}));
+
+vi.mock('vue', () => ({
+  inject: mockVueInject,
+  ref: mockVueRef,
+  computed: mockVueComputed,
+  onMounted: mockVueOnMounted,
+  onUnmounted: mockVueOnUnmounted,
+}));
+
+vi.mock('@authms/core', () => {
+  const mockAuthMS = vi.fn().mockImplementation(function (this: any) {
+    this.on = vi.fn().mockReturnValue(() => {});
+    this.initialize = vi.fn().mockResolvedValue(undefined);
+    this.login = vi.fn().mockResolvedValue({});
+    this.loginWithOAuth = vi.fn().mockResolvedValue(undefined);
+    this.register = vi.fn().mockResolvedValue({});
+    this.logout = vi.fn().mockResolvedValue(undefined);
+    this.isReady = vi.fn().mockReturnValue(true);
+    this.isAuthenticated = vi.fn().mockReturnValue(false);
+    this.getAccessToken = vi.fn().mockResolvedValue(null);
+    this.user = null;
+  });
+  return {
+    AuthMS: mockAuthMS,
+    browserPlatform: {},
+    AuthmsError: class extends Error {
+      code = '';
+      status = 0;
+      constructor(c: string, m: string, s: number) {
+        super(m);
+        this.code = c;
+        this.status = s;
+      }
+    },
+  };
+});
+
+import { createAuthms, getAuthms } from '../createAuthms';
+import { useAuthms } from '../useAuthms';
+import { authmsGuard } from '../guard';
+
+describe('createAuthms', () => {
+  it('returns a Vue Plugin with install method', () => {
+    const plugin = createAuthms({ appId: 'test', issuer: 'https://auth.example.com' });
+
+    expect(plugin).toHaveProperty('install');
+    expect(typeof plugin.install).toBe('function');
+  });
+
+  it('install calls app.provide with the authms instance', () => {
+    const plugin = createAuthms({ appId: 'test', issuer: 'https://auth.example.com' });
+    const mockApp = { provide: vi.fn() };
+
+    plugin.install(mockApp as any);
+
+    expect(mockApp.provide).toHaveBeenCalled();
+    const [key, instance] = mockApp.provide.mock.calls[0];
+    expect(instance).toBeDefined();
+  });
+});
+
+describe('useAuthms', () => {
+  let mockAuthms: any;
+
+  beforeEach(() => {
+    mockAuthms = {
+      on: vi.fn().mockReturnValue(() => {}),
+      initialize: vi.fn().mockResolvedValue(undefined),
+      login: vi.fn().mockResolvedValue({ access_token: 'token' }),
+      loginWithOAuth: vi.fn().mockResolvedValue(undefined),
+      register: vi.fn().mockResolvedValue({ access_token: 'token' }),
+      logout: vi.fn().mockResolvedValue(undefined),
+      isReady: vi.fn().mockReturnValue(true),
+      isAuthenticated: vi.fn().mockReturnValue(true),
+      getAccessToken: vi.fn().mockResolvedValue('token'),
+      user: { sub: 'user-1', email: 'test@test.com' },
+    };
+
+    mockVueInject.mockReturnValue(mockAuthms);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('returns reactive user, isLoading, isAuthenticated', () => {
+    const result = useAuthms();
+
+    expect(result).toHaveProperty('authms');
+    expect(result).toHaveProperty('user');
+    expect(result).toHaveProperty('isLoading');
+    expect(result).toHaveProperty('isAuthenticated');
+    expect(result).toHaveProperty('login');
+    expect(result).toHaveProperty('logout');
+    expect(result).toHaveProperty('getAccessToken');
+  });
+
+  it('login method delegates to authms.login', async () => {
+    const result = useAuthms();
+    const credentials = { email: 'test@test.com', password: 'secret' };
+
+    await result.login(credentials as any);
+
+    expect(mockAuthms.login).toHaveBeenCalledWith(credentials);
+  });
+
+  it('logout delegates to authms.logout', async () => {
+    const result = useAuthms();
+
+    await result.logout();
+
+    expect(mockAuthms.logout).toHaveBeenCalled();
+  });
+});
+
+describe('getAuthms', () => {
+  let freshCreateAuthms: typeof createAuthms;
+  let freshGetAuthms: typeof getAuthms;
+
+  beforeEach(async () => {
+    vi.resetModules();
+    const mod = await import('../createAuthms');
+    freshCreateAuthms = mod.createAuthms;
+    freshGetAuthms = mod.getAuthms;
+  });
+
+  it('returns null before createAuthms', () => {
+    expect(freshGetAuthms()).toBeNull();
+  });
+
+  it('returns instance after createAuthms', () => {
+    freshCreateAuthms({ appId: 'test', issuer: 'https://auth.example.com' });
+
+    expect(freshGetAuthms()).not.toBeNull();
+  });
+});
+
+describe('authmsGuard', () => {
+  beforeEach(async () => {
+    vi.resetModules();
+    const mod = await import('../createAuthms');
+    mod.createAuthms({ appId: 'test', issuer: 'https://auth.example.com' });
+  });
+
+  it('returns a function for router use', () => {
+    const guard = authmsGuard();
+
+    expect(typeof guard).toBe('function');
+  });
+});

package/src/createAuthms.ts

@@ -0,0 +1,42 @@
+import { type App, type InjectionKey, type Plugin } from 'vue';
+import { AuthMS, browserPlatform, type AuthmsConfig as CoreConfig } from '@authms/core';
+
+export interface VueAuthmsConfig {
+  appId: string;
+  issuer: string;
+  apiUrl?: string;
+  storagePrefix?: string;
+  syncTabs?: boolean;
+}
+
+export const AUTHMS_KEY: InjectionKey<AuthMS> = Symbol('authms');
+
+let _authms: AuthMS | null = null;
+
+export function getAuthms(): AuthMS | null {
+  return _authms;
+}
+
+export function createAuthms(config: VueAuthmsConfig): Plugin {
+  const coreConfig: CoreConfig = {
+    appId: config.appId,
+    issuer: config.issuer,
+    apiUrl: config.apiUrl,
+    platform: browserPlatform,
+    storagePrefix: config.storagePrefix,
+    syncTabs: config.syncTabs,
+  };
+
+  const authms = new AuthMS(coreConfig);
+  _authms = authms;
+
+  return {
+    install(app: App) {
+      app.provide(AUTHMS_KEY, authms);
+
+      authms.initialize().catch((err: unknown) => {
+        console.error('[AuthMS Vue] Initialization failed:', err);
+      });
+    },
+  };
+}

package/src/directive.ts

@@ -0,0 +1,46 @@
+import { type Directive, type DirectiveBinding } from 'vue';
+import { getAuthms } from './createAuthms';
+
+type AuthRoles = string | string[];
+
+function hasRequiredRole(roles: AuthRoles): boolean {
+  const authms = getAuthms();
+  if (!authms?.isAuthenticated()) return false;
+
+  const user = authms.user;
+  if (!user) return false;
+
+  const userRole = user.role as string | undefined;
+  if (!userRole) return false;
+
+  const required = Array.isArray(roles) ? roles : [roles];
+  return required.length === 0 || required.includes(userRole);
+}
+
+function updateVisibility(el: HTMLElement, binding: DirectiveBinding<AuthRoles>): void {
+  const visible = hasRequiredRole(binding.value);
+
+  if (visible) {
+    if (el.style.display === 'none') {
+      (el as HTMLElement & { __vAuthOrigDisplay?: string }).style.display =
+        (el as HTMLElement & { __vAuthOrigDisplay?: string }).__vAuthOrigDisplay ?? '';
+    }
+  } else {
+    if (el.style.display !== 'none') {
+      (el as HTMLElement & { __vAuthOrigDisplay?: string }).__vAuthOrigDisplay = el.style.display;
+      el.style.display = 'none';
+    }
+  }
+}
+
+export const vAuth: Directive<HTMLElement, AuthRoles> = {
+  mounted(el, binding) {
+    updateVisibility(el, binding);
+  },
+
+  updated(el, binding) {
+    if (binding.value !== binding.oldValue) {
+      updateVisibility(el, binding);
+    }
+  },
+};

package/src/guard.ts

@@ -0,0 +1,39 @@
+import { getAuthms } from './createAuthms';
+
+interface RouteLocation {
+  path: string;
+  fullPath: string;
+  query: Record<string, unknown>;
+}
+
+type GuardReturn =
+  | boolean
+  | { path: string; query?: Record<string, string> };
+
+type NavigationGuard = (to: RouteLocation, from: RouteLocation) => GuardReturn;
+
+export function authmsGuard(roles?: string[]): NavigationGuard {
+  return (to) => {
+    const authms = getAuthms();
+
+    if (!authms || !authms.isReady()) {
+      return true;
+    }
+
+    if (!authms.isAuthenticated()) {
+      if (to.path === '/login') return true;
+      return { path: '/login', query: { redirect: to.fullPath } };
+    }
+
+    if (roles && roles.length > 0) {
+      const user = authms.user;
+      const userRole = (user as Record<string, unknown> | null)?.['role'] as string | undefined;
+
+      if (!userRole || !roles.includes(userRole)) {
+        return { path: '/forbidden' };
+      }
+    }
+
+    return true;
+  };
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export { createAuthms, getAuthms, AUTHMS_KEY } from './createAuthms';
+export type { VueAuthmsConfig } from './createAuthms';
+export { useAuthms } from './useAuthms';
+export type { UseAuthmsReturn } from './useAuthms';
+export { vAuth } from './directive';
+export { authmsGuard } from './guard';

package/src/useAuthms.ts

@@ -0,0 +1,73 @@
+import { inject, ref, computed, onMounted, onUnmounted, type Ref, type ComputedRef } from 'vue';
+import { AUTHMS_KEY } from './createAuthms';
+import {
+  AuthMS,
+  AuthmsError,
+  type User,
+  type AuthResult,
+  type LoginRequest,
+  type RegisterRequest,
+  type OAuthOptions,
+} from '@authms/core';
+
+export interface UseAuthmsReturn {
+  authms: AuthMS;
+  user: Ref<User | null>;
+  isLoading: Ref<boolean>;
+  isAuthenticated: ComputedRef<boolean>;
+  login: (credentials: LoginRequest) => Promise<AuthResult>;
+  loginWithOAuth: (options: OAuthOptions) => Promise<void>;
+  register: (data: RegisterRequest) => Promise<AuthResult>;
+  logout: () => Promise<void>;
+  getAccessToken: () => Promise<string | null>;
+}
+
+export function useAuthms(): UseAuthmsReturn {
+  const authms = inject(AUTHMS_KEY);
+
+  if (!authms) {
+    throw new AuthmsError(
+      'CONFIG_ERROR',
+      'useAuthms() must be used within a Vue app that has createAuthms() plugin installed',
+      500,
+    );
+  }
+
+  const user = ref<User | null>(authms.user);
+  const isLoading = ref<boolean>(!authms.isReady());
+  const isAuthenticated = computed(() => !!user.value);
+
+  let unsubReady: (() => void) | undefined;
+  let unsubUser: (() => void) | undefined;
+
+  onMounted(() => {
+    if (authms.isReady()) {
+      isLoading.value = false;
+    }
+
+    unsubReady = authms.on('READY', () => {
+      isLoading.value = false;
+    });
+
+    unsubUser = authms.on('USER_CHANGED', () => {
+      user.value = authms.user;
+    });
+  });
+
+  onUnmounted(() => {
+    unsubReady?.();
+    unsubUser?.();
+  });
+
+  return {
+    authms,
+    user,
+    isLoading,
+    isAuthenticated,
+    login: (credentials) => authms.login(credentials),
+    loginWithOAuth: (options) => authms.loginWithOAuth(options),
+    register: (data) => authms.register(data),
+    logout: () => authms.logout(),
+    getAccessToken: () => authms.getAccessToken(),
+  };
+}