@payez/next-mvp 4.8.1 → 4.8.2

package/src/client/AuthContext.tsx

@@ -1,192 +1,192 @@
-'use client';
-
-import React, { createContext, useContext, ReactNode, useState, useEffect } from 'react';
-import { authClient } from './better-auth-client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { AuthConfig, AuthMode, FederatedProvider } from '@/types/auth';
-
-const AuthContext = createContext<AuthConfig | null>(null);
-
-const defaultConfig: AuthConfig = {
-  mode: 'traditional',
-  providers: [],
-  enableRecovery: true,
-  enableEmailSignup: true,
-  allowPasswordReset: true,
-};
-
-// Map provider IDs to our FederatedProvider type
-const PROVIDER_MAP: Record<string, FederatedProvider> = {
-  'google': 'google',
-  'apple': 'apple',
-  'facebook': 'facebook',
-  'github': 'github',
-  'azure-ad': 'microsoft',
-  'microsoft-entra-id': 'microsoft',
-};
-
-// OAuth providers we support in UI (excludes credentials)
-const OAUTH_PROVIDER_IDS = ['google', 'apple', 'facebook', 'github', 'azure-ad', 'microsoft-entra-id'];
-
-interface AuthProviderProps {
-  children: ReactNode;
-  config?: Partial<AuthConfig>;
-  /**
-   * If true, providers will be loaded dynamically from IDP config
-   * instead of using the static providers array from config.
-   */
-  useDynamicProviders?: boolean;
-}
-
-/** PAY-2334: how long /api/auth/settings may take before the sign-in card stops waiting and says it could not load. */
-export const SETTINGS_FETCH_TIMEOUT_MS = 10000;
-
-export function AuthProvider({ children, config, useDynamicProviders = true }: AuthProviderProps) {
-  const [dynamicProviders, setDynamicProviders] = useState<FederatedProvider[]>([]);
-  const [providersLoaded, setProvidersLoaded] = useState(!useDynamicProviders);
-  // PAY-2334: providersLoaded is true on failure too (it only means "stop waiting"), so it cannot tell an empty answer from
-  // no answer. This can: loading -> ready (answered) | failed (non-2xx, thrown, timed out).
-  const [settingsStatus, setSettingsStatus] = useState<'loading' | 'ready' | 'failed'>(useDynamicProviders ? 'loading' : 'ready');
-
-  // What the IDP says this client offers. null until /api/auth/settings answers.
-  const [serverSettings, setServerSettings] = useState<{
-    allowFederatedLogin: boolean;
-    allowTraditionalLogin: boolean;
-  } | null>(null);
-
-  // Create QueryClient instance for React Query - used internally by MVP hooks
-  const [queryClient] = useState(() => new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 60 * 1000, // 1 minute
-        retry: 1,
-        refetchOnWindowFocus: false,
-      },
-    },
-  }));
-
-  // Load available providers on mount
-  useEffect(() => {
-    if (!useDynamicProviders) return;
-
-    let mounted = true;
-
-    async function fetchDynamicProviders() {
-      const controller = new AbortController();
-      const timer = setTimeout(() => controller.abort(), SETTINGS_FETCH_TIMEOUT_MS);
-      let status: 'ready' | 'failed' = 'failed';
-      try {
-        // READ THE IDP. This used to be a hardcoded literal:
-        //     const result = { google: { id: 'google', name: 'Google' } };
-        // sitting under a comment saying providers were loaded dynamically. It returned
-        // Google for every client regardless of what the tenant actually had enabled -
-        // a config-shaped constant, which is the one thing configuration must never be.
-        //
-        // /api/auth/settings already serves the real answer (enabledProviders,
-        // allowFederatedLogin, enablePasswordReset) and nothing consumed it.
-        const response = await fetch('/api/auth/settings', { signal: controller.signal });
-        if (!response.ok) {
-          // No silent substitution. Absent settings means we do not know what this
-          // client offers, and inventing a provider list is how a tenant ends up with a
-          // sign-in button their IDP will refuse.
-          console.error('[AuthProvider] /api/auth/settings returned ' + response.status +
-            ' - provider list unknown. Mount ./routes/auth/settings.');
-          return;
-        }
-
-        const body = await response.json();
-        const settings = body?.data ?? body;
-        if (!mounted) return;
-
-        const ids: string[] = Array.isArray(settings?.enabledProviders)
-          ? settings.enabledProviders
-          : [];
-
-        const oauthProviders = ids
-          .filter(id => OAUTH_PROVIDER_IDS.includes(id))
-          .map(id => PROVIDER_MAP[id])
-          .filter((p): p is FederatedProvider => p !== undefined);
-
-        status = 'ready';
-        setDynamicProviders(oauthProviders);
-        setServerSettings({
-          allowFederatedLogin: settings?.allowFederatedLogin !== false,
-          // TRADITIONAL DEFAULTS ON. The IDP does not carry an explicit flag for it yet;
-          // until it does, username/password is available unless a site opts out. An
-          // OAuth-only client is a deliberate choice, not the default.
-          allowTraditionalLogin: settings?.allowTraditionalLogin !== false,
-        });
-      } catch (err) {
-        console.error('[AuthProvider] could not read /api/auth/settings:', err);
-      } finally {
-        clearTimeout(timer);
-        if (mounted) {
-          setSettingsStatus(status);
-          setProvidersLoaded(true);
-        }
-      }
-    }
-    fetchDynamicProviders();
-
-    return () => {
-      mounted = false;
-    };
-  }, [useDynamicProviders]);
-
-  // Determine final providers list
-  const providers = useDynamicProviders && providersLoaded
-    ? dynamicProviders
-    : (config?.providers ?? defaultConfig.providers);
-
-  const authConfig: AuthConfig = {
-    ...defaultConfig,
-    ...config,
-    providers, // from the IDP when useDynamicProviders is on
-    settingsStatus: useDynamicProviders ? settingsStatus : 'ready',
-    // THE SERVER DECIDES, THE SITE MAY OVERRIDE. A site that passes an explicit value
-    // still wins; absent that, what the tenant's IDP reports is what renders. A client
-    // hardcoding its own auth mode is how a sign-in screen and its IDP disagree.
-    allowFederatedLogin: config?.allowFederatedLogin ?? serverSettings?.allowFederatedLogin ?? true,
-    allowTraditionalLogin: config?.allowTraditionalLogin ?? serverSettings?.allowTraditionalLogin ?? true,
-  };
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <AuthContext.Provider value={authConfig}>
-        {children}
-      </AuthContext.Provider>
-    </QueryClientProvider>
-  );
-}
-
-export function useAuthConfig(): AuthConfig {
-  const context = useContext(AuthContext);
-  if (!context) {
-    return defaultConfig;
-  }
-  return context;
-}
-
-export function useAuthMode(): AuthMode {
-  const config = useAuthConfig();
-  return config.mode;
-}
-
-export function useFederatedProviders(): FederatedProvider[] {
-  const config = useAuthConfig();
-  return config.providers;
-}
-
-export function useFederatedAuthEnabled(): boolean {
-  const config = useAuthConfig();
-  // Was `config.mode === 'federated'`, which made the two mutually exclusive and let a
-  // site's hardcoded mode silently hide what the IDP offers.
-  return config.allowFederatedLogin !== false && config.providers.length > 0;
-}
-
-export function useTraditionalAuthEnabled(): boolean {
-  const config = useAuthConfig();
-  // Was `config.mode === 'traditional'`. Both can be on at once - that is the normal
-  // case, and OAuth-only is the exception a client opts into.
-  return config.allowTraditionalLogin !== false;
-}
+'use client';
+
+import React, { createContext, useContext, ReactNode, useState, useEffect } from 'react';
+import { authClient } from './better-auth-client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AuthConfig, AuthMode, FederatedProvider } from '@/types/auth';
+
+const AuthContext = createContext<AuthConfig | null>(null);
+
+const defaultConfig: AuthConfig = {
+  mode: 'traditional',
+  providers: [],
+  enableRecovery: true,
+  enableEmailSignup: true,
+  allowPasswordReset: true,
+};
+
+// Map provider IDs to our FederatedProvider type
+const PROVIDER_MAP: Record<string, FederatedProvider> = {
+  'google': 'google',
+  'apple': 'apple',
+  'facebook': 'facebook',
+  'github': 'github',
+  'azure-ad': 'microsoft',
+  'microsoft-entra-id': 'microsoft',
+};
+
+// OAuth providers we support in UI (excludes credentials)
+const OAUTH_PROVIDER_IDS = ['google', 'apple', 'facebook', 'github', 'azure-ad', 'microsoft-entra-id'];
+
+interface AuthProviderProps {
+  children: ReactNode;
+  config?: Partial<AuthConfig>;
+  /**
+   * If true, providers will be loaded dynamically from IDP config
+   * instead of using the static providers array from config.
+   */
+  useDynamicProviders?: boolean;
+}
+
+/** PAY-2334: how long /api/auth/settings may take before the sign-in card stops waiting and says it could not load. */
+export const SETTINGS_FETCH_TIMEOUT_MS = 10000;
+
+export function AuthProvider({ children, config, useDynamicProviders = true }: AuthProviderProps) {
+  const [dynamicProviders, setDynamicProviders] = useState<FederatedProvider[]>([]);
+  const [providersLoaded, setProvidersLoaded] = useState(!useDynamicProviders);
+  // PAY-2334: providersLoaded is true on failure too (it only means "stop waiting"), so it cannot tell an empty answer from
+  // no answer. This can: loading -> ready (answered) | failed (non-2xx, thrown, timed out).
+  const [settingsStatus, setSettingsStatus] = useState<'loading' | 'ready' | 'failed'>(useDynamicProviders ? 'loading' : 'ready');
+
+  // What the IDP says this client offers. null until /api/auth/settings answers.
+  const [serverSettings, setServerSettings] = useState<{
+    allowFederatedLogin: boolean;
+    allowTraditionalLogin: boolean;
+  } | null>(null);
+
+  // Create QueryClient instance for React Query - used internally by MVP hooks
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000, // 1 minute
+        retry: 1,
+        refetchOnWindowFocus: false,
+      },
+    },
+  }));
+
+  // Load available providers on mount
+  useEffect(() => {
+    if (!useDynamicProviders) return;
+
+    let mounted = true;
+
+    async function fetchDynamicProviders() {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), SETTINGS_FETCH_TIMEOUT_MS);
+      let status: 'ready' | 'failed' = 'failed';
+      try {
+        // READ THE IDP. This used to be a hardcoded literal:
+        //     const result = { google: { id: 'google', name: 'Google' } };
+        // sitting under a comment saying providers were loaded dynamically. It returned
+        // Google for every client regardless of what the tenant actually had enabled -
+        // a config-shaped constant, which is the one thing configuration must never be.
+        //
+        // /api/auth/settings already serves the real answer (enabledProviders,
+        // allowFederatedLogin, enablePasswordReset) and nothing consumed it.
+        const response = await fetch('/api/auth/settings', { signal: controller.signal });
+        if (!response.ok) {
+          // No silent substitution. Absent settings means we do not know what this
+          // client offers, and inventing a provider list is how a tenant ends up with a
+          // sign-in button their IDP will refuse.
+          console.error('[AuthProvider] /api/auth/settings returned ' + response.status +
+            ' - provider list unknown. Mount ./routes/auth/settings.');
+          return;
+        }
+
+        const body = await response.json();
+        const settings = body?.data ?? body;
+        if (!mounted) return;
+
+        const ids: string[] = Array.isArray(settings?.enabledProviders)
+          ? settings.enabledProviders
+          : [];
+
+        const oauthProviders = ids
+          .filter(id => OAUTH_PROVIDER_IDS.includes(id))
+          .map(id => PROVIDER_MAP[id])
+          .filter((p): p is FederatedProvider => p !== undefined);
+
+        status = 'ready';
+        setDynamicProviders(oauthProviders);
+        setServerSettings({
+          allowFederatedLogin: settings?.allowFederatedLogin !== false,
+          // TRADITIONAL DEFAULTS ON. The IDP does not carry an explicit flag for it yet;
+          // until it does, username/password is available unless a site opts out. An
+          // OAuth-only client is a deliberate choice, not the default.
+          allowTraditionalLogin: settings?.allowTraditionalLogin !== false,
+        });
+      } catch (err) {
+        console.error('[AuthProvider] could not read /api/auth/settings:', err);
+      } finally {
+        clearTimeout(timer);
+        if (mounted) {
+          setSettingsStatus(status);
+          setProvidersLoaded(true);
+        }
+      }
+    }
+    fetchDynamicProviders();
+
+    return () => {
+      mounted = false;
+    };
+  }, [useDynamicProviders]);
+
+  // Determine final providers list
+  const providers = useDynamicProviders && providersLoaded
+    ? dynamicProviders
+    : (config?.providers ?? defaultConfig.providers);
+
+  const authConfig: AuthConfig = {
+    ...defaultConfig,
+    ...config,
+    providers, // from the IDP when useDynamicProviders is on
+    settingsStatus: useDynamicProviders ? settingsStatus : 'ready',
+    // THE SERVER DECIDES, THE SITE MAY OVERRIDE. A site that passes an explicit value
+    // still wins; absent that, what the tenant's IDP reports is what renders. A client
+    // hardcoding its own auth mode is how a sign-in screen and its IDP disagree.
+    allowFederatedLogin: config?.allowFederatedLogin ?? serverSettings?.allowFederatedLogin ?? true,
+    allowTraditionalLogin: config?.allowTraditionalLogin ?? serverSettings?.allowTraditionalLogin ?? true,
+  };
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthContext.Provider value={authConfig}>
+        {children}
+      </AuthContext.Provider>
+    </QueryClientProvider>
+  );
+}
+
+export function useAuthConfig(): AuthConfig {
+  const context = useContext(AuthContext);
+  if (!context) {
+    return defaultConfig;
+  }
+  return context;
+}
+
+export function useAuthMode(): AuthMode {
+  const config = useAuthConfig();
+  return config.mode;
+}
+
+export function useFederatedProviders(): FederatedProvider[] {
+  const config = useAuthConfig();
+  return config.providers;
+}
+
+export function useFederatedAuthEnabled(): boolean {
+  const config = useAuthConfig();
+  // Was `config.mode === 'federated'`, which made the two mutually exclusive and let a
+  // site's hardcoded mode silently hide what the IDP offers.
+  return config.allowFederatedLogin !== false && config.providers.length > 0;
+}
+
+export function useTraditionalAuthEnabled(): boolean {
+  const config = useAuthConfig();
+  // Was `config.mode === 'traditional'`. Both can be on at once - that is the normal
+  // case, and OAuth-only is the exception a client opts into.
+  return config.allowTraditionalLogin !== false;
+}

