@bagelink/auth 1.7.74 → 1.7.76

package/README.md

@@ -25,7 +25,7 @@ npm install @bagelink/auth
 ```typescript
 // main.ts
 import { createApp } from 'vue'
-import { createAuth, setAuthRouter, authGuard } from '@bagelink/auth'
+import { createAuth } from '@bagelink/auth'
 import router from './router'
 
 const auth = createAuth({
@@ -37,11 +37,8 @@ const auth = createAuth({
   }
 })
 
-// Connect router for auto-redirect
-setAuthRouter(router)
-
-// Install auth guard
-router.beforeEach(authGuard())
+// Connect router (automatically sets up auth guard)
+auth.use(router)
 
 const app = createApp(App)
 app.use(router)
@@ -167,22 +164,78 @@ Returns auth composable with:
 }
 ```
 
-### `authGuard()`
+### Custom Guard Composition
+
+For multi-tenant apps or advanced permission logic, disable the auto-guard and compose your own:
 
-Navigation guard for protected routes:
+#### Option 1: Using `composeGuards` utility (recommended)
 
 ```typescript
-router.beforeEach(authGuard())  // No parameters needed!
+import { composeGuards } from '@bagelink/auth'
+
+// Disable auto-guard
+auth.use(router, { guard: false })
+
+// Custom org access guard
+const orgAccessGuard = () => async (to, from, next) => {
+  if (to.meta.requiresOrg) {
+    const hasAccess = await checkOrgAccess(to.params.orgId)
+    if (!hasAccess) return next('/no-access')
+  }
+  next()
+}
+
+// Compose all guards in sequence
+router.beforeEach(composeGuards([
+  auth.routerGuard(),  // Auth first
+  orgAccessGuard(),    // Then org check
+]))
 ```
 
-Protects routes with `meta: { auth: true }` and handles redirects automatically.
+#### Option 2: Multiple `beforeEach` calls
 
-### `setAuthRouter(router)`
+```typescript
+auth.use(router, { guard: false })
 
-Connect router for auto-redirect:
+// Guards run in order they're registered
+router.beforeEach(auth.routerGuard())
+
+router.beforeEach(async (to, from, next) => {
+  // Custom org/tenant check
+  if (to.meta.requiresOrg && !await checkOrgAccess(to.params.orgId)) {
+    return next('/no-access')
+  }
+  next()
+})
+```
+
+#### Option 3: Manual composition
 
 ```typescript
-setAuthRouter(router)  // Call after creating router
+auth.use(router, { guard: false })
+
+router.beforeEach(async (to, from, next) => {
+  // Run auth guard first
+  const authPassed = await new Promise<boolean>((resolve) => {
+    auth.routerGuard()(to, from, (result?: any) => {
+      if (result !== undefined) {
+        next(result)
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+  
+  if (!authPassed) return
+  
+  // Your custom logic
+  if (to.meta.requiresOrg && !await checkOrgAccess(to.params.orgId)) {
+    return next('/no-access')
+  }
+  
+  next()
+})
 ```
 
 ## Components

package/dist/index.cjs

@@ -1079,7 +1079,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     const authResponse = vue.ref(null);
     const { sso: sso2, user, accountInfo: accountInfo2 } = useAuth();
     const route = vueRouter.useRoute();
