@payez/next-mvp 4.8.1 → 4.8.3

package/src/pages/login/page.tsx

@@ -1,338 +1,338 @@
-/**
- * Themed Login Page for @payez/next-mvp
- *
- * DEPENDENCIES: Only React, Next.js, next-auth, and Tailwind CSS
- * NO shadcn/ui or other UI library required!
- *
- * FEATURES:
- * ✅ Atomic state management with visual feedback (submitting/error/success)
- * ✅ Enhanced error handling with user-friendly messages
- * ✅ Show/hide password toggle
- * ✅ Loading state management with timeouts
- * ✅ Proper autofill styling
- * ✅ Session expiration handling
- * ✅ Themeable styling via ThemeProvider
- * ✅ Placeholder for health check component
- *
- * USAGE:
- * 1. Import from @payez/next-mvp/pages/login
- * 2. Wrap your app with ThemeProvider to customize branding
- * 3. Optionally add your health check component
- */
-
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { authClient } from '../../client/better-auth-client';
-import { useSearchParams } from 'next/navigation';
-import { Suspense } from 'react';
-import ReservedStatusBox from '../../components/reserved/ReservedStatusBox';
-import ReservedRecoveryWarning from '../../components/reserved/ReservedRecoveryWarning';
-import { useBranding, useColors, useLayout } from '../../theme/useTheme';
-import { friendlyLoginError, oauthFailureMessage } from '../../lib/login-error-message';
-
-function LoginForm({ altAuthSlot }: { altAuthSlot?: React.ReactNode }) {
-  const searchParams = useSearchParams();
-  const callbackUrl = searchParams?.get('callbackUrl') || '/dashboard';
-  const urlError = searchParams?.get('error');
-  // Better Auth mount redirects OAuth failures here as ?oauth_error={provider}
-  // (the failure-signal guard from the merge spec). Distinct from `error`.
-  const oauthError = searchParams?.get('oauth_error');
-
-  const { data: sessionData, isPending } = authClient.useSession();
-  const session = sessionData;
-  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
-  const branding = useBranding();
-  const colors = useColors();
-  const layout = useLayout();
-
-  // Social sign-in. The button renders ONLY when the IDP client config has an
-  // enabled provider row — discovered from the public settings route (the same
-  // config the Better Auth engine builds providers from), never assumed.
-  // Absent row / fetch failure = no button. Fail quiet is correct here.
-  const [googleEnabled, setGoogleEnabled] = useState(false);
-  const [googleLoading, setGoogleLoading] = useState(false);
-
-  useEffect(() => {
-    let mounted = true;
-    fetch('/api/auth/settings', { cache: 'no-store' })
-      .then((r) => (r.ok ? r.json() : null))
-      .then((json) => {
-        if (!mounted || !json) return;
-        const providers: unknown = json?.data?.enabledProviders;
-        if (Array.isArray(providers) && providers.some((p) => typeof p === 'string' && p.toLowerCase() === 'google')) {
-          setGoogleEnabled(true);
-        }
-      })
-      .catch(() => undefined); // fail quiet: no button
-    return () => { mounted = false; };
-  }, []);
-
-  const handleGoogleSignIn = async () => {
-    setGoogleLoading(true);
-    setLoginError(null);
-    try {
-      // Pre-clean any stale session so account-switch works (idealvibe
-      // account-auth/login idiom: signOut before signIn.social).
-      await authClient.signOut().catch(() => undefined);
-      // The package's OWN SDK, not a raw fetch — Jon's ruling (QA 17400 /
-      // BAPert 17401): the page is the template consumers copy, so it teaches
-      // the same one-line idiom idealvibe uses (49cc95f, four call sites).
-      // The SDK hits POST /api/auth/sign-in/social itself, with its own
-      // credentials mode, baseURL and error contract, and navigates on the
-      // returned authorize URL.
-      await authClient.signIn.social({
-        provider: 'google',
-        // The social round trip lands on '/', not the form's /dashboard
-        // default: the post-callback session upgrade decides the destination.
-        callbackURL: searchParams?.get('callbackUrl') || '/',
-      });
-    } catch {
-      setGoogleLoading(false);
-      setLoginError('Google sign-in is unavailable right now. Please try again.');
-    }
-  };
-
-  // Helper to create lighter/darker shades for hover states
-  const adjustBrightness = (hex: string, percent: number) => {
-    const num = parseInt(hex.replace('#', ''), 16);
-    const amt = Math.round(2.55 * percent);
-    const R = (num >> 16) + amt;
-    const G = (num >> 8 & 0x00FF) + amt;
-    const B = (num & 0x0000FF) + amt;
-    return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
-      (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
-      (B < 255 ? B < 1 ? 0 : B : 255))
-      .toString(16).slice(1);
-  };
-
-  // Get the primary button color from theme (defaults to primary, or uses component override)
-  const buttonColor = colors.secondary || colors.primary || '#3b82f6';
-  const buttonHoverColor = adjustBrightness(buttonColor, -10);
-
-  // Form fields
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-
-  // Atomic state management - only ONE can be true at a time
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [loginSuccess, setLoginSuccess] = useState(false);
-  // undefined = the user has not acted yet (show what the URL says); null/string = an explicit state set by a handler below.
-  const [loginError, setLoginError] = useState<string | null | undefined>(undefined);
-  const [loading, setLoading] = useState(false);
-  const [showRecoveryOptions, setShowRecoveryOptions] = useState(false);
-
-  // Force show form after timeout if stuck in loading
-  const [forceShowForm, setForceShowForm] = useState(false);
-
-  // PAY-2319 (4.7.2): what the URL says, derived at render (no effect) so it is shown on the FIRST paint and in a static render.
-  // 4.7.1 mapped these in effects that only set loginError, which was never rendered. Unknown codes are NOT echoed (see lib/login-error-message).
-  const urlMessage = oauthFailureMessage(oauthError) ?? friendlyLoginError(urlError);
-  const shownError: string | null = loginError !== undefined ? loginError : urlMessage;
-  useEffect(() => {
-    if (urlError === 'SessionExpired') console.log('[LOGIN] SessionExpired detected - normal behavior');
-  }, [urlError]);
-
-  // Timeout to prevent infinite loading states
-  useEffect(() => {
-    if (status === 'loading') {
-      const timeout = setTimeout(() => {
-        console.warn('[LOGIN] NextAuth status stuck in loading, forcing form display');
-        setForceShowForm(true);
-      }, 3000);
-      return () => clearTimeout(timeout);
-    }
-  }, [status]);
-
-  // Force show form after 1 second if no session
-  useEffect(() => {
-    const immediateTimeout = setTimeout(() => {
-      if (status === 'loading' && !session) {
-        console.log('[LOGIN] Force showing form after 1 second');
-        setForceShowForm(true);
-      }
-    }, 1000);
-    return () => clearTimeout(immediateTimeout);
-  }, [status, session]);
-
-  // handleSubmit REMOVED with the email/password form it served: it called
-  // authClient.signIn.email, which better-auth always rejected because this
-  // package never configures emailAndPassword. See the note at the render site.
-
-  // Show loading spinner for initial loads
-  if (!forceShowForm && !shownError && (loading || (status === 'loading' && !session))) {
-    return (
-      <div className={`flex flex-col items-center justify-center min-h-screen ${colors.background}`}>
-        <svg className="animate-spin h-6 w-6" style={{ color: buttonColor }} viewBox="0 0 24 24" fill="none">
-          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
-        </svg>
-        <p className={`mt-4 text-sm ${colors.muted}`}>
-          {status === 'loading' ? 'Loading...' : 'Authenticating...'}
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {/* Dynamic styles for theme colors */}
-      <style dangerouslySetInnerHTML={{__html: `
-        .themed-input:focus {
-          outline: none;
-          border-color: ${buttonColor} !important;
-          box-shadow: 0 0 0 2px ${buttonColor}40 !important;
-        }
-        .themed-button {
-          background-color: ${buttonColor} !important;
-        }
-        .themed-button:hover:not(:disabled) {
-          background-color: ${buttonHoverColor} !important;
-        }
-        .themed-link {
-          color: ${buttonColor} !important;
-        }
-        .themed-link:hover {
-          color: ${buttonHoverColor} !important;
-        }
-        .themed-status-submitting {
-          background-color: ${buttonColor}1A !important;
-          border-color: ${buttonColor}33 !important;
-        }
-        .themed-status-submitting-text {
-          color: ${buttonColor} !important;
-        }
-        .themed-status-submitting svg {
-          color: ${buttonColor} !important;
-        }
-      `}} />
-      <div className={`min-h-screen flex items-center justify-center px-4 ${colors.background}`}>
-        <div className="max-w-md w-full">
-        {/* Card */}
-        <div className={`rounded-2xl shadow-xl p-8 ${colors.card} ${colors.border} text-gray-800`}>
-          {/* Header */}
-          <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold mb-2" style={{ color: 'inherit' }}>
-              {branding.tagline || 'Welcome Back'}
-            </h1>
-            <p className={colors.muted}>
-              Sign in to your account
-            </p>
-          </div>
-
-          {/* PAY-2319 (4.7.2): the error sentence. 4.7.1 set loginError but never rendered it. */}
-          {shownError && (
-            <div
-              role="alert"
-              data-testid="login-error"
-              className="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
-            >
-              {shownError}
-            </div>
-          )}
-
-          {/* Social sign-in — rendered ONLY from the IDP client config's
-              enabled providers (see the /api/auth/settings discovery above).
-              Above the form, divider idiom per the package's ModeAwareLoginPage. */}
-          {googleEnabled && (
-            <>
-              <button
-                type="button"
-                onClick={() => void handleGoogleSignIn()}
-                disabled={googleLoading || isSubmitting}
-                data-testid="google-sign-in"
-                className="w-full px-4 py-3 mb-6 rounded-lg border border-gray-300 font-semibold transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
-                style={{ backgroundColor: 'white', color: '#1f2937' }}
-              >
-                {googleLoading ? (
-                  <svg className="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
-                  </svg>
-                ) : (
-                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
-                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
-                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
-                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
-                  </svg>
-                )}
-                {googleLoading ? 'Redirecting to Google…' : 'Continue with Google'}
-              </button>
-            </>
-          )}
-
-          {/* EMAIL/PASSWORD FORM REMOVED — the package has NEVER implemented it.
-              `emailAndPassword` appears ZERO times in src/ and dist/: better-auth.ts
-              configures socialProviders only, so authClient.signIn.email always
-              returned "Email and password is not enabled". The form was a dead
-              control on the first screen of every consumer, and no consumer could
-              enable it without forking. Removed 2026-08-02 (Jon via BAPert 17586).
-              To ADD password auth later: set emailAndPassword in better-auth.ts and
-              restore this form together — one without the other is what created this. */}
-
-          {/* ALTERNATE SIGN-IN SLOT — the "B2 slot" (card 169071).
-              ─────────────────────────────────────────────────────────────
-              Consumers with an extra sign-in route (today: passkey) rendered
-              it AFTER <LoginPage/> as a sibling, which put the control BELOW
-              THE FOLD, because this page owns `min-h-screen` centering. The
-              graft's own comment called that "knowingly ugly and knowingly
-              temporary" and named the fix: give LoginPage a slot.
-
-              It sits here — after the social row, before the footer links —
-              so an alternate method reads as a peer of "Continue with
-              Google" rather than as an afterthought below the card.
-
-              A SLOT, not a passkey prop: this page must not know what a
-              passkey is. The consumer owns the control and its ceremony;
-              the package owns only where it goes. */}
-          {altAuthSlot && <div className="mt-4">{altAuthSlot}</div>}
-
-          {/* Footer Links */}
-          <div className={`mt-6 text-center text-sm ${colors.muted}`}>
-            <a href="/account-auth/recovery" className="themed-link hover:underline">
-              Start account recovery
-            </a>
-          </div>
-        </div>
-
-        {/* PAY-2121: the kit ships no sign-up PAGE (registration is the owner-initiated
-            invite/onboarding flow, not a self-serve screen), so the old "Sign up" link to
-            the register path was a dead end - it 404'd at the developer's site. Removed;
-            the README says how registration is reached. */}
-      </div>
-    </div>
-    </>
-  );
-}
-
-function LoginPageFallback() {
-  const colors = useColors();
-  const buttonColor = colors.secondary || colors.primary || '#11B588';
-  return (
-    <div className={`min-h-screen flex items-center justify-center ${colors.background}`}>
-      <div className="text-center">
-        <svg className="animate-spin h-10 w-10 mx-auto" style={{ color: buttonColor }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
-        <p className={`mt-4 ${colors.muted}`}>Loading...</p>
-      </div>
-    </div>
-  );
-}
-
-/**
- * @param altAuthSlot an additional sign-in control (e.g. a passkey link)
- *   rendered INSIDE the card, after the social row. Optional: omitting it
- *   leaves the page byte-identical to before, so existing consumers are
- *   unaffected.
- */
-export default function LoginPage({ altAuthSlot }: { altAuthSlot?: React.ReactNode } = {}) {
-  return (
-    <Suspense fallback={<LoginPageFallback />}>
-      <LoginForm altAuthSlot={altAuthSlot} />
-    </Suspense>
-  );
-}
+/**
+ * Themed Login Page for @payez/next-mvp
+ *
+ * DEPENDENCIES: Only React, Next.js, next-auth, and Tailwind CSS
+ * NO shadcn/ui or other UI library required!
+ *
+ * FEATURES:
+ * ✅ Atomic state management with visual feedback (submitting/error/success)
+ * ✅ Enhanced error handling with user-friendly messages
+ * ✅ Show/hide password toggle
+ * ✅ Loading state management with timeouts
+ * ✅ Proper autofill styling
+ * ✅ Session expiration handling
+ * ✅ Themeable styling via ThemeProvider
+ * ✅ Placeholder for health check component
+ *
+ * USAGE:
+ * 1. Import from @payez/next-mvp/pages/login
+ * 2. Wrap your app with ThemeProvider to customize branding
+ * 3. Optionally add your health check component
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { authClient } from '../../client/better-auth-client';
+import { useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
+import ReservedStatusBox from '../../components/reserved/ReservedStatusBox';
+import ReservedRecoveryWarning from '../../components/reserved/ReservedRecoveryWarning';
+import { useBranding, useColors, useLayout } from '../../theme/useTheme';
+import { friendlyLoginError, oauthFailureMessage } from '../../lib/login-error-message';
+
+function LoginForm({ altAuthSlot }: { altAuthSlot?: React.ReactNode }) {
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams?.get('callbackUrl') || '/dashboard';
+  const urlError = searchParams?.get('error');
+  // Better Auth mount redirects OAuth failures here as ?oauth_error={provider}
+  // (the failure-signal guard from the merge spec). Distinct from `error`.
+  const oauthError = searchParams?.get('oauth_error');
+
+  const { data: sessionData, isPending } = authClient.useSession();
+  const session = sessionData;
+  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
+  const branding = useBranding();
+  const colors = useColors();
+  const layout = useLayout();
+
+  // Social sign-in. The button renders ONLY when the IDP client config has an
+  // enabled provider row — discovered from the public settings route (the same
+  // config the Better Auth engine builds providers from), never assumed.
+  // Absent row / fetch failure = no button. Fail quiet is correct here.
+  const [googleEnabled, setGoogleEnabled] = useState(false);
+  const [googleLoading, setGoogleLoading] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+    fetch('/api/auth/settings', { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((json) => {
+        if (!mounted || !json) return;
+        const providers: unknown = json?.data?.enabledProviders;
+        if (Array.isArray(providers) && providers.some((p) => typeof p === 'string' && p.toLowerCase() === 'google')) {
+          setGoogleEnabled(true);
+        }
+      })
+      .catch(() => undefined); // fail quiet: no button
+    return () => { mounted = false; };
+  }, []);
+
+  const handleGoogleSignIn = async () => {
+    setGoogleLoading(true);
+    setLoginError(null);
+    try {
+      // Pre-clean any stale session so account-switch works (idealvibe
+      // account-auth/login idiom: signOut before signIn.social).
+      await authClient.signOut().catch(() => undefined);
+      // The package's OWN SDK, not a raw fetch — Jon's ruling (QA 17400 /
+      // BAPert 17401): the page is the template consumers copy, so it teaches
+      // the same one-line idiom idealvibe uses (49cc95f, four call sites).
+      // The SDK hits POST /api/auth/sign-in/social itself, with its own
+      // credentials mode, baseURL and error contract, and navigates on the
+      // returned authorize URL.
+      await authClient.signIn.social({
+        provider: 'google',
+        // The social round trip lands on '/', not the form's /dashboard
+        // default: the post-callback session upgrade decides the destination.
+        callbackURL: searchParams?.get('callbackUrl') || '/',
+      });
+    } catch {
+      setGoogleLoading(false);
+      setLoginError('Google sign-in is unavailable right now. Please try again.');
+    }
+  };
+
+  // Helper to create lighter/darker shades for hover states
+  const adjustBrightness = (hex: string, percent: number) => {
+    const num = parseInt(hex.replace('#', ''), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = (num >> 16) + amt;
+    const G = (num >> 8 & 0x00FF) + amt;
+    const B = (num & 0x0000FF) + amt;
+    return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+      (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+      (B < 255 ? B < 1 ? 0 : B : 255))
+      .toString(16).slice(1);
+  };
+
+  // Get the primary button color from theme (defaults to primary, or uses component override)
+  const buttonColor = colors.secondary || colors.primary || '#3b82f6';
+  const buttonHoverColor = adjustBrightness(buttonColor, -10);
+
+  // Form fields
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+
+  // Atomic state management - only ONE can be true at a time
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [loginSuccess, setLoginSuccess] = useState(false);
+  // undefined = the user has not acted yet (show what the URL says); null/string = an explicit state set by a handler below.
+  const [loginError, setLoginError] = useState<string | null | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+  const [showRecoveryOptions, setShowRecoveryOptions] = useState(false);
+
+  // Force show form after timeout if stuck in loading
+  const [forceShowForm, setForceShowForm] = useState(false);
+
+  // PAY-2319 (4.7.2): what the URL says, derived at render (no effect) so it is shown on the FIRST paint and in a static render.
+  // 4.7.1 mapped these in effects that only set loginError, which was never rendered. Unknown codes are NOT echoed (see lib/login-error-message).
+  const urlMessage = oauthFailureMessage(oauthError) ?? friendlyLoginError(urlError);
+  const shownError: string | null = loginError !== undefined ? loginError : urlMessage;
+  useEffect(() => {
+    if (urlError === 'SessionExpired') console.log('[LOGIN] SessionExpired detected - normal behavior');
+  }, [urlError]);
+
+  // Timeout to prevent infinite loading states
+  useEffect(() => {
+    if (status === 'loading') {
+      const timeout = setTimeout(() => {
+        console.warn('[LOGIN] NextAuth status stuck in loading, forcing form display');
+        setForceShowForm(true);
+      }, 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [status]);
+
+  // Force show form after 1 second if no session
+  useEffect(() => {
+    const immediateTimeout = setTimeout(() => {
+      if (status === 'loading' && !session) {
+        console.log('[LOGIN] Force showing form after 1 second');
+        setForceShowForm(true);
+      }
+    }, 1000);
+    return () => clearTimeout(immediateTimeout);
+  }, [status, session]);
+
+  // handleSubmit REMOVED with the email/password form it served: it called
+  // authClient.signIn.email, which better-auth always rejected because this
+  // package never configures emailAndPassword. See the note at the render site.
+
+  // Show loading spinner for initial loads
+  if (!forceShowForm && !shownError && (loading || (status === 'loading' && !session))) {
+    return (
+      <div className={`flex flex-col items-center justify-center min-h-screen ${colors.background}`}>
+        <svg className="animate-spin h-6 w-6" style={{ color: buttonColor }} viewBox="0 0 24 24" fill="none">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+        </svg>
+        <p className={`mt-4 text-sm ${colors.muted}`}>
+          {status === 'loading' ? 'Loading...' : 'Authenticating...'}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* Dynamic styles for theme colors */}
+      <style dangerouslySetInnerHTML={{__html: `
+        .themed-input:focus {
+          outline: none;
+          border-color: ${buttonColor} !important;
+          box-shadow: 0 0 0 2px ${buttonColor}40 !important;
+        }
+        .themed-button {
+          background-color: ${buttonColor} !important;
+        }
+        .themed-button:hover:not(:disabled) {
+          background-color: ${buttonHoverColor} !important;
+        }
+        .themed-link {
+          color: ${buttonColor} !important;
+        }
+        .themed-link:hover {
+          color: ${buttonHoverColor} !important;
+        }
+        .themed-status-submitting {
+          background-color: ${buttonColor}1A !important;
+          border-color: ${buttonColor}33 !important;
+        }
+        .themed-status-submitting-text {
+          color: ${buttonColor} !important;
+        }
+        .themed-status-submitting svg {
+          color: ${buttonColor} !important;
+        }
+      `}} />
+      <div className={`min-h-screen flex items-center justify-center px-4 ${colors.background}`}>
+        <div className="max-w-md w-full">
+        {/* Card */}
+        <div className={`rounded-2xl shadow-xl p-8 ${colors.card} ${colors.border} text-gray-800`}>
+          {/* Header */}
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-bold mb-2" style={{ color: 'inherit' }}>
+              {branding.tagline || 'Welcome Back'}
+            </h1>
+            <p className={colors.muted}>
+              Sign in to your account
+            </p>
+          </div>
+
+          {/* PAY-2319 (4.7.2): the error sentence. 4.7.1 set loginError but never rendered it. */}
+          {shownError && (
+            <div
+              role="alert"
+              data-testid="login-error"
+              className="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
+            >
+              {shownError}
+            </div>
+          )}
+
+          {/* Social sign-in — rendered ONLY from the IDP client config's
+              enabled providers (see the /api/auth/settings discovery above).
+              Above the form, divider idiom per the package's ModeAwareLoginPage. */}
+          {googleEnabled && (
+            <>
+              <button
+                type="button"
+                onClick={() => void handleGoogleSignIn()}
+                disabled={googleLoading || isSubmitting}
+                data-testid="google-sign-in"
+                className="w-full px-4 py-3 mb-6 rounded-lg border border-gray-300 font-semibold transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                style={{ backgroundColor: 'white', color: '#1f2937' }}
+              >
+                {googleLoading ? (
+                  <svg className="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                ) : (
+                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+                  </svg>
+                )}
+                {googleLoading ? 'Redirecting to Google…' : 'Continue with Google'}
+              </button>
+            </>
+          )}
+
+          {/* EMAIL/PASSWORD FORM REMOVED — the package has NEVER implemented it.
+              `emailAndPassword` appears ZERO times in src/ and dist/: better-auth.ts
+              configures socialProviders only, so authClient.signIn.email always
+              returned "Email and password is not enabled". The form was a dead
+              control on the first screen of every consumer, and no consumer could
+              enable it without forking. Removed 2026-08-02 (Jon via BAPert 17586).
+              To ADD password auth later: set emailAndPassword in better-auth.ts and
+              restore this form together — one without the other is what created this. */}
+
+          {/* ALTERNATE SIGN-IN SLOT — the "B2 slot" (card 169071).
+              ─────────────────────────────────────────────────────────────
+              Consumers with an extra sign-in route (today: passkey) rendered
+              it AFTER <LoginPage/> as a sibling, which put the control BELOW
+              THE FOLD, because this page owns `min-h-screen` centering. The
+              graft's own comment called that "knowingly ugly and knowingly
+              temporary" and named the fix: give LoginPage a slot.
+
+              It sits here — after the social row, before the footer links —
+              so an alternate method reads as a peer of "Continue with
+              Google" rather than as an afterthought below the card.
+
+              A SLOT, not a passkey prop: this page must not know what a
+              passkey is. The consumer owns the control and its ceremony;
+              the package owns only where it goes. */}
+          {altAuthSlot && <div className="mt-4">{altAuthSlot}</div>}
+
+          {/* Footer Links */}
+          <div className={`mt-6 text-center text-sm ${colors.muted}`}>
+            <a href="/account-auth/recovery" className="themed-link hover:underline">
+              Start account recovery
+            </a>
+          </div>
+        </div>
+
+        {/* PAY-2121: the kit ships no sign-up PAGE (registration is the owner-initiated
+            invite/onboarding flow, not a self-serve screen), so the old "Sign up" link to
+            the register path was a dead end - it 404'd at the developer's site. Removed;
+            the README says how registration is reached. */}
+      </div>
+    </div>
+    </>
+  );
+}
+
+function LoginPageFallback() {
+  const colors = useColors();
+  const buttonColor = colors.secondary || colors.primary || '#11B588';
+  return (
+    <div className={`min-h-screen flex items-center justify-center ${colors.background}`}>
+      <div className="text-center">
+        <svg className="animate-spin h-10 w-10 mx-auto" style={{ color: buttonColor }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <p className={`mt-4 ${colors.muted}`}>Loading...</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * @param altAuthSlot an additional sign-in control (e.g. a passkey link)
+ *   rendered INSIDE the card, after the social row. Optional: omitting it
+ *   leaves the page byte-identical to before, so existing consumers are
+ *   unaffected.
+ */
+export default function LoginPage({ altAuthSlot }: { altAuthSlot?: React.ReactNode } = {}) {
+  return (
+    <Suspense fallback={<LoginPageFallback />}>
+      <LoginForm altAuthSlot={altAuthSlot} />
+    </Suspense>
+  );
+}