package/src/client/better-auth-client.ts

@@ -1,70 +1,70 @@
-/**
- * Better Auth Client.
- *
- * Import from '@payez/next-mvp/client/better-auth-client'.
- *
- * Includes useSessionCompat() — returns a { data, status } shape so existing
- * components written against the legacy hook don't need destructure changes.
- */
-
-import { createAuthClient } from 'better-auth/react';
-import { magicLinkClient } from 'better-auth/client/plugins';
-import { useMemo } from 'react';
-
-export const authClient = createAuthClient({
-  // baseURL derived from BETTER_AUTH_URL or window.location.origin
-  plugins: [magicLinkClient()],
-});
-
-// Convenience exports
-export const { useSession, signIn, signOut } = authClient;
-
-
-/**
- * NextAuth-compatible useSession wrapper.
- *
- * Maps Better Auth's { data, error, isPending } to NextAuth's { data, status, update }.
- * Drop-in replacement — no destructure changes needed in consuming components.
- */
-export function useSessionCompat() {
-  const baSession = authClient.useSession();
-
-  const status = useMemo(() => {
-    if (baSession.isPending) return 'loading' as const;
-    if (baSession.data) return 'authenticated' as const;
-    return 'unauthenticated' as const;
-  }, [baSession.isPending, baSession.data]);
-
-  // Map Better Auth session shape to NextAuth session shape
-  const data = useMemo(() => {
-    if (!baSession.data) return null;
-    return {
-      ...baSession.data,
-      user: baSession.data.user,
-      expires: '', // Better Auth handles expiry differently
-    };
-  }, [baSession.data]);
-
-  return {
-    data,
-    status,
-    update: async () => {
-      // Better Auth doesn't have a direct "refresh session" call.
-      // Force refetch by invalidating the query.
-      // TODO: Wire to proper session refresh when available.
-      return data;
-    },
-  };
-}
-
-/**
- * NextAuth-compatible signOut wrapper.
- *
- * Maps NextAuth signOut({ redirect, callbackUrl }) to Better Auth.
- */
-export async function signOutCompat(options?: { redirect?: boolean; callbackUrl?: string }) {
-  await authClient.signOut();
-  if (options?.redirect !== false && options?.callbackUrl) {
-    window.location.href = options.callbackUrl;
-  }
-}
+/**
+ * Better Auth Client.
+ *
+ * Import from '@payez/next-mvp/client/better-auth-client'.
+ *
+ * Includes useSessionCompat() — returns a { data, status } shape so existing
+ * components written against the legacy hook don't need destructure changes.
+ */
+
+import { createAuthClient } from 'better-auth/react';
+import { magicLinkClient } from 'better-auth/client/plugins';
+import { useMemo } from 'react';
+
+export const authClient = createAuthClient({
+  // baseURL derived from BETTER_AUTH_URL or window.location.origin
+  plugins: [magicLinkClient()],
+});
+
+// Convenience exports
+export const { useSession, signIn, signOut } = authClient;
+
+
+/**
+ * NextAuth-compatible useSession wrapper.
+ *
+ * Maps Better Auth's { data, error, isPending } to NextAuth's { data, status, update }.
+ * Drop-in replacement — no destructure changes needed in consuming components.
+ */
+export function useSessionCompat() {
+  const baSession = authClient.useSession();
+
+  const status = useMemo(() => {
+    if (baSession.isPending) return 'loading' as const;
+    if (baSession.data) return 'authenticated' as const;
+    return 'unauthenticated' as const;
+  }, [baSession.isPending, baSession.data]);
+
+  // Map Better Auth session shape to NextAuth session shape
+  const data = useMemo(() => {
+    if (!baSession.data) return null;
+    return {
+      ...baSession.data,
+      user: baSession.data.user,
+      expires: '', // Better Auth handles expiry differently
+    };
+  }, [baSession.data]);
+
+  return {
+    data,
+    status,
+    update: async () => {
+      // Better Auth doesn't have a direct "refresh session" call.
+      // Force refetch by invalidating the query.
+      // TODO: Wire to proper session refresh when available.
+      return data;
+    },
+  };
+}
+
+/**
+ * NextAuth-compatible signOut wrapper.
+ *
+ * Maps NextAuth signOut({ redirect, callbackUrl }) to Better Auth.
+ */
+export async function signOutCompat(options?: { redirect?: boolean; callbackUrl?: string }) {
+  await authClient.signOut();
+  if (options?.redirect !== false && options?.callbackUrl) {
+    window.location.href = options.callbackUrl;
+  }
+}

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

@@ -1,48 +1,48 @@
-// 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;
+// 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;
 }