@bagelink/auth 1.7.74 → 1.7.78

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
@@ -241,7 +294,7 @@ await sso.google.redirect({
 // router.ts
 {
   path: '/auth/callback',
-  name: 'Callback',
+  name: 'AuthCallback',
   component: () => import('@bagelink/auth').then(m => m.Callback),
 }
 ```
@@ -255,6 +308,31 @@ await sso.google.redirect({
 - Okta
 - Facebook
 
+### SSO Redirect Preservation
+
+When users access a protected route and authenticate via SSO, the original URL is automatically preserved:
+
+```typescript
+// User tries to access /dashboard (protected)
+// ↓ Redirected to /login?redirect=/dashboard
+// ↓ User clicks "Login with Google"
+// ↓ Goes to Google OAuth
+// ↓ Returns to /auth/callback
+// ↓ Automatically redirected to /dashboard ✅
+```
+
+**How it works:**
+1. The `redirect` query param is stored in `sessionStorage` before SSO redirect
+2. After OAuth callback, it's restored to the URL
+3. Auto-redirect (or manual fallback) uses it to navigate to the original destination
+
+**Manual SSO with redirect:**
+```typescript
+// On login page with ?redirect=/dashboard
+await sso.google.redirect()
+// Redirect param is automatically preserved across the OAuth flow
+```
+
 ## Advanced Configuration
 
 ### Security: Restrict Redirect Paths

package/dist/index.cjs

@@ -1079,17 +1079,21 @@ 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];
     });
     async function linkCallback() {
       isLinking.value = true;
+      const { redirect: redirect2 } = route.query;
       try {
         await sso2.handleLinkCallback();
         success.value = true;
-        setTimeout(() => router.push("/"), timeout);
+        setTimeout(() => {
+          const redirectPath = typeof redirect2 === "string" ? redirect2 : "/";
+          router2.push(redirectPath);
+        }, timeout);
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Failed to link account";
         error.value = errorMessage;
@@ -1099,7 +1103,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     }
     async function handleCallback() {
       var _a;
-      const { state } = route.query;
+      const { state, redirect: redirect2 } = route.query;
       provider.value = sessionStorage.getItem(`oauth_provider:${state}`);
       try {
         const response = await sso2.handleCallback();
@@ -1108,7 +1112,10 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
         } else {
           authResponse.value = response;
           success.value = true;
-          setTimeout(() => router.push("/"), timeout);
+          setTimeout(() => {
+            const redirectPath = typeof redirect2 === "string" ? redirect2 : "/";
+            router2.push(redirectPath);
+          }, timeout);
         }
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Authentication failed";
@@ -1239,10 +1246,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 +1290,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 +1336,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 +1373,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 +1398,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 +1423,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) {
@@ -1584,6 +1591,13 @@ function createSSOProvider(config) {
       const auth = getAuthApi();
       const redirectUri = options.redirectUri ?? getDefaultRedirectUri();
       const state = options.state ?? generateState();
+      if (typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
+        const currentParams = queryParams();
+        const redirectUrl = currentParams.redirect;
+        if (redirectUrl) {
+          sessionStorage.setItem(`oauth_redirect:${state}`, redirectUrl);
+        }
+      }
       if (typeof sessionStorage !== "undefined") {
         sessionStorage.setItem(getStateKey(), state);
         sessionStorage.setItem(`oauth_provider:${state}`, config.id);
@@ -1602,6 +1616,13 @@ function createSSOProvider(config) {
       const redirectUri = options.redirectUri ?? getDefaultRedirectUri();
       const state = options.state ?? generateState();
       const timeout2 = options.popupTimeout ?? 9e4;
+      if (typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
+        const currentParams = queryParams();
+        const redirectUrl = currentParams.redirect;
+        if (redirectUrl) {
+          sessionStorage.setItem(`oauth_redirect:${state}`, redirectUrl);
+        }
+      }
       if (typeof sessionStorage !== "undefined") {
         sessionStorage.setItem(getStateKey(), state);
         sessionStorage.setItem(`oauth_provider:${state}`, config.id);
@@ -1818,6 +1839,15 @@ function handleOAuthCallback() {
   if (!provider || !isSupportedProvider(provider)) {
     throw new Error("Unable to determine OAuth provider. State may have expired.");
   }
+  if (typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
+    const storedRedirect = sessionStorage.getItem(`oauth_redirect:${state}`);
+    if (storedRedirect) {
+      const url = new URL(window.location.href);
+      url.searchParams.set("redirect", storedRedirect);
+      window.history.replaceState({}, "", url.toString());
+      sessionStorage.removeItem(`oauth_redirect:${state}`);
+    }
+  }
   return ssoProviders[provider].callback(code, state);
 }
 function handleOAuthLinkCallback() {
@@ -1829,6 +1859,15 @@ function handleOAuthLinkCallback() {
   if (!provider || !isSupportedProvider(provider)) {
     throw new Error("Unable to determine OAuth provider. State may have expired.");
   }
+  if (typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
+    const storedRedirect = sessionStorage.getItem(`oauth_redirect:${state}`);
+    if (storedRedirect) {
+      const url = new URL(window.location.href);
+      url.searchParams.set("redirect", storedRedirect);
+      window.history.replaceState({}, "", url.toString());
+      sessionStorage.removeItem(`oauth_redirect:${state}`);
+    }
+  }
   return ssoProviders[provider].link(code, state);
 }
 var AuthState = /* @__PURE__ */ ((AuthState2) => {
@@ -1891,7 +1930,7 @@ function accountToUser(account) {
 const DEFAULT_REDIRECT_CONFIG = {
   queryKey: "redirect",
   fallback: "/",
-  noAuthRoutes: ["Login", "Signup", "ForgotPassword", "ResetPassword", "Callback"],
+  noAuthRoutes: ["Login", "Signup", "ForgotPassword", "ResetPassword", "AuthCallback"],
   authenticatedRedirect: "/",
   loginRoute: "Login",
   authMetaKey: "auth",
@@ -1908,10 +1947,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 +1985,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();
     }
@@ -1958,7 +2058,7 @@ function setupAutoRedirect() {
   if (!eventEmitter || !redirectConfig) return;
   eventEmitter.on(AuthState.LOGIN, async () => {
     if (!autoRedirectRouter) {
-      console.warn("[Auth] Auto-redirect enabled but router not set. Call setAuthRouter(router) in your app setup.");
+      console.warn("[Auth] Auto-redirect enabled but router not set. Call auth.use(router) in your app setup.");
       return;
     }
     const { performRedirect: performRedirect2 } = await Promise.resolve().then(() => redirect);
@@ -2218,7 +2318,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 +2355,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 +2468,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 +2483,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,17 +1077,21 @@ 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];
     });
     async function linkCallback() {
       isLinking.value = true;
+      const { redirect: redirect2 } = route.query;
       try {
         await sso2.handleLinkCallback();
         success.value = true;
-        setTimeout(() => router.push("/"), timeout);
+        setTimeout(() => {
+          const redirectPath = typeof redirect2 === "string" ? redirect2 : "/";
+          router2.push(redirectPath);
+        }, timeout);
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Failed to link account";
         error.value = errorMessage;
@@ -1097,7 +1101,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     }
     async function handleCallback() {
       var _a;
-      const { state } = route.query;
+      const { state, redirect: redirect2 } = route.query;
       provider.value = sessionStorage.getItem(`oauth_provider:${state}`);
       try {
         const response = await sso2.handleCallback();
@@ -1106,7 +1110,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         } else {
           authResponse.value = response;
           success.value = true;
-          setTimeout(() => router.push("/"), timeout);
+          setTimeout(() => {
+            const redirectPath = typeof redirect2 === "string" ? redirect2 : "/";
+            router2.push(redirectPath);
+          }, timeout);
         }
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Authentication failed";
@@ -1237,10 +1244,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 +1288,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 +1334,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 +1371,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 +1396,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 +1421,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) {
@@ -1582,6 +1589,13 @@ function createSSOProvider(config) {
       const auth = getAuthApi();
       const redirectUri = options.redirectUri ?? getDefaultRedirectUri();
       const state = options.state ?? generateState();
+      if (typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
+        const currentParams = queryParams();
+        const redirectUrl = currentParams.redirect;
+        if (redirectUrl) {
+          sessionStorage.setItem(`oauth_redirect:${state}`, redirectUrl);
+        }
+      }
       if (typeof sessionStorage !== "undefined") {
         sessionStorage.setItem(getStateKey(), state);
         sessionStorage.setItem(`oauth_provider:${state}`, config.id);
@@ -1600,6 +1614,13 @@ function createSSOProvider(config) {
       const redirectUri = options.redirectUri ?? getDefaultRedirectUri();
       const state = options.state ?? generateState();
       const timeout2 = options.popupTimeout ?? 9e4;
+      if (typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
+        const currentParams = queryParams();
+        const redirectUrl = currentParams.redirect;
+        if (redirectUrl) {
+          sessionStorage.setItem(`oauth_redirect:${state}`, redirectUrl);
+        }
+      }
       if (typeof sessionStorage !== "undefined") {
         sessionStorage.setItem(getStateKey(), state);
         sessionStorage.setItem(`oauth_provider:${state}`, config.id);
@@ -1816,6 +1837,15 @@ function handleOAuthCallback() {
   if (!provider || !isSupportedProvider(provider)) {
     throw new Error("Unable to determine OAuth provider. State may have expired.");
   }
+  if (typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
+    const storedRedirect = sessionStorage.getItem(`oauth_redirect:${state}`);
+    if (storedRedirect) {
+      const url = new URL(window.location.href);
+      url.searchParams.set("redirect", storedRedirect);
+      window.history.replaceState({}, "", url.toString());
+      sessionStorage.removeItem(`oauth_redirect:${state}`);
+    }
+  }
   return ssoProviders[provider].callback(code, state);
 }
 function handleOAuthLinkCallback() {
@@ -1827,6 +1857,15 @@ function handleOAuthLinkCallback() {
   if (!provider || !isSupportedProvider(provider)) {
     throw new Error("Unable to determine OAuth provider. State may have expired.");
   }
+  if (typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
+    const storedRedirect = sessionStorage.getItem(`oauth_redirect:${state}`);
+    if (storedRedirect) {
+      const url = new URL(window.location.href);
+      url.searchParams.set("redirect", storedRedirect);
+      window.history.replaceState({}, "", url.toString());
+      sessionStorage.removeItem(`oauth_redirect:${state}`);
+    }
+  }
   return ssoProviders[provider].link(code, state);
 }
 var AuthState = /* @__PURE__ */ ((AuthState2) => {
@@ -1889,7 +1928,7 @@ function accountToUser(account) {
 const DEFAULT_REDIRECT_CONFIG = {
   queryKey: "redirect",
   fallback: "/",
-  noAuthRoutes: ["Login", "Signup", "ForgotPassword", "ResetPassword", "Callback"],
+  noAuthRoutes: ["Login", "Signup", "ForgotPassword", "ResetPassword", "AuthCallback"],
   authenticatedRedirect: "/",
   loginRoute: "Login",
   authMetaKey: "auth",
@@ -1906,10 +1945,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 +1983,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();
     }
@@ -1956,7 +2056,7 @@ function setupAutoRedirect() {
   if (!eventEmitter || !redirectConfig) return;
   eventEmitter.on(AuthState.LOGIN, async () => {
     if (!autoRedirectRouter) {
-      console.warn("[Auth] Auto-redirect enabled but router not set. Call setAuthRouter(router) in your app setup.");
+      console.warn("[Auth] Auto-redirect enabled but router not set. Call auth.use(router) in your app setup.");
       return;
     }
     const { performRedirect: performRedirect2 } = await Promise.resolve().then(() => redirect);
@@ -2216,7 +2316,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 +2353,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 +2467,7 @@ export {
   accountToUser,
   authGuard,
   buildLoginQuery,
+  composeGuards,
   createAuth,
   createAuthGuard,
   createAuthRoutes,
@@ -2355,7 +2482,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/types/redirect.d.ts

@@ -16,7 +16,7 @@ export interface RedirectConfig {
     /**
      * Routes that require NO authentication (login, signup, forgot password, etc)
      * Authenticated users will be automatically redirected away from these pages
-     * @default ['Login', 'Signup', 'ForgotPassword', 'ResetPassword', 'Callback']
+     * @default ['Login', 'Signup', 'ForgotPassword', 'ResetPassword', 'AuthCallback']
      */
     noAuthRoutes?: string[];
     /**

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.78",
   "description": "Bagelink auth package",
   "author": {
     "name": "Bagel Studio",

package/src/pages/Callback.vue

@@ -26,10 +26,14 @@ const providerInfo = computed(() => {
 
 async function linkCallback() {
 	isLinking.value = true
+	const { redirect } = route.query
 	try {
 		await sso.handleLinkCallback()
 		success.value = true
-		setTimeout(() => router.push('/'), timeout)
+		setTimeout(() => {
+			const redirectPath = typeof redirect === 'string' ? redirect : '/'
+			router.push(redirectPath)
+		}, timeout)
 	} catch (err: unknown) {
 		const errorMessage = err instanceof Error ? err.message : 'Failed to link account'
 		error.value = errorMessage
@@ -39,7 +43,7 @@ async function linkCallback() {
 }
 
 async function handleCallback() {
-	const { state } = route.query
+	const { state, redirect } = route.query
 	provider.value = sessionStorage.getItem(`oauth_provider:${state}`) as SSOProvider
 
 	try {
@@ -49,7 +53,12 @@ async function handleCallback() {
 		} else {
 			authResponse.value = response
 			success.value = true
-			setTimeout(() => router.push('/'), timeout)
+			// Auto-redirect will handle navigation, but fallback to manual redirect
+			// if auto-redirect is disabled or router not connected
+			setTimeout(() => {
+				const redirectPath = typeof redirect === 'string' ? redirect : '/'
+				router.push(redirectPath)
+			}, timeout)
 		}
 	} catch (err: unknown) {
 		const errorMessage = err instanceof Error ? err.message : 'Authentication failed'

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/sso.ts

@@ -314,6 +314,16 @@ function createSSOProvider(config: SSOProviderConfig): SSOProviderInstance {
 			const redirectUri = options.redirectUri ?? getDefaultRedirectUri()
 			const state = options.state ?? generateState()
 
+			// Preserve redirect URL from current location
+			if (typeof window !== 'undefined' && typeof sessionStorage !== 'undefined') {
+				const currentParams = queryParams()
+				const redirectUrl = currentParams.redirect
+				if (redirectUrl) {
+					// Store redirect URL to restore after OAuth callback
+					sessionStorage.setItem(`oauth_redirect:${state}`, redirectUrl)
+				}
+			}
+
 			// Store state AND provider in sessionStorage for verification
 			if (typeof sessionStorage !== 'undefined') {
 				sessionStorage.setItem(getStateKey(), state)
@@ -338,6 +348,16 @@ function createSSOProvider(config: SSOProviderConfig): SSOProviderInstance {
 			const state = options.state ?? generateState()
 			const timeout = options.popupTimeout ?? 90000
 
+			// Preserve redirect URL from current location (for popup flow too)
+			if (typeof window !== 'undefined' && typeof sessionStorage !== 'undefined') {
+				const currentParams = queryParams()
+				const redirectUrl = currentParams.redirect
+				if (redirectUrl) {
+					// Store redirect URL to restore after OAuth callback
+					sessionStorage.setItem(`oauth_redirect:${state}`, redirectUrl)
+				}
+			}
+
 			// Store state AND provider in sessionStorage for verification
 			if (typeof sessionStorage !== 'undefined') {
 				sessionStorage.setItem(getStateKey(), state)
@@ -615,6 +635,19 @@ function handleOAuthCallback(): Promise<AuthenticationResponse | null> {
 		throw new Error('Unable to determine OAuth provider. State may have expired.')
 	}
 
+	// Restore redirect URL to current location if it was stored
+	if (typeof window !== 'undefined' && typeof sessionStorage !== 'undefined') {
+		const storedRedirect = sessionStorage.getItem(`oauth_redirect:${state}`)
+		if (storedRedirect) {
+			// Add redirect param back to URL so auto-redirect can pick it up
+			const url = new URL(window.location.href)
+			url.searchParams.set('redirect', storedRedirect)
+			window.history.replaceState({}, '', url.toString())
+			// Clean up
+			sessionStorage.removeItem(`oauth_redirect:${state}`)
+		}
+	}
+
 	return ssoProviders[provider].callback(code, state)
 }
 
@@ -636,5 +669,18 @@ function handleOAuthLinkCallback(): Promise<void> {
 		throw new Error('Unable to determine OAuth provider. State may have expired.')
 	}
 
+	// Restore redirect URL to current location if it was stored
+	if (typeof window !== 'undefined' && typeof sessionStorage !== 'undefined') {
+		const storedRedirect = sessionStorage.getItem(`oauth_redirect:${state}`)
+		if (storedRedirect) {
+			// Add redirect param back to URL
+			const url = new URL(window.location.href)
+			url.searchParams.set('redirect', storedRedirect)
+			window.history.replaceState({}, '', url.toString())
+			// Clean up
+			sessionStorage.removeItem(`oauth_redirect:${state}`)
+		}
+	}
+
 	return ssoProviders[provider].link(code, state)
 }

package/src/types/redirect.ts

@@ -19,7 +19,7 @@ export interface RedirectConfig {
 	/**
 	 * Routes that require NO authentication (login, signup, forgot password, etc)
 	 * Authenticated users will be automatically redirected away from these pages
-	 * @default ['Login', 'Signup', 'ForgotPassword', 'ResetPassword', 'Callback']
+	 * @default ['Login', 'Signup', 'ForgotPassword', 'ResetPassword', 'AuthCallback']
 	 */
 	noAuthRoutes?: string[]
 
@@ -77,7 +77,7 @@ export interface NormalizedRedirectConfig extends Required<Omit<RedirectConfig,
 export const DEFAULT_REDIRECT_CONFIG: NormalizedRedirectConfig = {
 	queryKey: 'redirect',
 	fallback: '/',
-	noAuthRoutes: ['Login', 'Signup', 'ForgotPassword', 'ResetPassword', 'Callback'],
+	noAuthRoutes: ['Login', 'Signup', 'ForgotPassword', 'ResetPassword', 'AuthCallback'],
 	authenticatedRedirect: '/',
 	loginRoute: 'Login',
 	authMetaKey: 'auth',

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()
@@ -119,7 +175,7 @@ function setupAutoRedirect() {
 	eventEmitter.on(AuthState.LOGIN, async () => {
 		// Only auto-redirect if router is available
 		if (!autoRedirectRouter) {
-			console.warn('[Auth] Auto-redirect enabled but router not set. Call setAuthRouter(router) in your app setup.')
+			console.warn('[Auth] Auto-redirect enabled but router not set. Call auth.use(router) in your app setup.')
 			return
 		}