@payez/next-mvp 4.7.9 → 4.7.10

package/dist/client/AuthContext.d.ts

@@ -9,6 +9,8 @@ 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 declare const SETTINGS_FETCH_TIMEOUT_MS = 10000;
 export declare function AuthProvider({ children, config, useDynamicProviders }: AuthProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useAuthConfig(): AuthConfig;
 export declare function useAuthMode(): AuthMode;

package/dist/client/AuthContext.js

@@ -1,6 +1,7 @@
 "use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SETTINGS_FETCH_TIMEOUT_MS = void 0;
 exports.AuthProvider = AuthProvider;
 exports.useAuthConfig = useAuthConfig;
 exports.useAuthMode = useAuthMode;
@@ -29,9 +30,14 @@ const PROVIDER_MAP = {
 };
 // OAuth providers we support in UI (excludes credentials)
 const OAUTH_PROVIDER_IDS = ['google', 'apple', 'facebook', 'github', 'azure-ad', 'microsoft-entra-id'];
+/** PAY-2334: how long /api/auth/settings may take before the sign-in card stops waiting and says it could not load. */
+exports.SETTINGS_FETCH_TIMEOUT_MS = 10000;
 function AuthProvider({ children, config, useDynamicProviders = true }) {
     const [dynamicProviders, setDynamicProviders] = (0, react_1.useState)([]);
     const [providersLoaded, setProvidersLoaded] = (0, react_1.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] = (0, react_1.useState)(useDynamicProviders ? 'loading' : 'ready');
     // What the IDP says this client offers. null until /api/auth/settings answers.
     const [serverSettings, setServerSettings] = (0, react_1.useState)(null);
     // Create QueryClient instance for React Query - used internally by MVP hooks
@@ -50,6 +56,9 @@ function AuthProvider({ children, config, useDynamicProviders = true }) {
             return;
         let mounted = true;
         async function fetchDynamicProviders() {
+            const controller = new AbortController();
+            const timer = setTimeout(() => controller.abort(), exports.SETTINGS_FETCH_TIMEOUT_MS);
+            let status = 'failed';
             try {
                 // READ THE IDP. This used to be a hardcoded literal:
                 //     const result = { google: { id: 'google', name: 'Google' } };
@@ -59,7 +68,7 @@ function AuthProvider({ children, config, useDynamicProviders = true }) {
                 //
                 // /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
@@ -79,6 +88,7 @@ function AuthProvider({ children, config, useDynamicProviders = true }) {
                     .filter(id => OAUTH_PROVIDER_IDS.includes(id))
                     .map(id => PROVIDER_MAP[id])
                     .filter((p) => p !== undefined);
+                status = 'ready';
                 setDynamicProviders(oauthProviders);
                 setServerSettings({
                     allowFederatedLogin: settings?.allowFederatedLogin !== false,
@@ -92,7 +102,9 @@ function AuthProvider({ children, config, useDynamicProviders = true }) {
                 console.error('[AuthProvider] could not read /api/auth/settings:', err);
             }
             finally {
+                clearTimeout(timer);
                 if (mounted) {
+                    setSettingsStatus(status);
                     setProvidersLoaded(true);
                 }
             }
@@ -110,6 +122,7 @@ function AuthProvider({ children, config, useDynamicProviders = true }) {
         ...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/dist/components/auth/ModeAwareLoginPage.js

@@ -37,7 +37,10 @@ function ModeAwareLoginPage({ onFederatedSignIn, onTraditionalSignIn, onForgotPa
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [error && ((0, jsx_runtime_1.jsx)("div", { className: "mb-6 px-4 py-3 rounded-lg", style: {
                     background: 'var(--color-error, #ef4444)',
                     color: 'white',
-                }, children: error })), isFederated && ((0, jsx_runtime_1.jsx)(FederatedAuthSection_1.FederatedAuthSection, { providers: config.providers, onProviderClick: handleFederatedClick, isLoading: totalLoading })), isFederated && isTraditional && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 my-6", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("span", { className: "h-px flex-1", style: { background: 'var(--border-default, #e5e7eb)' } }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs uppercase tracking-wide", style: { color: 'var(--text-muted, #6b7280)' }, children: "or" }), (0, jsx_runtime_1.jsx)("span", { className: "h-px flex-1", style: { background: 'var(--border-default, #e5e7eb)' } })] })), isTraditional && ((0, jsx_runtime_1.jsx)(TraditionalAuthSection_1.TraditionalAuthSection, { email: email, password: password, onEmailChange: setEmail, onPasswordChange: setPassword, onSubmit: handleTraditionalSubmit, isLoading: totalLoading, buttonText: "Sign In", showForgotPassword: config.enableRecovery, onForgotPassword: onForgotPassword })), !isFederated && !isTraditional && ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: "px-4 py-3 rounded-lg text-sm text-left", style: {
+                }, children: error })), isFederated && ((0, jsx_runtime_1.jsx)(FederatedAuthSection_1.FederatedAuthSection, { providers: config.providers, onProviderClick: handleFederatedClick, isLoading: totalLoading })), isFederated && isTraditional && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 my-6", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("span", { className: "h-px flex-1", style: { background: 'var(--border-default, #e5e7eb)' } }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs uppercase tracking-wide", style: { color: 'var(--text-muted, #6b7280)' }, children: "or" }), (0, jsx_runtime_1.jsx)("span", { className: "h-px flex-1", style: { background: 'var(--border-default, #e5e7eb)' } })] })), isTraditional && ((0, jsx_runtime_1.jsx)(TraditionalAuthSection_1.TraditionalAuthSection, { email: email, password: password, onEmailChange: setEmail, onPasswordChange: setPassword, onSubmit: handleTraditionalSubmit, isLoading: totalLoading, buttonText: "Sign In", showForgotPassword: config.enableRecovery, onForgotPassword: onForgotPassword })), !isFederated && !isTraditional && config.settingsStatus === 'loading' && ((0, jsx_runtime_1.jsx)("div", { role: "status", className: "px-4 py-3 rounded-lg text-sm text-left", style: { color: 'var(--text-secondary, #6b7280)' }, children: (0, jsx_runtime_1.jsx)("p", { children: "Loading sign-in options\u2026" }) })), !isFederated && !isTraditional && config.settingsStatus === 'failed' && ((0, jsx_runtime_1.jsxs)("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)',
+                }, children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold", children: "Could not load sign-in options." }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1", children: "Please reload the page. If it keeps happening, contact an administrator." })] })), !isFederated && !isTraditional && (config.settingsStatus ?? 'ready') === 'ready' && ((0, jsx_runtime_1.jsxs)("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)',
                 }, children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold", children: "Sign-in is not available for this application." }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1", children: "No sign-in method is enabled for this client. An administrator needs to enable a federated provider or username and password sign-in." })] }))] }));