-    const router = vueRouter.useRouter();
+    const router2 = vueRouter.useRouter();
     const providerInfo = vue.computed(() => {
       if (provider.value === null) return null;
       return providers[provider.value];
@@ -1089,7 +1089,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       try {
         await sso2.handleLinkCallback();
         success.value = true;
-        setTimeout(() => router.push("/"), timeout);
+        setTimeout(() => router2.push("/"), timeout);
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Failed to link account";
         error.value = errorMessage;
@@ -1108,7 +1108,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         } else {
           authResponse.value = response;
           success.value = true;
-          setTimeout(() => router.push("/"), timeout);
+          setTimeout(() => router2.push("/"), timeout);
         }
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Authentication failed";
@@ -1239,10 +1239,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     cardShadow: { type: Boolean, default: true }
   },
   setup(__props) {
-    const router = vueRouter.useRouter();
+    const router2 = vueRouter.useRouter();
     function switchForm(form) {
       if (form === "login") {
-        router.push("/login");
+        router2.push("/login");
       }
     }
     return (_ctx, _cache) => {
@@ -1283,12 +1283,12 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     cardShadow: { type: Boolean, default: true }
   },
   setup(__props) {
-    const router = vueRouter.useRouter();
+    const router2 = vueRouter.useRouter();
     function switchForm(form) {
       if (form === "signup") {
-        router.push("/signup");
+        router2.push("/signup");
       } else if (form === "forgot-password") {
-        router.push("/forgot-password");
+        router2.push("/forgot-password");
       }
     }
     return (_ctx, _cache) => {
@@ -1329,12 +1329,12 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     cardShadow: { type: Boolean, default: true }
   },
   setup(__props) {
-    const router = vueRouter.useRouter();
+    const router2 = vueRouter.useRouter();
     const route = vueRouter.useRoute();
     const token = vue.computed(() => route.query.token);
     function switchForm(form) {
       if (form === "login") {
-        router.push("/login");
+        router2.push("/login");
       }
     }
     return (_ctx, _cache) => {
@@ -1366,10 +1366,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     cardShadow: { type: Boolean, default: true }
   },
   setup(__props) {
-    const router = vueRouter.useRouter();
+    const router2 = vueRouter.useRouter();
     function switchForm(form) {
       if (form === "login") {
-        router.push("/login");
+        router2.push("/login");
       }
     }
     return (_ctx, _cache) => {
@@ -1391,8 +1391,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-function getRedirectUrl(router, config) {
-  const redirect2 = router.currentRoute.value.query[config.queryKey];
+function getRedirectUrl(router2, config) {
+  const redirect2 = router2.currentRoute.value.query[config.queryKey];
   return redirect2 || config.fallback;
 }
 function isValidRedirect(redirectUrl, allowedPaths) {
@@ -1416,14 +1416,14 @@ function isValidRedirect(redirectUrl, allowedPaths) {
   }
   return true;
 }
-async function performRedirect(router, config) {
-  const redirect2 = getRedirectUrl(router, config);
+async function performRedirect(router2, config) {
+  const redirect2 = getRedirectUrl(router2, config);
   if (redirect2 !== config.fallback && !isValidRedirect(redirect2, config.allowedPaths)) {
     console.warn("[Auth] Invalid redirect URL detected, using fallback:", redirect2);
-    await router.push(config.fallback);
+    await router2.push(config.fallback);
     return;
   }
-  await router.push(redirect2);
+  await router2.push(redirect2);
 }
 function buildLoginQuery(currentPath, config) {
   if (!config.preserveRedirect) {
@@ -1908,10 +1908,8 @@ let authApi = null;
 let eventEmitter = null;
 let redirectConfig = null;
 let autoRedirectRouter = null;
+let cachedAuthGuard = null;
 const accountInfo = vue.ref(null);
-function setAuthRouter(router) {
-  autoRedirectRouter = router;
-}
 function getRedirectConfig() {
   if (!redirectConfig) {
     throw new Error("Redirect config not initialized. Did you call createAuth with redirect config?");
@@ -1948,6 +1946,69 @@ function createAuth(params) {
         eventEmitter.removeAllListeners(event);
       }
     },
+    /**
+     * Connect external dependencies like Vue Router
+     * Automatically sets up router guard when router is provided
+     * @param dependency - Vue Router instance or other plugins
+     * @param options - Configuration options
+     * @param options.guard - Whether to automatically set up auth guard (default: true)
+     * @example
+     * ```ts
+     * // Auto setup (default)
+     * auth.use(router)
+     *
+     * // Manual guard control (for custom composition)
+     * auth.use(router, { guard: false })
+     * router.beforeEach(async (to, from, next) => {
+     *   // Custom logic first
+     *   if (!hasOrgAccess(to)) return next('/no-access')
+     *   // Then run auth guard
+     *   return auth.routerGuard()(to, from, next)
+     * })
+     * ```
+     */
+    use(dependency, options = {}) {
+      const { guard = true } = options;
+      if (dependency && (dependency.beforeEach || dependency.push || dependency.currentRoute)) {
+        autoRedirectRouter = dependency;
+        if (guard) {
+          dependency.beforeEach(authInstance.routerGuard());
+        }
+      }
+      return authInstance;
+    },
+    /**
+     * Create a Vue Router navigation guard for authentication
+     * Protects routes requiring authentication and handles redirect logic
+     * Note: Automatically called by auth.use(router), only use directly for custom setups
+     * @example
+     * ```ts
+     * // Automatic (recommended)
+     * auth.use(router)
+     *
+     * // Manual (for custom setups)
+     * router.beforeEach(auth.routerGuard())
+     * ```
+     */
+    routerGuard() {
+      if (cachedAuthGuard === null) {
+        cachedAuthGuard = async (to, from, next) => {
+          const { authGuard: authGuard2 } = await Promise.resolve().then(() => router);
+          const guard = authGuard2();
+          cachedAuthGuard = guard;
+          return guard(to, from, next);
+        };
+      }
+      return cachedAuthGuard;
+    },
+    /**
+     * Vue plugin install method
+     * Makes auth available globally as $auth
+     * @example
+     * ```ts
+     * app.use(auth)
+     * ```
+     */
     install(app) {
       app.config.globalProperties.$auth = useAuth();
     }
@@ -2218,7 +2279,6 @@ const useAuth$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
   __proto__: null,
   createAuth,
   getRedirectConfig,
-  setAuthRouter,
   useAuth
 }, Symbol.toStringTag, { value: "Module" }));
 let authInitialized = false;
@@ -2256,6 +2316,33 @@ function authGuard() {
     }
   };
 }
+function composeGuards(guards) {
+  return async (to, from, next) => {
+    let guardIndex = 0;
+    const runNextGuard = async () => {
+      if (guardIndex >= guards.length) {
+        next();
+        return;
+      }
+      const guard = guards[guardIndex];
+      guardIndex++;
+      await guard(to, from, (result) => {
+        if (result !== void 0) {
+          next(result);
+        } else {
+          runNextGuard();
+        }
+      });
+    };
+    await runNextGuard();
+  };
+}
+const router = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  authGuard,
+  composeGuards,
+  resetAuthState
+}, Symbol.toStringTag, { value: "Module" }));
 function createAuthRoutes(config = {}) {
   const {
     basePath = "",
@@ -2342,6 +2429,7 @@ exports.StateMismatchError = StateMismatchError;
 exports.accountToUser = accountToUser;
 exports.authGuard = authGuard;
 exports.buildLoginQuery = buildLoginQuery;
+exports.composeGuards = composeGuards;
 exports.createAuth = createAuth;
 exports.createAuthGuard = createAuthGuard;
 exports.createAuthRoutes = createAuthRoutes;
@@ -2356,7 +2444,6 @@ exports.performRedirect = performRedirect;
 exports.providers = providers;
 exports.resetAuthState = resetAuthState;
 exports.setAuthContext = setAuthContext;
-exports.setAuthRouter = setAuthRouter;
 exports.sso = sso;
 exports.ssoProvidersList = ssoProvidersList;
 exports.useAuth = useAuth;

package/dist/index.mjs

@@ -1077,7 +1077,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const authResponse = ref(null);
     const { sso: sso2, user, accountInfo: accountInfo2 } = useAuth();
     const route = useRoute();
-    const router = useRouter();
+    const router2 = useRouter();
     const providerInfo = computed(() => {
       if (provider.value === null) return null;
       return providers[provider.value];
@@ -1087,7 +1087,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       try {
         await sso2.handleLinkCallback();
         success.value = true;
-        setTimeout(() => router.push("/"), timeout);
+        setTimeout(() => router2.push("/"), timeout);
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Failed to link account";
         error.value = errorMessage;
@@ -1106,7 +1106,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         } else {
           authResponse.value = response;
           success.value = true;
-          setTimeout(() => router.push("/"), timeout);
+          setTimeout(() => router2.push("/"), timeout);
         }
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Authentication failed";
@@ -1237,10 +1237,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     cardShadow: { type: Boolean, default: true }
   },
   setup(__props) {
-    const router = useRouter();
+    const router2 = useRouter();
     function switchForm(form) {
       if (form === "login") {
-        router.push("/login");
+        router2.push("/login");
       }
     }
     return (_ctx, _cache) => {
@@ -1281,12 +1281,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     cardShadow: { type: Boolean, default: true }
   },
   setup(__props) {
-    const router = useRouter();
+    const router2 = useRouter();
     function switchForm(form) {
       if (form === "signup") {
-        router.push("/signup");
+        router2.push("/signup");
       } else if (form === "forgot-password") {
-        router.push("/forgot-password");
+        router2.push("/forgot-password");
       }
     }
     return (_ctx, _cache) => {
@@ -1327,12 +1327,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     cardShadow: { type: Boolean, default: true }
   },
   setup(__props) {
-    const router = useRouter();
+    const router2 = useRouter();
     const route = useRoute();
     const token = computed(() => route.query.token);
     function switchForm(form) {
       if (form === "login") {
-        router.push("/login");
+        router2.push("/login");
       }
     }
     return (_ctx, _cache) => {
@@ -1364,10 +1364,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     cardShadow: { type: Boolean, default: true }
   },
   setup(__props) {
-    const router = useRouter();
+    const router2 = useRouter();
     function switchForm(form) {
       if (form === "login") {
-        router.push("/login");
+        router2.push("/login");
       }
     }
     return (_ctx, _cache) => {
@@ -1389,8 +1389,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function getRedirectUrl(router, config) {
-  const redirect2 = router.currentRoute.value.query[config.queryKey];
+function getRedirectUrl(router2, config) {
+  const redirect2 = router2.currentRoute.value.query[config.queryKey];
   return redirect2 || config.fallback;
 }
 function isValidRedirect(redirectUrl, allowedPaths) {
@@ -1414,14 +1414,14 @@ function isValidRedirect(redirectUrl, allowedPaths) {
   }
   return true;
 }
-async function performRedirect(router, config) {
-  const redirect2 = getRedirectUrl(router, config);
+async function performRedirect(router2, config) {
+  const redirect2 = getRedirectUrl(router2, config);
   if (redirect2 !== config.fallback && !isValidRedirect(redirect2, config.allowedPaths)) {
     console.warn("[Auth] Invalid redirect URL detected, using fallback:", redirect2);
-    await router.push(config.fallback);
+    await router2.push(config.fallback);
     return;
   }
-  await router.push(redirect2);
+  await router2.push(redirect2);
 }
 function buildLoginQuery(currentPath, config) {
   if (!config.preserveRedirect) {
@@ -1906,10 +1906,8 @@ let authApi = null;
 let eventEmitter = null;
 let redirectConfig = null;
 let autoRedirectRouter = null;
+let cachedAuthGuard = null;
 const accountInfo = ref(null);
-function setAuthRouter(router) {
-  autoRedirectRouter = router;
-}
 function getRedirectConfig() {
   if (!redirectConfig) {
     throw new Error("Redirect config not initialized. Did you call createAuth with redirect config?");
@@ -1946,6 +1944,69 @@ function createAuth(params) {
         eventEmitter.removeAllListeners(event);
       }
     },
+    /**
+     * Connect external dependencies like Vue Router
+     * Automatically sets up router guard when router is provided
+     * @param dependency - Vue Router instance or other plugins
+     * @param options - Configuration options
+     * @param options.guard - Whether to automatically set up auth guard (default: true)
+     * @example
+     * ```ts
+     * // Auto setup (default)
+     * auth.use(router)
+     *
+     * // Manual guard control (for custom composition)
+     * auth.use(router, { guard: false })
+     * router.beforeEach(async (to, from, next) => {
+     *   // Custom logic first
+     *   if (!hasOrgAccess(to)) return next('/no-access')
+     *   // Then run auth guard
+     *   return auth.routerGuard()(to, from, next)
+     * })
+     * ```
+     */
+    use(dependency, options = {}) {
+      const { guard = true } = options;
+      if (dependency && (dependency.beforeEach || dependency.push || dependency.currentRoute)) {
+        autoRedirectRouter = dependency;
+        if (guard) {
+          dependency.beforeEach(authInstance.routerGuard());
+        }
+      }
+      return authInstance;
+    },
+    /**
+     * Create a Vue Router navigation guard for authentication
+     * Protects routes requiring authentication and handles redirect logic
+     * Note: Automatically called by auth.use(router), only use directly for custom setups
+     * @example
+     * ```ts
+     * // Automatic (recommended)
+     * auth.use(router)
+     *
+     * // Manual (for custom setups)
+     * router.beforeEach(auth.routerGuard())
+     * ```
+     */
+    routerGuard() {
+      if (cachedAuthGuard === null) {
+        cachedAuthGuard = async (to, from, next) => {
+          const { authGuard: authGuard2 } = await Promise.resolve().then(() => router);
+          const guard = authGuard2();
+          cachedAuthGuard = guard;
+          return guard(to, from, next);
+        };
+      }
+      return cachedAuthGuard;
+    },
+    /**
+     * Vue plugin install method
+     * Makes auth available globally as $auth
+     * @example
+     * ```ts
+     * app.use(auth)
+     * ```
+     */
     install(app) {
       app.config.globalProperties.$auth = useAuth();
     }
@@ -2216,7 +2277,6 @@ const useAuth$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
   __proto__: null,
   createAuth,
   getRedirectConfig,
-  setAuthRouter,
   useAuth
 }, Symbol.toStringTag, { value: "Module" }));
 let authInitialized = false;
@@ -2254,6 +2314,33 @@ function authGuard() {
     }
   };
 }
+function composeGuards(guards) {
+  return async (to, from, next) => {
+    let guardIndex = 0;
+    const runNextGuard = async () => {
+      if (guardIndex >= guards.length) {
+        next();
+        return;
+      }
+      const guard = guards[guardIndex];
+      guardIndex++;
+      await guard(to, from, (result) => {
+        if (result !== void 0) {
+          next(result);
+        } else {
+          runNextGuard();
+        }
+      });
+    };
+    await runNextGuard();
+  };
+}
+const router = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  authGuard,
+  composeGuards,
+  resetAuthState
+}, Symbol.toStringTag, { value: "Module" }));
 function createAuthRoutes(config = {}) {
   const {
     basePath = "",
@@ -2341,6 +2428,7 @@ export {
   accountToUser,
   authGuard,
   buildLoginQuery,
+  composeGuards,
   createAuth,
   createAuthGuard,
   createAuthRoutes,
@@ -2355,7 +2443,6 @@ export {
   providers,
   resetAuthState,
   setAuthContext,
-  setAuthRouter,
   sso,
   ssoProvidersList,
   useAuth

package/dist/router.d.ts

@@ -1,4 +1,4 @@
-import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
+import { NavigationGuard, NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
 /**
  * Reset auth initialization state
  * Useful for testing or app reload scenarios
@@ -20,3 +20,17 @@ export declare function resetAuthState(): void;
  * ```
  */
 export declare function authGuard(): (to: RouteLocationNormalized, _from: RouteLocationNormalized, next: NavigationGuardNext) => Promise<void>;
+/**
+ * Compose multiple navigation guards into one
+ * Guards are executed in order, stopping at the first one that calls next with a value
+ *
+ * @example
+ * ```ts
+ * router.beforeEach(composeGuards([
+ *   authGuard(),
+ *   orgAccessGuard(),
+ *   featureFlagGuard(),
+ * ]))
+ * ```
+ */
+export declare function composeGuards(guards: NavigationGuard[]): NavigationGuard;

package/dist/useAuth.d.ts

@@ -9,18 +9,6 @@ interface InitParams {
      */
     redirect?: RedirectConfig;
 }
-/**
- * Set the router instance for auto-redirect functionality
- * Call this in your app setup after creating the router
- *
- * @example
- * ```ts
- * const auth = createAuth({ ... })
- * const router = createRouter({ ... })
- * setAuthRouter(router)
- * ```
- */
-export declare function setAuthRouter(router: any): void;
 /**
  * Get the current redirect configuration
  * Used internally by router guard
@@ -30,6 +18,52 @@ export declare function createAuth(params: InitParams): {
     on<K extends AuthState>(event: K, handler: AuthEventMap[K]): void;
     off<K extends AuthState>(event: K, handler: AuthEventMap[K]): void;
     removeAllListeners<K extends AuthState>(event?: K): void;
+    /**
+     * Connect external dependencies like Vue Router
+     * Automatically sets up router guard when router is provided
+     * @param dependency - Vue Router instance or other plugins
+     * @param options - Configuration options
+     * @param options.guard - Whether to automatically set up auth guard (default: true)
+     * @example
+     * ```ts
+     * // Auto setup (default)
+     * auth.use(router)
+     *
+     * // Manual guard control (for custom composition)
+     * auth.use(router, { guard: false })
+     * router.beforeEach(async (to, from, next) => {
+     *   // Custom logic first
+     *   if (!hasOrgAccess(to)) return next('/no-access')
+     *   // Then run auth guard
+     *   return auth.routerGuard()(to, from, next)
+     * })
+     * ```
+     */
+    use(dependency: any, options?: {
+        guard?: boolean;
+    }): /*elided*/ any;
+    /**
+     * Create a Vue Router navigation guard for authentication
+     * Protects routes requiring authentication and handles redirect logic
+     * Note: Automatically called by auth.use(router), only use directly for custom setups
+     * @example
+     * ```ts
+     * // Automatic (recommended)
+     * auth.use(router)
+     *
+     * // Manual (for custom setups)
+     * router.beforeEach(auth.routerGuard())
+     * ```
+     */
+    routerGuard(): any;
+    /**
+     * Vue plugin install method
+     * Makes auth available globally as $auth
+     * @example
+     * ```ts
+     * app.use(auth)
+     * ```
+     */
     install(app: App): void;
 };
 export declare function useAuth(): {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/auth",
   "type": "module",
-  "version": "1.7.74",
+  "version": "1.7.76",
   "description": "Bagelink auth package",
   "author": {
     "name": "Bagel Studio",

package/src/router.ts

@@ -1,4 +1,4 @@
-import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
+import type { NavigationGuard, NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
 import { buildLoginQuery } from './redirect'
 import { useAuth, getRedirectConfig } from './useAuth'
 
@@ -84,3 +84,46 @@ export function authGuard() {
 		}
 	}
 }
+
+/**
+ * Compose multiple navigation guards into one
+ * Guards are executed in order, stopping at the first one that calls next with a value
+ *
+ * @example
+ * ```ts
+ * router.beforeEach(composeGuards([
+ *   authGuard(),
+ *   orgAccessGuard(),
+ *   featureFlagGuard(),
+ * ]))
+ * ```
+ */
+export function composeGuards(guards: NavigationGuard[]): NavigationGuard {
+	return async (to, from, next) => {
+		let guardIndex = 0
+
+		const runNextGuard = async (): Promise<void> => {
+			if (guardIndex >= guards.length) {
+				// All guards passed, allow navigation
+				next()
+				return
+			}
+
+			const guard = guards[guardIndex]
+			guardIndex++
+
+			// Run the current guard
+			await guard(to, from, (result?: any) => {
+				if (result !== undefined) {
+					// Guard blocked or redirected, stop here
+					next(result)
+				} else {
+					// Guard passed, run next guard
+					runNextGuard()
+				}
+			})
+		}
+
+		await runNextGuard()
+	}
+}

package/src/useAuth.ts

@@ -24,6 +24,7 @@ let authApi: AuthApi | null = null
 let eventEmitter: EventEmitter | null = null
 let redirectConfig: NormalizedRedirectConfig | null = null
 let autoRedirectRouter: any = null // Router instance for auto-redirect
+let cachedAuthGuard: any = null // Cached router guard
 const accountInfo = ref<AccountInfo | null>(null)
 
 interface InitParams {
@@ -35,21 +36,6 @@ interface InitParams {
 	redirect?: RedirectConfig
 }
 
-/**
- * Set the router instance for auto-redirect functionality
- * Call this in your app setup after creating the router
- *
- * @example
- * ```ts
- * const auth = createAuth({ ... })
- * const router = createRouter({ ... })
- * setAuthRouter(router)
- * ```
- */
-export function setAuthRouter(router: any) {
-	autoRedirectRouter = router
-}
-
 /**
  * Get the current redirect configuration
  * Used internally by router guard
@@ -101,6 +87,76 @@ export function createAuth(params: InitParams) {
 			}
 		},
 
+		/**
+		 * Connect external dependencies like Vue Router
+		 * Automatically sets up router guard when router is provided
+		 * @param dependency - Vue Router instance or other plugins
+		 * @param options - Configuration options
+		 * @param options.guard - Whether to automatically set up auth guard (default: true)
+		 * @example
+		 * ```ts
+		 * // Auto setup (default)
+		 * auth.use(router)
+		 *
+		 * // Manual guard control (for custom composition)
+		 * auth.use(router, { guard: false })
+		 * router.beforeEach(async (to, from, next) => {
+		 *   // Custom logic first
+		 *   if (!hasOrgAccess(to)) return next('/no-access')
+		 *   // Then run auth guard
+		 *   return auth.routerGuard()(to, from, next)
+		 * })
+		 * ```
+		 */
+		use(dependency: any, options: { guard?: boolean } = {}) {
+			const { guard = true } = options
+
+			// Detect if it's a router by checking for common router properties
+			if (dependency && (dependency.beforeEach || dependency.push || dependency.currentRoute)) {
+				autoRedirectRouter = dependency
+				// Automatically set up the auth guard unless disabled
+				if (guard) {
+					dependency.beforeEach(authInstance.routerGuard())
+				}
+			}
+			return authInstance
+		},
+
+		/**
+		 * Create a Vue Router navigation guard for authentication
+		 * Protects routes requiring authentication and handles redirect logic
+		 * Note: Automatically called by auth.use(router), only use directly for custom setups
+		 * @example
+		 * ```ts
+		 * // Automatic (recommended)
+		 * auth.use(router)
+		 *
+		 * // Manual (for custom setups)
+		 * router.beforeEach(auth.routerGuard())
+		 * ```
+		 */
+		routerGuard() {
+			// Return factory that lazily loads authGuard to avoid circular dependency
+			if (cachedAuthGuard === null) {
+				cachedAuthGuard = async (to: any, from: any, next: any) => {
+					const { authGuard } = await import('./router')
+					const guard = authGuard()
+					// Cache the actual guard for next time
+					cachedAuthGuard = guard
+					return guard(to, from, next)
+				}
+			}
+			return cachedAuthGuard
+		},
+
+		/**
+		 * Vue plugin install method
+		 * Makes auth available globally as $auth
+		 * @example
+		 * ```ts
+		 * app.use(auth)
+		 * ```
+		 */
 		install(app: App) {
 			// Make auth available globally
 			app.config.globalProperties.$auth = useAuth()