@payez/next-mvp 4.5.7 → 4.7.10

package/src/client/AuthContext.tsx

@@ -38,9 +38,15 @@ interface AuthProviderProps {
   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<{
@@ -66,6 +72,9 @@ export function AuthProvider({ children, config, useDynamicProviders = true }: A
     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' } };
@@ -75,7 +84,7 @@ export function AuthProvider({ children, config, useDynamicProviders = true }: A
         //
         // /api/auth/settings already serves the real answer (enabledProviders,
         // allowFederatedLogin, enablePasswordReset) and nothing consumed it.
-        const response = await fetch('/api/auth/settings');
+        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
@@ -98,6 +107,7 @@ export function AuthProvider({ children, config, useDynamicProviders = true }: A
           .map(id => PROVIDER_MAP[id])
           .filter((p): p is FederatedProvider => p !== undefined);
 
+        status = 'ready';
         setDynamicProviders(oauthProviders);
         setServerSettings({
           allowFederatedLogin: settings?.allowFederatedLogin !== false,
@@ -109,7 +119,9 @@ export function AuthProvider({ children, config, useDynamicProviders = true }: A
       } catch (err) {
         console.error('[AuthProvider] could not read /api/auth/settings:', err);
       } finally {
+        clearTimeout(timer);
         if (mounted) {
+          setSettingsStatus(status);
           setProvidersLoaded(true);
         }
       }
@@ -130,6 +142,7 @@ export function AuthProvider({ children, config, useDynamicProviders = true }: A
     ...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.

package/src/components/auth/CredentialSignInForm.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import React, { useState } from 'react';
+import { TraditionalAuthSection } from './TraditionalAuthSection';
+import { safeCallbackPath } from '../../auth/safe-callback';
+import { authorizeResumeHref } from '../../lib/authorize-resume';
+import { NO_CODE_REQUEST, codeStepInstruction, type CodeRequest } from '../../lib/code-step-copy';
+import {
+  credentialSignIn,
+  requestEmailCode,
+  validateCredentials,
+  type FetchLike,
+} from '../../lib/credential-sign-in-client';
+
+/**
+ * PAY-2302 cut 1b: the package's email + password (+ 2FA code) sign-in form.
+ *
+ * WHY IT EXISTS. The package's own Better Auth instance has no emailAndPassword, so the login page had no credential form
+ * (removed 2026-08-02, BAPert 17586: "restore this form together" with the backend that makes it work). This is that pair:
+ * the backend is routes/auth/credential-login (+ credential-login-email-code), which the app mounts at
+ * /api/auth/admin-login[/email-code]; this component drives it. Moved from the portal's AdminLoginCard (VibeID-Customer-Portal
+ * 3d654917), re-styled with the package's own TraditionalAuthSection instead of the portal's AuthCard chrome.
+ *
+ * MOUNT IT through the login page's slot, so nothing changes for a consumer that does not opt in:
+ *     <LoginPage altAuthSlot={<CredentialSignInForm />} />
+ * (An app that has not mounted the two routes must NOT mount this form: it would be the dead control 17586 removed.)
+ *
+ * Two steps, the IdP's own contract (an access token with no refresh token means a second factor is outstanding):
+ *   'credentials' - email + password
+ *   'code'        - the 2FA code; the door parks the provisional bearer in an httpOnly cookie, this step resubmits with the code.
+ *
+ * After success the browser goes to the callbackUrl, passed through safeCallbackPath (same-origin paths only); when the page
+ * carries ?return_url (an IdP authorize request) it goes to the app's /api/oauth/resume instead, which resumes that request.
+ */
+
+interface Props {
+  /** Where to go after sign-in. Default: the page's ?callbackUrl, else /dashboard. Always passed through safeCallbackPath. */
+  callbackUrl?: string;
+  /** Test seam: the fetch used for both doors. */
+  fetchImpl?: FetchLike;
+  /** Test seam: navigation after success. */
+  onSignedIn?: (destination: string) => void;
+  showForgotPassword?: boolean;
+}
+
+const inputStyle: React.CSSProperties = {
+  borderColor: 'var(--border-default, #e5e7eb)',
+  color: 'var(--text-primary, #111827)',
+  background: 'var(--bg-input, white)',
+};
+
+export function resolveDestination(explicit?: string): string {
+  let raw = explicit;
+  let returnUrl: string | null = null;
+  if (typeof window !== 'undefined') {
+    const params = new URLSearchParams(window.location.search);
+    if (raw === undefined) raw = params.get('callbackUrl') ?? undefined;
+    // PAY-2302 cut 2: an IdP that sent the user here mid-authorize (?return_url=<IdP authorize request>) must get the
+    // authorize request resumed after sign-in. The href points at the app's OWN /api/oauth/resume, which validates the
+    // URL against IDP_URL server-side; nothing absolute is navigated to from here, and the result is still guarded.
+    returnUrl = params.get('return_url');
+  }
+  return safeCallbackPath(authorizeResumeHref(returnUrl), safeCallbackPath(raw, '/dashboard'));
+}
+
+export function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showForgotPassword = false }: Props) {
+  const [step, setStep] = useState<'credentials' | 'code'>('credentials');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [code, setCode] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fieldError, setFieldError] = useState<string | null>(null);
+  const [codeRequest, setCodeRequest] = useState<CodeRequest>(NO_CODE_REQUEST);
+  const [offerEmailCode, setOfferEmailCode] = useState(false);
+  const [emailCodeMsg, setEmailCodeMsg] = useState<string | null>(null);
+
+  async function submit(withCode?: string) {
+    setBusy(true);
+    setError(null);
+    setOfferEmailCode(false);
+    try {
+      const r = await credentialSignIn({ email, password, code: withCode }, fetchImpl);
+      if (r.kind === 'success') {
+        const destination = resolveDestination(callbackUrl);
+        if (onSignedIn) onSignedIn(destination);
+        else window.location.href = destination;
+        return;
+      }
+      if (r.kind === 'two_factor') {
+        setCodeRequest(r.codeRequest);
+        setStep('code');
+        return;
+      }
+      setError(r.message);
+      if (r.kind === 'error') setOfferEmailCode(r.offerEmailCode);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function onCredentialsSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const invalid = validateCredentials(email, password);
+    if (invalid) {
+      setFieldError(invalid.email ?? invalid.password ?? null);
+      return;
+    }
+    setFieldError(null);
+    void submit();
+  }
+
+  function onCodeSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const trimmed = code.trim();
+    if (!trimmed) {
+      setFieldError('Enter your authentication code.');
+      return;
+    }
+    setFieldError(null);
+    void submit(trimmed);
+  }
+
+  function onBack() {
+    setStep('credentials');
+    setCodeRequest(NO_CODE_REQUEST);
+    setCode('');
+    setFieldError(null);
+    setError(null);
+    setOfferEmailCode(false);
+    setEmailCodeMsg(null);
+  }
+
+  async function askForEmailCode() {
+    setBusy(true);
+    setEmailCodeMsg(null);
+    try {
+      const r = await requestEmailCode(fetchImpl);
+      if (r.kind === 'requested') {
+        setCodeRequest(r.codeRequest);
+        setError(null);
+        setOfferEmailCode(false);
+        setEmailCodeMsg('We asked for a code to be emailed to you. Enter it above when it arrives.');
+      } else {
+        setEmailCodeMsg(r.message);
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const problem = fieldError ?? error;
+  const problemLine = problem && (
+    <p role="alert" data-testid="credential-sign-in-error" className="text-sm mt-3" style={{ color: 'var(--color-error, #ef4444)' }}>
+      {problem}
+    </p>
+  );
+
+  if (step === 'code') {
+    return (
+      <div data-testid="credential-sign-in-code-step" className="text-left">
+        <p className="text-sm mb-4" style={{ color: 'var(--text-primary, #111827)' }}>{codeStepInstruction(email, codeRequest)}</p>
+        <form onSubmit={onCodeSubmit} noValidate className="space-y-4">
+          <div>
+            <label htmlFor="credential-code" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary, #111827)' }}>
+              Authentication code
+            </label>
+            <input
+              id="credential-code"
+              name="code"
+              type="text"
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              required
+              placeholder="000000"
+              value={code}
+              disabled={busy}
+              onChange={(e) => {
+                setCode(e.target.value);
+                setFieldError(null);
+              }}
+              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+              style={inputStyle}
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={busy}
+            className="w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            style={{ background: 'var(--btn-primary-bg, #11B588)', color: 'var(--btn-primary-text, white)' }}
+          >
+            {busy ? 'Verifying…' : 'Verify'}
+          </button>
+        </form>
+        <button type="button" onClick={onBack} disabled={busy} className="text-sm underline mt-4" style={{ background: 'none', border: 'none', padding: 0, color: 'var(--text-muted, #6b7280)' }}>
+          Back
+        </button>
+        {problemLine}
+        {(offerEmailCode || emailCodeMsg) && (
+          <div data-testid="email-code-offer" className="mt-4">
+            {offerEmailCode && (
+              <button type="button" onClick={() => void askForEmailCode()} disabled={busy} className="text-sm font-semibold underline" style={{ background: 'none', border: 'none', padding: 0, color: 'var(--text-primary, #111827)' }}>
+                Email me a code instead
+              </button>
+            )}
+            {emailCodeMsg && (
+              <p role="status" data-testid="email-code-offer-msg" className="text-sm mt-2" style={{ color: 'var(--text-primary, #111827)' }}>
+                {emailCodeMsg}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="credential-sign-in" className="text-left">
+      <TraditionalAuthSection
+        email={email}
+        password={password}
+        onEmailChange={(v) => {
+          setEmail(v);
+          setFieldError(null);
+        }}
+        onPasswordChange={(v) => {
+          setPassword(v);
+          setFieldError(null);
+        }}
+        onSubmit={onCredentialsSubmit}
+        isLoading={busy}
+        buttonText="Sign in"
+        showForgotPassword={showForgotPassword}
+      />
+      {problemLine}
+    </div>
+  );
+}
+
+export default CredentialSignInForm;

package/src/components/auth/ModeAwareLoginPage.tsx

@@ -105,7 +105,27 @@ export function ModeAwareLoginPage({
           and rendered BOTH sections on the same condition - so a client configured with
           no sign-in method at all got the full form. Say so instead: a blank card leaves
           the user pressing nothing, and the operator with no idea what is wrong. */}
-      {!isFederated && !isTraditional && (
+      {!isFederated && !isTraditional && config.settingsStatus === 'loading' && (
+        <div role="status" className="px-4 py-3 rounded-lg text-sm text-left" style={{ color: 'var(--text-secondary, #6b7280)' }}>
+          <p>Loading sign-in options…</p>
+        </div>
+      )}
+
+      {!isFederated && !isTraditional && config.settingsStatus === 'failed' && (
+        <div
+          role="alert"
+          className="px-4 py-3 rounded-lg text-sm text-left"
+          style={{
+            border: '1px solid var(--border-default, #e5e7eb)',
+            color: 'var(--text-primary, #111827)',
+          }}
+        >
+          <p className="font-semibold">Could not load sign-in options.</p>
+          <p className="mt-1">Please reload the page. If it keeps happening, contact an administrator.</p>
+        </div>
+      )}
+
+      {!isFederated && !isTraditional && (config.settingsStatus ?? 'ready') === 'ready' && (
         <div
           role="alert"
           className="px-4 py-3 rounded-lg text-sm text-left"

package/src/components/auth/ModeAwareSignupPage.tsx

@@ -154,116 +154,46 @@ export function ModeAwareSignupPage({
         </form>
       )}
 
-      {/* Hybrid Mode - Show both */}
-      {isFederated === false && isTraditional === false && (
-        <>
-          <FederatedAuthSection
-            providers={config.providers}
-            onProviderClick={handleFederatedClick}
-            isLoading={totalLoading}
-          />
-
-          {config.providers.length > 0 && config.enableEmailSignup && (
-            <div className="relative my-6">
-              <div className="absolute inset-0 flex items-center">
-                <div
-                  className="w-full"
-                  style={{
-                    borderTop: '1px solid var(--border-default)',
-                  }}
-                ></div>
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span
-                  className="px-2"
-                  style={{
-                    background: 'var(--bg-card)',
-                    color: 'var(--text-secondary)',
-                  }}
-                >
-                  Or sign up with email
-                </span>
-              </div>
-            </div>
-          )}
-
-          {config.enableEmailSignup && (
-            <form onSubmit={handleTraditionalSubmit} className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                  Email Address
-                </label>
-                <input
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="you@example.com"
-                  disabled={totalLoading}
-                  required
-                  className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
-                  style={{
-                    border: '1px solid var(--border-default)',
-                    color: 'var(--text-primary)',
-                    background: 'var(--bg-default)',
-                  }}
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                  Password
-                </label>
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder="••••••••"
-                  disabled={totalLoading}
-                  required
-                  className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
-                  style={{
-                    border: '1px solid var(--border-default)',
-                    color: 'var(--text-primary)',
-                    background: 'var(--bg-default)',
-                  }}
-                />
-              </div>
+      {/* PAY-2334: same three states as the login page. Not answered yet -> neutral text; read failed -> say so;
+          only an ANSWERED "nothing offered" falls through to the branch below. */}
+      {!isFederated && !isTraditional && config.settingsStatus === 'loading' && (
+        <div role="status" className="px-4 py-3 rounded-lg text-sm text-left" style={{ color: 'var(--text-secondary, #6b7280)' }}>
+          <p>Loading sign-up options…</p>
+        </div>
+      )}
 
-              <div>
-                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-                  Confirm Password
-                </label>
-                <input
-                  type="password"
-                  value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
-                  placeholder="••••••••"
-                  disabled={totalLoading}
-                  required
-                  className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
-                  style={{
-                    border: '1px solid var(--border-default)',
-                    color: 'var(--text-primary)',
-                    background: 'var(--bg-default)',
-                  }}
-                />
-              </div>
+      {!isFederated && !isTraditional && config.settingsStatus === 'failed' && (
+        <div
+          role="alert"
+          className="px-4 py-3 rounded-lg text-sm text-left"
+          style={{
+            border: '1px solid var(--border-default, #e5e7eb)',
+            color: 'var(--text-primary, #111827)',
+          }}
+        >
+          <p className="font-semibold">Could not load sign-up options.</p>
+          <p className="mt-1">Please reload the page. If it keeps happening, contact an administrator.</p>
+        </div>
+      )}
 
-              <button
-                type="submit"
-                disabled={totalLoading}
-                className="w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors mt-6"
-                style={{
-                  border: '1px solid var(--border-default)',
-                  color: 'white',
-                  background: 'var(--color-primary, #10b981)',
-                }}
-              >
-                {totalLoading ? 'Creating Account...' : 'Create Account'}
-              </button>
-            </form>
-          )}
-        </>
+      {/* PAY-2341: ANSWERED, and nothing is offered. This branch used to be labelled "Hybrid Mode - Show both" and
+          rendered the federated section plus the email sign-up form on the same "neither" condition, so a client with no
+          sign-up method showed a working-looking form. Say so, as the login page does (ModeAwareLoginPage). */}
+      {!isFederated && !isTraditional && (config.settingsStatus ?? 'ready') === 'ready' && (
+        <div
+          role="alert"
+          className="px-4 py-3 rounded-lg text-sm text-left"
+          style={{
+            border: '1px solid var(--border-default, #e5e7eb)',
+            color: 'var(--text-primary, #111827)',
+          }}
+        >
+          <p className="font-semibold">Sign-up is not available for this application.</p>
+          <p className="mt-1">
+            No sign-up method is enabled for this client. An administrator needs to enable
+            a federated provider or username and password sign-in.
+          </p>
+        </div>
       )}
     </>
   );