package/dist/components/auth/ModeAwareSignupPage.js

@@ -56,26 +56,11 @@ function ModeAwareSignupPage({ onFederatedSignUp, onTraditionalSignUp, isLoading
                             border: '1px solid var(--border-default)',
                             color: 'white',
                             background: 'var(--color-primary, #10b981)',
-                        }, children: totalLoading ? 'Creating Account...' : 'Create Account' })] })), isFederated === false && isTraditional === false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FederatedAuthSection_1.FederatedAuthSection, { providers: config.providers, onProviderClick: handleFederatedClick, isLoading: totalLoading }), config.providers.length > 0 && config.enableEmailSignup && ((0, jsx_runtime_1.jsxs)("div", { className: "relative my-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center", children: (0, jsx_runtime_1.jsx)("div", { className: "w-full", style: {
-                                        borderTop: '1px solid var(--border-default)',
-                                    } }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex justify-center text-sm", children: (0, jsx_runtime_1.jsx)("span", { className: "px-2", style: {
-                                        background: 'var(--bg-card)',
-                                        color: 'var(--text-secondary)',
-                                    }, children: "Or sign up with email" }) })] })), config.enableEmailSignup && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleTraditionalSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary)' }, children: "Email Address" }), (0, jsx_runtime_1.jsx)("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com", disabled: totalLoading, required: true, 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)',
-                                        } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary)' }, children: "Password" }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", disabled: totalLoading, required: true, 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)',
-                                        } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary)' }, children: "Confirm Password" }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", disabled: totalLoading, required: true, 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)',
-                                        } })] }), (0, jsx_runtime_1.jsx)("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)',
-                                }, children: totalLoading ? 'Creating Account...' : 'Create Account' })] }))] }))] }));
+                        }, children: totalLoading ? 'Creating Account...' : 'Create Account' })] })), !isFederated && !isTraditional && config.settingsStatus === 'loading' && ((0, jsx_runtime_1.jsx)("div", { role: "status", className: "px-4 py-3 rounded-lg text-sm text-left", style: { color: 'var(--text-secondary, #6b7280)' }, children: (0, jsx_runtime_1.jsx)("p", { children: "Loading sign-up options\u2026" }) })), !isFederated && !isTraditional && config.settingsStatus === 'failed' && ((0, jsx_runtime_1.jsxs)("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)',
+                }, children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold", children: "Could not load sign-up options." }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1", children: "Please reload the page. If it keeps happening, contact an administrator." })] })), !isFederated && !isTraditional && (config.settingsStatus ?? 'ready') === 'ready' && ((0, jsx_runtime_1.jsxs)("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)',
+                }, children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold", children: "Sign-up is not available for this application." }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1", children: "No sign-up method is enabled for this client. An administrator needs to enable a federated provider or username and password sign-in." })] }))] }));
 }

package/dist/types/auth.d.ts

@@ -21,6 +21,12 @@ export interface AuthConfig {
      * An OAuth-only client is a deliberate choice, never the default.
      */
     allowTraditionalLogin?: boolean;
+    /**
+     * PAY-2334: where /api/auth/settings stands. 'loading' = not answered yet, 'ready' = answered (or nothing to ask:
+     * useDynamicProviders off), 'failed' = non-2xx, thrown, or timed out. Absent means 'ready'. A page must not tell the user
+     * "sign-in is not available" while this is 'loading', and must say a failed read is a failed read, not an empty answer.
+     */
+    settingsStatus?: 'loading' | 'ready' | 'failed';
     providers: FederatedProvider[];
     enableRecovery: boolean;
     enableEmailSignup: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payez/next-mvp",
-  "version": "4.7.9",
+  "version": "4.7.10",
   "sideEffects": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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/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>
       )}
     </>
   );

package/src/types/auth.ts

@@ -25,6 +25,12 @@ export interface AuthConfig {
    * An OAuth-only client is a deliberate choice, never the default.
    */
   allowTraditionalLogin?: boolean;
+  /**
+   * PAY-2334: where /api/auth/settings stands. 'loading' = not answered yet, 'ready' = answered (or nothing to ask:
+   * useDynamicProviders off), 'failed' = non-2xx, thrown, or timed out. Absent means 'ready'. A page must not tell the user
+   * "sign-in is not available" while this is 'loading', and must say a failed read is a failed read, not an empty answer.
+   */
+  settingsStatus?: 'loading' | 'ready' | 'failed';
   providers: FederatedProvider[];
   enableRecovery: boolean;
   enableEmailSignup: boolean;