@dloizides/auth-web 1.12.0 → 1.12.1

package/CHANGELOG.md

@@ -1,6 +1,29 @@
 # Changelog
 
-## 1.12.0 (2026-07-17)
+## 1.12.1 (2026-07-17)
+
+Internal refactor only — **no API change, no behaviour change**. The public
+export surface (`src/index.ts`) is byte-identical to 1.12.0; every consumer
+(zygos, katalogos, erevna, kefi, ichnos) keeps importing the same symbols with
+the same types from the same entry point.
+
+Two oversized source files from the demo-credential work were split to satisfy
+the repo size limits (files < 300 lines, components < 200):
+
+- **`src/components/labels.ts` (511 lines) → `src/components/labels/`.** The
+  single label bag is now one file per component family (`loginLabels.ts`,
+  `forgotPasswordLabels.ts`, `otpLabels.ts`, `pinLabels.ts`, `devicePinLabels.ts`,
+  `passkeyLabels.ts`, `preferredMethodLabels.ts`, `demoLabels.ts`,
+  `resetPasswordLabels.ts`) behind a `labels/index.ts` barrel that re-exports the
+  exact same names, so `./labels` remains a single import site.
+- **`src/components/LoginForm.tsx` (253 lines) → render body slimmed.** The
+  prop-doc-heavy `LoginFormProps` interface moved to a co-located
+  `LoginForm.types.ts` (re-exported from `LoginForm.tsx`), and the submit branch
+  logic moved into a unit-tested `useLoginSubmit` hook.
+
+### Changed
+
+- No runtime change. Splitting only; identical bundled output.
 
 Completes the demo-credential feature for **BFF-fronted apps**, whose demo pair
 arrives ASYNChronously from `GET /bff/config` rather than a module-level const (a

package/dist/index.d.mts

@@ -129,18 +129,6 @@ interface AuthScreenProps {
 /** The screen-level auth composition: one centered card the controls share. */
 declare function AuthScreen({ children, theme: themeProp, testID, cardTestID, maxWidth, title, subtitle, footer, }: Readonly<AuthScreenProps>): ReactElement;
 
-/**
- * Label bags for the auth components.
- *
- * `@dloizides/auth-web` ships **no** translation framework — it is i18n-agnostic
- * by design (each app already owns its own i18n). Every user-facing string a
- * component renders is supplied by the consuming app through a typed `labels`
- * prop. The app passes strings it has already localised with `FM()` / `t()`.
- *
- * Each bag has a `DEFAULT_*` constant (English) so a component renders sensibly
- * with no `labels` prop and a consuming app can spread-override only the keys
- * it wants to change.
- */
 /** Strings rendered by `<LoginForm>`. */
 interface LoginFormLabels {
     title: string;
@@ -162,6 +150,8 @@ interface LoginFormLabels {
     /** Shown when one or both fields are empty on submit. */
     missingFields: string;
 }
+declare const DEFAULT_LOGIN_LABELS: LoginFormLabels;
+
 /** Strings rendered by `<ForgotPasswordForm>`. */
 interface ForgotPasswordFormLabels {
     title: string;
@@ -189,6 +179,9 @@ interface ForgotPasswordFieldsLabels extends ForgotPasswordFormLabels {
     /** The "close" button shown on the success state. */
     close: string;
 }
+declare const DEFAULT_FORGOT_PASSWORD_LABELS: ForgotPasswordFormLabels;
+declare const DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS: ForgotPasswordFieldsLabels;
+
 /** Strings rendered by `<OtpForm>` — the two-step email-OTP login form. */
 interface OtpFormLabels {
     /** Title shown on the request-a-code step. */
@@ -224,6 +217,8 @@ interface OtpFormLabels {
     /** The "use a different email" link text — returns to step 1. */
     changeEmail: string;
 }
+declare const DEFAULT_OTP_LABELS: OtpFormLabels;
+
 /** Strings rendered by `<PinForm>` — the single-step event-PIN login form. */
 interface PinFormLabels {
     /** Title shown above the PIN field. */
@@ -241,6 +236,8 @@ interface PinFormLabels {
     /** Generic "that PIN was wrong / expired / locked out" message. */
     invalidPin: string;
 }
+declare const DEFAULT_PIN_LABELS: PinFormLabels;
+
 /**
  * Strings rendered by `<DevicePinUnlockScreen>` — the returning-device unlock
  * gate. `{name}` / `{count}` placeholders are substituted by the component.
@@ -336,6 +333,10 @@ interface DevicePinSettingsLabels {
     /** Error shown when disabling fails. */
     disableFailed: string;
 }
+declare const DEFAULT_DEVICE_PIN_UNLOCK_LABELS: DevicePinUnlockLabels;
+declare const DEFAULT_DEVICE_PIN_ENROLL_LABELS: DevicePinEnrollLabels;
+declare const DEFAULT_DEVICE_PIN_SETTINGS_LABELS: DevicePinSettingsLabels;
+
 /** Strings rendered by `<PasskeyLoginButton>` — the login-surface passkey CTA. */
 interface PasskeyLoginLabels {
     /** The "sign in with a passkey" button. */
@@ -365,6 +366,9 @@ interface PasskeySettingsLabels {
     /** Success line shown after returning from a registration. */
     registeredSuccess: string;
 }
+declare const DEFAULT_PASSKEY_LOGIN_LABELS: PasskeyLoginLabels;
+declare const DEFAULT_PASSKEY_SETTINGS_LABELS: PasskeySettingsLabels;
+
 /** Strings rendered by `<PreferredMethodSettingsCard>` — the cross-device default-method picker. */
 interface PreferredMethodSettingsLabels {
     title: string;
@@ -391,6 +395,9 @@ interface PreferredMethodHintLabels {
     /** Full sentence shown when the cached preference is passkey. */
     passkey: string;
 }
+declare const DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS: PreferredMethodSettingsLabels;
+declare const DEFAULT_PREFERRED_METHOD_HINT_LABELS: PreferredMethodHintLabels;
+
 /** Strings rendered by `<DemoCredentialsHint>` — the public-demo credentials panel. */
 interface DemoCredentialsHintLabels {
     /** Panel heading (e.g. "Demo access"). */
@@ -406,6 +413,8 @@ interface DemoCredentialsHintLabels {
     /** Accessibility hint for that button. */
     useCredentialsHint: string;
 }
+declare const DEFAULT_DEMO_CREDENTIALS_HINT_LABELS: DemoCredentialsHintLabels;
+
 /** Strings rendered by `<ResetPasswordForm>`. */
 interface ResetPasswordFormLabels {
     title: string;
@@ -427,19 +436,6 @@ interface ResetPasswordFormLabels {
     /** Error: a network / 5xx failure. */
     errorNetwork: string;
 }
-declare const DEFAULT_LOGIN_LABELS: LoginFormLabels;
-declare const DEFAULT_FORGOT_PASSWORD_LABELS: ForgotPasswordFormLabels;
-declare const DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS: ForgotPasswordFieldsLabels;
-declare const DEFAULT_OTP_LABELS: OtpFormLabels;
-declare const DEFAULT_PIN_LABELS: PinFormLabels;
-declare const DEFAULT_DEVICE_PIN_UNLOCK_LABELS: DevicePinUnlockLabels;
-declare const DEFAULT_DEVICE_PIN_ENROLL_LABELS: DevicePinEnrollLabels;
-declare const DEFAULT_DEVICE_PIN_SETTINGS_LABELS: DevicePinSettingsLabels;
-declare const DEFAULT_PASSKEY_LOGIN_LABELS: PasskeyLoginLabels;
-declare const DEFAULT_PASSKEY_SETTINGS_LABELS: PasskeySettingsLabels;
-declare const DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS: PreferredMethodSettingsLabels;
-declare const DEFAULT_PREFERRED_METHOD_HINT_LABELS: PreferredMethodHintLabels;
-declare const DEFAULT_DEMO_CREDENTIALS_HINT_LABELS: DemoCredentialsHintLabels;
 declare const DEFAULT_RESET_PASSWORD_LABELS: ResetPasswordFormLabels;
 
 /**
@@ -464,17 +460,8 @@ declare const enum PrefillIntent {
 }
 
 /**
- * `<LoginForm>` — the ready-made, themeable password-login form.
- *
- * The "themeable component" half of the package design: drop it in, pass a
- * `client`, a `theme` (or wrap in `<AuthThemeProvider>`) and a localised
- * `labels` bag, and you have a branded login surface. It is built on the
- * headless `useBffAuth` hook, so the ready-made and custom-layout paths share
- * one code path.
- *
- * The package ships no router and no i18n. `onSuccess` hands the signed-in
- * `BffUser` back to the app, which decides where to navigate (typically via
- * `resolvePostLoginRoute`). All copy comes from `labels`.
+ * Props for `<LoginForm>`, split out of the component file to keep the render
+ * body under the component size limit. Purely a type module — no runtime code.
  */
 
 interface LoginFormProps {
@@ -531,6 +518,21 @@ interface LoginFormProps {
      */
     prefillIntent?: PrefillIntent;
 }
+
+/**
+ * `<LoginForm>` — the ready-made, themeable password-login form.
+ *
+ * The "themeable component" half of the package design: drop it in, pass a
+ * `client`, a `theme` (or wrap in `<AuthThemeProvider>`) and a localised
+ * `labels` bag, and you have a branded login surface. It is built on the
+ * headless `useBffAuth` hook, so the ready-made and custom-layout paths share
+ * one code path.
+ *
+ * The package ships no router and no i18n. `onSuccess` hands the signed-in
+ * `BffUser` back to the app, which decides where to navigate (typically via
+ * `resolvePostLoginRoute`). All copy comes from `labels`.
+ */
+
 /** Themeable password-login form built on `useBffAuth`. */
 declare function LoginForm({ client, theme: themeProp, labels: labelsProp, onSuccess, onForgotPassword, onSignUp, testIdPrefix, chromeless, initialUsername, initialPassword, prefillNonce, prefillIntent, }: Readonly<LoginFormProps>): ReactElement;
 

package/dist/index.d.ts

@@ -129,18 +129,6 @@ interface AuthScreenProps {
 /** The screen-level auth composition: one centered card the controls share. */
 declare function AuthScreen({ children, theme: themeProp, testID, cardTestID, maxWidth, title, subtitle, footer, }: Readonly<AuthScreenProps>): ReactElement;
 
-/**
- * Label bags for the auth components.
- *
- * `@dloizides/auth-web` ships **no** translation framework — it is i18n-agnostic
- * by design (each app already owns its own i18n). Every user-facing string a
- * component renders is supplied by the consuming app through a typed `labels`
- * prop. The app passes strings it has already localised with `FM()` / `t()`.
- *
- * Each bag has a `DEFAULT_*` constant (English) so a component renders sensibly
- * with no `labels` prop and a consuming app can spread-override only the keys
- * it wants to change.
- */
 /** Strings rendered by `<LoginForm>`. */
 interface LoginFormLabels {
     title: string;
@@ -162,6 +150,8 @@ interface LoginFormLabels {
     /** Shown when one or both fields are empty on submit. */
     missingFields: string;
 }
+declare const DEFAULT_LOGIN_LABELS: LoginFormLabels;
+
 /** Strings rendered by `<ForgotPasswordForm>`. */
 interface ForgotPasswordFormLabels {
     title: string;
@@ -189,6 +179,9 @@ interface ForgotPasswordFieldsLabels extends ForgotPasswordFormLabels {
     /** The "close" button shown on the success state. */
     close: string;
 }
+declare const DEFAULT_FORGOT_PASSWORD_LABELS: ForgotPasswordFormLabels;
+declare const DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS: ForgotPasswordFieldsLabels;
+
 /** Strings rendered by `<OtpForm>` — the two-step email-OTP login form. */
 interface OtpFormLabels {
     /** Title shown on the request-a-code step. */
@@ -224,6 +217,8 @@ interface OtpFormLabels {
     /** The "use a different email" link text — returns to step 1. */
     changeEmail: string;
 }
+declare const DEFAULT_OTP_LABELS: OtpFormLabels;
+
 /** Strings rendered by `<PinForm>` — the single-step event-PIN login form. */
 interface PinFormLabels {
     /** Title shown above the PIN field. */
@@ -241,6 +236,8 @@ interface PinFormLabels {
     /** Generic "that PIN was wrong / expired / locked out" message. */
     invalidPin: string;
 }
+declare const DEFAULT_PIN_LABELS: PinFormLabels;
+
 /**
  * Strings rendered by `<DevicePinUnlockScreen>` — the returning-device unlock
  * gate. `{name}` / `{count}` placeholders are substituted by the component.
@@ -336,6 +333,10 @@ interface DevicePinSettingsLabels {
     /** Error shown when disabling fails. */
     disableFailed: string;
 }
+declare const DEFAULT_DEVICE_PIN_UNLOCK_LABELS: DevicePinUnlockLabels;
+declare const DEFAULT_DEVICE_PIN_ENROLL_LABELS: DevicePinEnrollLabels;
+declare const DEFAULT_DEVICE_PIN_SETTINGS_LABELS: DevicePinSettingsLabels;
+
 /** Strings rendered by `<PasskeyLoginButton>` — the login-surface passkey CTA. */
 interface PasskeyLoginLabels {
     /** The "sign in with a passkey" button. */
@@ -365,6 +366,9 @@ interface PasskeySettingsLabels {
     /** Success line shown after returning from a registration. */
     registeredSuccess: string;
 }
+declare const DEFAULT_PASSKEY_LOGIN_LABELS: PasskeyLoginLabels;
+declare const DEFAULT_PASSKEY_SETTINGS_LABELS: PasskeySettingsLabels;
+
 /** Strings rendered by `<PreferredMethodSettingsCard>` — the cross-device default-method picker. */
 interface PreferredMethodSettingsLabels {
     title: string;
@@ -391,6 +395,9 @@ interface PreferredMethodHintLabels {
     /** Full sentence shown when the cached preference is passkey. */
     passkey: string;
 }
+declare const DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS: PreferredMethodSettingsLabels;
+declare const DEFAULT_PREFERRED_METHOD_HINT_LABELS: PreferredMethodHintLabels;
+
 /** Strings rendered by `<DemoCredentialsHint>` — the public-demo credentials panel. */
 interface DemoCredentialsHintLabels {
     /** Panel heading (e.g. "Demo access"). */
@@ -406,6 +413,8 @@ interface DemoCredentialsHintLabels {
     /** Accessibility hint for that button. */
     useCredentialsHint: string;
 }
+declare const DEFAULT_DEMO_CREDENTIALS_HINT_LABELS: DemoCredentialsHintLabels;
+
 /** Strings rendered by `<ResetPasswordForm>`. */
 interface ResetPasswordFormLabels {
     title: string;
@@ -427,19 +436,6 @@ interface ResetPasswordFormLabels {
     /** Error: a network / 5xx failure. */
     errorNetwork: string;
 }
-declare const DEFAULT_LOGIN_LABELS: LoginFormLabels;
-declare const DEFAULT_FORGOT_PASSWORD_LABELS: ForgotPasswordFormLabels;
-declare const DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS: ForgotPasswordFieldsLabels;
-declare const DEFAULT_OTP_LABELS: OtpFormLabels;
-declare const DEFAULT_PIN_LABELS: PinFormLabels;
-declare const DEFAULT_DEVICE_PIN_UNLOCK_LABELS: DevicePinUnlockLabels;
-declare const DEFAULT_DEVICE_PIN_ENROLL_LABELS: DevicePinEnrollLabels;
-declare const DEFAULT_DEVICE_PIN_SETTINGS_LABELS: DevicePinSettingsLabels;
-declare const DEFAULT_PASSKEY_LOGIN_LABELS: PasskeyLoginLabels;
-declare const DEFAULT_PASSKEY_SETTINGS_LABELS: PasskeySettingsLabels;
-declare const DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS: PreferredMethodSettingsLabels;
-declare const DEFAULT_PREFERRED_METHOD_HINT_LABELS: PreferredMethodHintLabels;
-declare const DEFAULT_DEMO_CREDENTIALS_HINT_LABELS: DemoCredentialsHintLabels;
 declare const DEFAULT_RESET_PASSWORD_LABELS: ResetPasswordFormLabels;
 
 /**
@@ -464,17 +460,8 @@ declare const enum PrefillIntent {
 }
 
 /**
- * `<LoginForm>` — the ready-made, themeable password-login form.
- *
- * The "themeable component" half of the package design: drop it in, pass a
- * `client`, a `theme` (or wrap in `<AuthThemeProvider>`) and a localised
- * `labels` bag, and you have a branded login surface. It is built on the
- * headless `useBffAuth` hook, so the ready-made and custom-layout paths share
- * one code path.
- *
- * The package ships no router and no i18n. `onSuccess` hands the signed-in
- * `BffUser` back to the app, which decides where to navigate (typically via
- * `resolvePostLoginRoute`). All copy comes from `labels`.
+ * Props for `<LoginForm>`, split out of the component file to keep the render
+ * body under the component size limit. Purely a type module — no runtime code.
  */
 
 interface LoginFormProps {
@@ -531,6 +518,21 @@ interface LoginFormProps {
      */
     prefillIntent?: PrefillIntent;
 }
+
+/**
+ * `<LoginForm>` — the ready-made, themeable password-login form.
+ *
+ * The "themeable component" half of the package design: drop it in, pass a
+ * `client`, a `theme` (or wrap in `<AuthThemeProvider>`) and a localised
+ * `labels` bag, and you have a branded login surface. It is built on the
+ * headless `useBffAuth` hook, so the ready-made and custom-layout paths share
+ * one code path.
+ *
+ * The package ships no router and no i18n. `onSuccess` hands the signed-in
+ * `BffUser` back to the app, which decides where to navigate (typically via
+ * `resolvePostLoginRoute`). All copy comes from `labels`.
+ */
+
 /** Themeable password-login form built on `useBffAuth`. */
 declare function LoginForm({ client, theme: themeProp, labels: labelsProp, onSuccess, onForgotPassword, onSignUp, testIdPrefix, chromeless, initialUsername, initialPassword, prefillNonce, prefillIntent, }: Readonly<LoginFormProps>): ReactElement;
 

package/dist/index.js

@@ -114,7 +114,7 @@ function AuthScreen({
   ] });
 }
 
-// src/components/labels.ts
+// src/components/labels/loginLabels.ts
 var DEFAULT_LOGIN_LABELS = {
   title: "Sign in",
   subtitle: "Welcome back",
@@ -129,6 +129,8 @@ var DEFAULT_LOGIN_LABELS = {
   invalidCredentials: "Incorrect username or password.",
   missingFields: "Enter both your username and password."
 };
+
+// src/components/labels/forgotPasswordLabels.ts
 var DEFAULT_FORGOT_PASSWORD_LABELS = {
   title: "Forgot password",
   description: "Enter your email and we will send you a reset link.",
@@ -145,6 +147,8 @@ var DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS = {
   cancel: "Cancel",
   close: "Close"
 };
+
+// src/components/labels/otpLabels.ts
 var DEFAULT_OTP_LABELS = {
   requestTitle: "Sign in with a code",
   requestDescription: "Enter your email and we will send you a one-time code.",
@@ -165,6 +169,8 @@ var DEFAULT_OTP_LABELS = {
   resending: "Resending...",
   changeEmail: "Use a different email"
 };
+
+// src/components/labels/pinLabels.ts
 var DEFAULT_PIN_LABELS = {
   title: "Enter your event PIN",
   description: "Enter the PIN for this event to sign in.",
@@ -175,6 +181,8 @@ var DEFAULT_PIN_LABELS = {
   missingPin: "Enter your event PIN.",
   invalidPin: "That PIN is incorrect, has expired, or is locked out."
 };
+
+// src/components/labels/devicePinLabels.ts
 var DEFAULT_DEVICE_PIN_UNLOCK_LABELS = {
   title: "Welcome back, {name}",
   titleNoName: "Welcome back",
@@ -232,6 +240,8 @@ var DEFAULT_DEVICE_PIN_SETTINGS_LABELS = {
   disabling: "Disabling...",
   disableFailed: "Could not disable PIN sign-in. Try again later."
 };
+
+// src/components/labels/passkeyLabels.ts
 var DEFAULT_PASSKEY_LOGIN_LABELS = {
   signInButton: "Sign in with a passkey",
   signInHint: "Use your fingerprint, face, or security key to sign in",
@@ -247,6 +257,8 @@ var DEFAULT_PASSKEY_SETTINGS_LABELS = {
   addHint: "Start setting up a passkey for this account",
   registeredSuccess: "Your passkey was added. You can now use it to sign in."
 };
+
+// src/components/labels/preferredMethodLabels.ts
 var DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS = {
   title: "Preferred sign-in method",
   description: "Pick how you usually sign in. We will show this method first on your devices.",
@@ -262,6 +274,8 @@ var DEFAULT_PREFERRED_METHOD_HINT_LABELS = {
   pin: "You usually sign in with your quick PIN on this account.",
   passkey: "You usually sign in with a passkey."
 };
+
+// src/components/labels/demoLabels.ts
 var DEFAULT_DEMO_CREDENTIALS_HINT_LABELS = {
   title: "Demo access",
   description: "Explore the full product with our shared demo account.",
@@ -270,6 +284,8 @@ var DEFAULT_DEMO_CREDENTIALS_HINT_LABELS = {
   useCredentials: "Use these credentials",
   useCredentialsHint: "Fill the sign-in form with the demo username and password"
 };
+
+// src/components/labels/resetPasswordLabels.ts
 var DEFAULT_RESET_PASSWORD_LABELS = {
   title: "Reset password",
   description: "Choose a new password for your account.",
@@ -523,6 +539,35 @@ function useLoginPrefill({
   }
   return { username, password, setUsername, setPassword };
 }
+function useLoginSubmit({
+  username,
+  password,
+  login,
+  onSuccess,
+  missingFieldsLabel,
+  invalidCredentialsLabel
+}) {
+  const [errorText, setErrorText] = react.useState(null);
+  const runLogin = react.useCallback(async () => {
+    setErrorText(null);
+    const trimmedUsername = username.trim();
+    const hasMissingField = trimmedUsername.length === 0 || password.length === 0;
+    if (hasMissingField) {
+      setErrorText(missingFieldsLabel);
+      return;
+    }
+    try {
+      const user = await login({ username: trimmedUsername, password });
+      onSuccess(user);
+    } catch {
+      setErrorText(invalidCredentialsLabel);
+    }
+  }, [username, password, login, onSuccess, missingFieldsLabel, invalidCredentialsLabel]);
+  const handleSubmit = react.useCallback(() => {
+    void runLogin();
+  }, [runLogin]);
+  return { errorText, handleSubmit };
+}
 var BffAuthStatus = /* @__PURE__ */ ((BffAuthStatus2) => {
   BffAuthStatus2["Loading"] = "loading";
   BffAuthStatus2["Authenticated"] = "authenticated";
@@ -653,25 +698,14 @@ function LoginForm({
     prefillNonce,
     prefillIntent
   });
-  const [errorText, setErrorText] = react.useState(null);
-  const runLogin = react.useCallback(async () => {
-    setErrorText(null);
-    const trimmedUsername = username.trim();
-    const hasMissingField = trimmedUsername.length === 0 || password.length === 0;
-    if (hasMissingField) {
-      setErrorText(labels.missingFields);
-      return;
-    }
-    try {
-      const user = await login({ username: trimmedUsername, password });
-      onSuccess(user);
-    } catch {
-      setErrorText(labels.invalidCredentials);
-    }
-  }, [username, password, login, onSuccess, labels.missingFields, labels.invalidCredentials]);
-  const handleSubmit = react.useCallback(() => {
-    void runLogin();
-  }, [runLogin]);
+  const { errorText, handleSubmit } = useLoginSubmit({
+    username,
+    password,
+    login,
+    onSuccess,
+    missingFieldsLabel: labels.missingFields,
+    invalidCredentialsLabel: labels.invalidCredentials
+  });
   const submitButtonStyle = isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),