@payez/next-mvp 3.9.1 → 4.0.1

package/src/auth/route-config.ts

@@ -1,220 +1,220 @@
-/**
- * Advanced Route Configuration for `@payez/next-mvp`
- *
- * This module provides a robust, pattern-based mechanism for defining
- * unauthenticated (public) routes, including wildcard support.
- * It is designed to be easily configurable by host applications.
- */
-
-import { TwoFactorRequirements, TwoFactorPresets } from '../middleware/twofa-presets';
-
-export interface UnauthenticatedRouteConfig {
-  /** The route pattern (supports wildcards with *) */
-  pattern: string;
-  /** Description of what this route is for */
-  description: string;
-  /** Whether this route should be accessible during circuit breaker open state */
-  allowDuringCircuitBreakerOpen?: boolean;
-  /** Whether this route requires rate limiting even when unauthenticated */
-  requiresRateLimit?: boolean;
-}
-
-/**
- * Protected route configuration with 2FA requirements
- */
-export interface ProtectedRouteConfig {
-  /** The route pattern (supports wildcards with *) */
-  pattern: string;
-  /** Description of what this route is for */
-  description?: string;
-  /** 2FA requirements for this route (default: requires 2FA if site requires it) */
-  twoFactorRequirements: TwoFactorRequirements;
-}
-
-// Default public routes provided by the MVP package
-const defaultUnauthenticatedRoutes: UnauthenticatedRouteConfig[] = [
-  {
-    pattern: '/',
-    description: 'Homepage',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: false
-  },
-  {
-    pattern: '/login',
-    description: 'Login page',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: false
-  },
-  {
-    pattern: '/register',
-    description: 'Registration page',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: false
-  },
-  {
-    pattern: '/forgot-password',
-    description: 'Forgot password page',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: false
-  },
-  {
-    pattern: '/account-auth/*',
-    description: 'All authentication pages (login, register, forgot password, etc.)',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: false
-  },
-  {
-    pattern: '/api/auth/*',
-    description: 'NextAuth.js authentication API endpoints',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: true
-  },
-  {
-    pattern: '/api/session/viability',
-    description: 'Session viability check endpoint',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: false
-  },
-  {
-    pattern: '/api/health/*',
-    description: 'Health check endpoints',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: true
-  },
-  {
-    pattern: '/service-unavailable',
-    description: 'Service unavailable error page',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: false
-  },
-  {
-    pattern: '/_next/*',
-    description: 'Next.js static assets',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: false
-  },
-  {
-    pattern: '/favicon.ico',
-    description: 'Favicon',
-    allowDuringCircuitBreakerOpen: true,
-    requiresRateLimit: false
-  },
-];
-
-let configuredRoutes: UnauthenticatedRouteConfig[] = [...defaultUnauthenticatedRoutes];
-
-// Default routes that require auth but NOT 2FA (for 2FA onboarding flow)
-// NOTE: Only the bare minimum routes needed for 2FA completion - no welcome screens
-const default2FABypassRoutes: ProtectedRouteConfig[] = [
-  {
-    pattern: '/api/auth/*',
-    description: 'NextAuth.js API routes - must be accessible during 2FA flow for session management',
-    twoFactorRequirements: TwoFactorPresets.NONE
-  },
-  {
-    pattern: '/api/account/*',
-    description: '2FA verification APIs (send-code, verify-email, verify-sms, update-phone, masked-info)',
-    twoFactorRequirements: TwoFactorPresets.NONE
-  },
-  {
-    pattern: '/api/session/*',
-    description: 'Session management APIs (viability, refresh-viability)',
-    twoFactorRequirements: TwoFactorPresets.NONE
-  },
-  {
-    pattern: '/account-auth/verify-code',
-    description: '2FA verification page',
-    twoFactorRequirements: TwoFactorPresets.NONE
-  },
-  {
-    pattern: '/test-env/*',
-    description: 'Test/debug pages (emergency-logout, jwt-inspect, refresh-token) - must bypass 2FA',
-    twoFactorRequirements: TwoFactorPresets.NONE
-  },
-  // NOTE: /onboarding/two-factor intentionally NOT included - go straight to 2FA, no welcome page
-];
-
-let configured2FABypassRoutes: ProtectedRouteConfig[] = [...default2FABypassRoutes];
-
-/**
- * Configures additional public routes for the application.
- * This function should be called once during application initialization.
- * @param appRoutes An array of route patterns or UnauthenticatedRouteConfig objects.
- */
-export function configurePublicRoutes(appRoutes: (string | UnauthenticatedRouteConfig)[] = []) {
-  const newRoutes = appRoutes.map(route =>
-    typeof route === 'string'
-      ? { pattern: route, description: `Application-defined public route: ${route}` }
-      : route
-  );
-  configuredRoutes = [...defaultUnauthenticatedRoutes, ...newRoutes];
-}
-
-/**
- * Configures routes that require authentication but bypass 2FA requirements.
- * Essential for 2FA onboarding flows where user is authenticated but hasn't completed 2FA yet.
- * @param routes An array of route patterns or ProtectedRouteConfig objects.
- */
-export function configure2FABypassRoutes(routes: (string | ProtectedRouteConfig)[] = []) {
-  const newRoutes = routes.map(route =>
-    typeof route === 'string'
-      ? { pattern: route, description: `2FA bypass route: ${route}`, twoFactorRequirements: TwoFactorPresets.NONE }
-      : route
-  );
-  configured2FABypassRoutes = [...default2FABypassRoutes, ...newRoutes];
-}
-
-/**
- * Checks if a route should bypass 2FA requirements (but still requires auth).
- * @param pathname The URL pathname to check.
- * @returns The ProtectedRouteConfig if found, otherwise undefined.
- */
-export function get2FABypassConfig(pathname: string): ProtectedRouteConfig | undefined {
-  return configured2FABypassRoutes.find(route => {
-    if (route.pattern.endsWith('*')) {
-      const basePattern = route.pattern.slice(0, -1);
-      return pathname.startsWith(basePattern);
-    }
-    return pathname === route.pattern;
-  });
-}
-
-/**
- * Checks if a route should bypass 2FA requirements.
- * @param pathname The URL pathname to check.
- * @returns true if 2FA should be bypassed for this route.
- */
-export function should2FABypass(pathname: string): boolean {
-  return get2FABypassConfig(pathname) !== undefined;
-}
-
-/**
- * Checks if a given pathname matches any of the configured unauthenticated routes.
- * Supports wildcard matching (e.g., '/api/*').
- * @param pathname The URL pathname to check.
- * @returns `true` if the route is unauthenticated, `false` otherwise.
- */
-export function isUnauthenticatedRoute(pathname: string): boolean {
-  return configuredRoutes.some(route => {
-    if (route.pattern.endsWith('*')) {
-      const basePattern = route.pattern.slice(0, -1);
-      return pathname.startsWith(basePattern);
-    }
-    return pathname === route.pattern;
-  });
-}
-
-/**
- * Retrieves the configuration for a specific route.
- * @param pathname The URL pathname to get the configuration for.
- * @returns The `UnauthenticatedRouteConfig` object if found, otherwise `undefined`.
- */
-export function getRouteConfig(pathname: string): UnauthenticatedRouteConfig | undefined {
-  return configuredRoutes.find(route => {
-    if (route.pattern.endsWith('*')) {
-      const basePattern = route.pattern.slice(0, -1);
-      return pathname.startsWith(basePattern);
-    }
-    return pathname === route.pattern;
-  });
+/**
+ * Advanced Route Configuration for `@payez/next-mvp`
+ *
+ * This module provides a robust, pattern-based mechanism for defining
+ * unauthenticated (public) routes, including wildcard support.
+ * It is designed to be easily configurable by host applications.
+ */
+
+import { TwoFactorRequirements, TwoFactorPresets } from '../middleware/twofa-presets';
+
+export interface UnauthenticatedRouteConfig {
+  /** The route pattern (supports wildcards with *) */
+  pattern: string;
+  /** Description of what this route is for */
+  description: string;
+  /** Whether this route should be accessible during circuit breaker open state */
+  allowDuringCircuitBreakerOpen?: boolean;
+  /** Whether this route requires rate limiting even when unauthenticated */
+  requiresRateLimit?: boolean;
+}
+
+/**
+ * Protected route configuration with 2FA requirements
+ */
+export interface ProtectedRouteConfig {
+  /** The route pattern (supports wildcards with *) */
+  pattern: string;
+  /** Description of what this route is for */
+  description?: string;
+  /** 2FA requirements for this route (default: requires 2FA if site requires it) */
+  twoFactorRequirements: TwoFactorRequirements;
+}
+
+// Default public routes provided by the MVP package
+const defaultUnauthenticatedRoutes: UnauthenticatedRouteConfig[] = [
+  {
+    pattern: '/',
+    description: 'Homepage',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: false
+  },
+  {
+    pattern: '/login',
+    description: 'Login page',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: false
+  },
+  {
+    pattern: '/register',
+    description: 'Registration page',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: false
+  },
+  {
+    pattern: '/forgot-password',
+    description: 'Forgot password page',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: false
+  },
+  {
+    pattern: '/account-auth/*',
+    description: 'All authentication pages (login, register, forgot password, etc.)',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: false
+  },
+  {
+    pattern: '/api/auth/*',
+    description: 'Authentication API endpoints',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: true
+  },
+  {
+    pattern: '/api/session/viability',
+    description: 'Session viability check endpoint',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: false
+  },
+  {
+    pattern: '/api/health/*',
+    description: 'Health check endpoints',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: true
+  },
+  {
+    pattern: '/service-unavailable',
+    description: 'Service unavailable error page',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: false
+  },
+  {
+    pattern: '/_next/*',
+    description: 'Next.js static assets',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: false
+  },
+  {
+    pattern: '/favicon.ico',
+    description: 'Favicon',
+    allowDuringCircuitBreakerOpen: true,
+    requiresRateLimit: false
+  },
+];
+
+let configuredRoutes: UnauthenticatedRouteConfig[] = [...defaultUnauthenticatedRoutes];
+
+// Default routes that require auth but NOT 2FA (for 2FA onboarding flow)
+// NOTE: Only the bare minimum routes needed for 2FA completion - no welcome screens
+const default2FABypassRoutes: ProtectedRouteConfig[] = [
+  {
+    pattern: '/api/auth/*',
+    description: 'Auth API routes - must be accessible during 2FA flow for session management',
+    twoFactorRequirements: TwoFactorPresets.NONE
+  },
+  {
+    pattern: '/api/account/*',
+    description: '2FA verification APIs (send-code, verify-email, verify-sms, update-phone, masked-info)',
+    twoFactorRequirements: TwoFactorPresets.NONE
+  },
+  {
+    pattern: '/api/session/*',
+    description: 'Session management APIs (viability, refresh-viability)',
+    twoFactorRequirements: TwoFactorPresets.NONE
+  },
+  {
+    pattern: '/account-auth/verify-code',
+    description: '2FA verification page',
+    twoFactorRequirements: TwoFactorPresets.NONE
+  },
+  {
+    pattern: '/test-env/*',
+    description: 'Test/debug pages (emergency-logout, jwt-inspect, refresh-token) - must bypass 2FA',
+    twoFactorRequirements: TwoFactorPresets.NONE
+  },
+  // NOTE: /onboarding/two-factor intentionally NOT included - go straight to 2FA, no welcome page
+];
+
+let configured2FABypassRoutes: ProtectedRouteConfig[] = [...default2FABypassRoutes];
+
+/**
+ * Configures additional public routes for the application.
+ * This function should be called once during application initialization.
+ * @param appRoutes An array of route patterns or UnauthenticatedRouteConfig objects.
+ */
+export function configurePublicRoutes(appRoutes: (string | UnauthenticatedRouteConfig)[] = []) {
+  const newRoutes = appRoutes.map(route =>
+    typeof route === 'string'
+      ? { pattern: route, description: `Application-defined public route: ${route}` }
+      : route
+  );
+  configuredRoutes = [...defaultUnauthenticatedRoutes, ...newRoutes];
+}
+
+/**
+ * Configures routes that require authentication but bypass 2FA requirements.
+ * Essential for 2FA onboarding flows where user is authenticated but hasn't completed 2FA yet.
+ * @param routes An array of route patterns or ProtectedRouteConfig objects.
+ */
+export function configure2FABypassRoutes(routes: (string | ProtectedRouteConfig)[] = []) {
+  const newRoutes = routes.map(route =>
+    typeof route === 'string'
+      ? { pattern: route, description: `2FA bypass route: ${route}`, twoFactorRequirements: TwoFactorPresets.NONE }
+      : route
+  );
+  configured2FABypassRoutes = [...default2FABypassRoutes, ...newRoutes];
+}
+
+/**
+ * Checks if a route should bypass 2FA requirements (but still requires auth).
+ * @param pathname The URL pathname to check.
+ * @returns The ProtectedRouteConfig if found, otherwise undefined.
+ */
+export function get2FABypassConfig(pathname: string): ProtectedRouteConfig | undefined {
+  return configured2FABypassRoutes.find(route => {
+    if (route.pattern.endsWith('*')) {
+      const basePattern = route.pattern.slice(0, -1);
+      return pathname.startsWith(basePattern);
+    }
+    return pathname === route.pattern;
+  });
+}
+
+/**
+ * Checks if a route should bypass 2FA requirements.
+ * @param pathname The URL pathname to check.
+ * @returns true if 2FA should be bypassed for this route.
+ */
+export function should2FABypass(pathname: string): boolean {
+  return get2FABypassConfig(pathname) !== undefined;
+}
+
+/**
+ * Checks if a given pathname matches any of the configured unauthenticated routes.
+ * Supports wildcard matching (e.g., '/api/*').
+ * @param pathname The URL pathname to check.
+ * @returns `true` if the route is unauthenticated, `false` otherwise.
+ */
+export function isUnauthenticatedRoute(pathname: string): boolean {
+  return configuredRoutes.some(route => {
+    if (route.pattern.endsWith('*')) {
+      const basePattern = route.pattern.slice(0, -1);
+      return pathname.startsWith(basePattern);
+    }
+    return pathname === route.pattern;
+  });
+}
+
+/**
+ * Retrieves the configuration for a specific route.
+ * @param pathname The URL pathname to get the configuration for.
+ * @returns The `UnauthenticatedRouteConfig` object if found, otherwise `undefined`.
+ */
+export function getRouteConfig(pathname: string): UnauthenticatedRouteConfig | undefined {
+  return configuredRoutes.find(route => {
+    if (route.pattern.endsWith('*')) {
+      const basePattern = route.pattern.slice(0, -1);
+      return pathname.startsWith(basePattern);
+    }
+    return pathname === route.pattern;
+  });
 }

package/src/auth/utils/token-utils.ts

@@ -2,7 +2,6 @@
  * Token Utilities
  *
  * JWT decoding and expiry checking utilities.
- * Extracted from auth-options.ts for clarity.
  *
  * @version 1.0.0
  * @since auth-refactor-2026-01

package/src/client/AuthContext.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { createContext, useContext, ReactNode, useState, useEffect } from 'react';
-import { getProviders } from 'next-auth/react';
+import { authClient } from './better-auth-client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AuthConfig, AuthMode, FederatedProvider } from '@/types/auth';
 
@@ -62,7 +62,11 @@ export function AuthProvider({ children, config, useDynamicProviders = true }: A
 
     async function fetchDynamicProviders() {
       try {
-        const result = await getProviders();
+        // Better Auth doesn't have a getProviders equivalent.
+        // Use static provider map based on configured social providers.
+        const result: Record<string, { id: string; name: string }> | null = {
+          google: { id: 'google', name: 'Google' },
+        };
 
         if (!mounted) return;
 

package/src/client/fetch-with-auth.ts

@@ -1,48 +1,48 @@
-// src/client/fetch-with-auth.ts
-import { getSession } from 'next-auth/react';
-
-/**
- * A wrapper for the `fetch` API that automatically injects the session's
- * accessToken into the Authorization header and handles 401 Unauthorized
- * responses by redirecting the user to the login page.
- *
- * @param url The URL to fetch.
- * @param options The standard `fetch` options.
- * @returns A `Promise` that resolves to the `Response` object.
- * @throws An 'UNAUTHORIZED_REDIRECT' error after initiating the redirect to halt further execution.
- */
-export async function fetchWithAuth(url: string, options: RequestInit = {}): Promise<Response> {
-  // 1. Retrieve the client-side session to get the accessToken.
-  const session = await getSession();
-
-  // 2. Inject the accessToken into the Authorization header.
-  const headers = new Headers(options.headers);
-  if (session?.accessToken) {
-    headers.set('Authorization', `Bearer ${session.accessToken}`);
-  }
-  options.headers = headers;
-
-  const response = await fetch(url, options);
-
-  // 3. Handle the 401 response intelligently.
-  if (response.status === 401) {
-    // If we have a valid session, this is likely a claim/permission error, not an auth error
-    if (session?.accessToken) {
-      console.warn('API returned 401 despite valid session. Likely insufficient claims or permissions.');
-      // Don't redirect - let the calling code handle the error gracefully
-      return response;
-    }
-
-    // No valid session - this is a real authentication failure
-    console.error('Unauthorized API call (no valid session). Redirecting to login.');
-    // SAFEGUARD: Never use auth pages as callback URLs to prevent redirect loops
-    const pathname = window.location.pathname;
-    const safeCallbackUrl = pathname.startsWith('/account-auth/') ? '/' : pathname;
-    window.location.href = `/account-auth/login?callbackUrl=${encodeURIComponent(safeCallbackUrl)}`;
-
-    // Throw a specific error to signal that a redirect has been initiated.
-    throw new Error('UNAUTHORIZED_REDIRECT');
-  }
-
-  return response;
+// src/client/fetch-with-auth.ts
+import { authClient } from './better-auth-client';
+
+/**
+ * A wrapper for the `fetch` API that automatically injects the session's
+ * accessToken into the Authorization header and handles 401 Unauthorized
+ * responses by redirecting the user to the login page.
+ *
+ * @param url The URL to fetch.
+ * @param options The standard `fetch` options.
+ * @returns A `Promise` that resolves to the `Response` object.
+ * @throws An 'UNAUTHORIZED_REDIRECT' error after initiating the redirect to halt further execution.
+ */
+export async function fetchWithAuth(url: string, options: RequestInit = {}): Promise<Response> {
+  // 1. Retrieve the client-side session to get the accessToken.
+  const { data: session } = await authClient.getSession();
+
+  // 2. Inject the accessToken into the Authorization header.
+  const headers = new Headers(options.headers);
+  if ((session as any)?.accessToken) {
+    headers.set('Authorization', `Bearer ${(session as any).accessToken}`);
+  }
+  options.headers = headers;
+
+  const response = await fetch(url, options);
+
+  // 3. Handle the 401 response intelligently.
+  if (response.status === 401) {
+    // If we have a valid session, this is likely a claim/permission error, not an auth error
+    if ((session as any)?.accessToken) {
+      console.warn('API returned 401 despite valid session. Likely insufficient claims or permissions.');
+      // Don't redirect - let the calling code handle the error gracefully
+      return response;
+    }
+
+    // No valid session - this is a real authentication failure
+    console.error('Unauthorized API call (no valid session). Redirecting to login.');
+    // SAFEGUARD: Never use auth pages as callback URLs to prevent redirect loops
+    const pathname = window.location.pathname;
+    const safeCallbackUrl = pathname.startsWith('/account-auth/') ? '/' : pathname;
+    window.location.href = `/account-auth/login?callbackUrl=${encodeURIComponent(safeCallbackUrl)}`;
+
+    // Throw a specific error to signal that a redirect has been initiated.
+    throw new Error('UNAUTHORIZED_REDIRECT');
+  }
+
+  return response;
 }

package/src/components/SessionSync.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
-import { useSession, signOut } from 'next-auth/react';
-import type { Session } from 'next-auth';
+import { authClient } from '../client/better-auth-client';
 import { useAuthStore } from '../stores/authStore';
 import { isValidSession } from '../lib/session';
 import {
@@ -44,7 +43,9 @@ function sanitizeForLog(value: string | undefined, type: 'email' | 'userId'): st
  * This ensures the app NEVER shows authenticated UI with empty/invalid session data.
  */
 export function SessionSync({ children }: { children: React.ReactNode }) {
-  const { data: session, status } = useSession();
+  const { data: sessionData, isPending } = authClient.useSession();
+  const session = sessionData;
+  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
   const { setSession, clearSession } = useAuthStore();
   
   // Guard against duplicate sign-out calls
@@ -102,8 +103,8 @@ export function SessionSync({ children }: { children: React.ReactNode }) {
         // Cookie clearing failed - non-critical, continue with signout
       }
 
-      // Force NextAuth to sign out (this will clear cookies and trigger redirect)
-      signOut({ redirect: false })
+      // Force Better Auth to sign out (this will clear cookies and trigger redirect)
+      authClient.signOut()
         .then(() => {
           if (isMounted) {
             // Use generic error code instead of implementation details

package/src/components/account/MobileNavDrawer.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useCallback } from 'react';
-import { useSession, signIn } from 'next-auth/react';
+import { authClient } from '../../client/better-auth-client';
 import { usePathname } from 'next/navigation';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -52,7 +52,7 @@ export function MobileNavDrawer({
   unauthActions,
   authFooter,
 }: MobileNavDrawerProps) {
-  const { data: session } = useSession();
+  const { data: session } = authClient.useSession();
   const pathname = usePathname();
   const isAuthenticated = !!session?.user;
 
@@ -90,7 +90,7 @@ export function MobileNavDrawer({
     if (onSignIn) {
       onSignIn();
     } else {
-      signIn(undefined, { callbackUrl: signInCallbackUrl });
+      authClient.signIn.social({ provider: 'google', callbackURL: signInCallbackUrl });
     }
   };
 

package/src/components/account/UserAvatarMenu.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
-import { useSession, signOut } from 'next-auth/react';
+import { authClient } from '../../client/better-auth-client';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { User, Settings, Shield, LogOut } from 'lucide-react';
@@ -39,7 +39,9 @@ export function UserAvatarMenu({
   customItems,
   onSignOut,
 }: UserAvatarMenuProps) {
-  const { data: session, status } = useSession();
+  const { data: sessionData, isPending } = authClient.useSession();
+  const session = sessionData;
+  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -102,7 +104,8 @@ export function UserAvatarMenu({
     } else {
       // Use NEXT_PUBLIC env var or default to root
       const logoutUrl = process.env.NEXT_PUBLIC_LOGOUT_REDIRECT_URL || '/';
-      await signOut({ callbackUrl: logoutUrl });
+      await authClient.signOut();
+      window.location.href = logoutUrl;
     }
   };