@udibo/oauth2 0.1.0

package/esm/react/components/internal.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { AuthFormClassNamesScope, useAuthFormClassNames, } from "./class-names.js";
+/**
+ * The single exit every default form component returns through — it owns both
+ * outcomes, so a form has one `return` and cannot leave a subtree unscoped.
+ *
+ * With no `render`, it lays out the markup the forms share: the root wrapper
+ * carrying `data-oauth2-form={name}`, then the `<form>` with its error summary
+ * and the caller's fields. Use `aboveForm` for content that belongs inside the
+ * root but outside the form (social buttons, an enrollment secret), and
+ * `succeeded` for a terminal state that replaces the form entirely. With a
+ * `render` — the form's render-prop `children` — that markup is skipped for the
+ * caller's own. Either way the already-resolved `classNames` is published to
+ * what renders, so the elements inside take their classes from the tree.
+ */
+export function AuthFormShell(props) {
+    const { name, form, className, classNames, render, rootProps, aboveForm, succeeded, children, action, method, formRef, } = props;
+    return (_jsx(AuthFormClassNamesScope, { classNames: classNames, children: render ? render(form) : (_jsxs("div", { "data-oauth2-form": name, ...rootProps, className: combineClassNames(className, classNames.root), children: [aboveForm, succeeded ?? (_jsxs("form", { onSubmit: form.handleSubmit, action: action, method: method ?? (action ? "post" : undefined), ref: formRef, noValidate: true, "data-oauth2-form-element": "", className: classNames.form, children: [_jsx(ErrorSummary, { error: form.formError, focusTrigger: form.submitCount }), children] }))] })) }));
+}
+/** The actions row and its submit button, disabled while the form is in flight. */
+export function SubmitButton(props) {
+    const { isSubmitting, label, submittingLabel } = props;
+    const classNames = useAuthFormClassNames();
+    return (_jsx("div", { "data-oauth2-actions": "", className: classNames.actions, children: _jsx("button", { type: "submit", disabled: isSubmitting, "data-oauth2-submit": "", className: classNames.submit, children: isSubmitting ? submittingLabel : label }) }));
+}
+export function TextField(props) {
+    const { fieldProps, label, type = "text", autoComplete, required, error, inputRef, children, } = props;
+    const classNames = useAuthFormClassNames();
+    return (_jsxs("div", { "data-oauth2-field": fieldProps.name, className: classNames.field, children: [_jsx("label", { htmlFor: fieldProps.id, "data-oauth2-label": "", className: classNames.label, children: label }), _jsx("input", { ...fieldProps, type: type, autoComplete: autoComplete, required: required, "data-oauth2-input": "", className: classNames.input, ref: inputRef }), children, error
+                ? (_jsx("p", { id: `${fieldProps.id}-error`, role: "alert", "data-oauth2-error": "", className: classNames.error, children: error }))
+                : null] }));
+}
+export function ErrorSummary(props) {
+    const { error, focusTrigger } = props;
+    const classNames = useAuthFormClassNames();
+    const ref = useRef(null);
+    useEffect(() => {
+        if (error)
+            ref.current?.focus();
+    }, [error, focusTrigger]);
+    if (!error)
+        return null;
+    return (_jsx("div", { ref: ref, tabIndex: -1, "data-oauth2-error-summary": "", className: classNames.errorSummary, children: _jsx("span", { role: "alert", "data-oauth2-error-summary-message": "", children: error }) }));
+}
+/**
+ * Moves keyboard focus to the first field that came back with an error after a
+ * failed submit, so a screen-reader / keyboard user lands on the control to fix
+ * (its label + error are read via `aria-describedby`) instead of being stranded
+ * on the disabled submit button. No-ops on the initial render and when the form
+ * carries a form-level error ({@link ErrorSummary} owns that focus). Call it
+ * once, unconditionally, from a form component built on {@link useAuthForm}.
+ */
+export function useFocusFirstError(form) {
+    const handled = useRef(0);
+    useEffect(() => {
+        if (form.status !== "error")
+            return;
+        if (handled.current === form.submitCount)
+            return;
+        handled.current = form.submitCount;
+        if (form.formError)
+            return;
+        const names = Object.keys(form.values);
+        const firstErrored = names.find((name) => Boolean(form.errors[name]));
+        if (!firstErrored)
+            return;
+        const { id } = form.getFieldProps(firstErrored);
+        if (typeof document === "undefined")
+            return;
+        document.getElementById(id)?.focus();
+    }, [form.status, form.submitCount, form.formError]);
+}
+export function SocialButtons(props) {
+    const { socialProviders, onSocialSelect, socialHref } = props;
+    const classNames = useAuthFormClassNames();
+    if (!socialProviders || socialProviders.length === 0)
+        return null;
+    const label = (provider) => (_jsxs(_Fragment, { children: [provider.iconSlot
+                ? _jsx("span", { "data-oauth2-social-icon": "", children: provider.iconSlot })
+                : null, _jsxs("span", { "data-oauth2-social-label": "", children: ["Continue with ", provider.name] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-oauth2-social": "", className: classNames.socialSection, children: socialProviders.map((provider) => socialHref
+                    ? (_jsx("a", { href: socialHref(provider), "data-oauth2-social-button": provider.id, className: classNames.socialButton, children: label(provider) }, provider.id))
+                    : (_jsx("button", { type: "button", onClick: () => onSocialSelect?.(provider), "data-oauth2-social-button": provider.id, className: classNames.socialButton, children: label(provider) }, provider.id))) }), _jsx("div", { "data-oauth2-social-divider": "", "aria-hidden": "true", className: classNames.socialDivider })] }));
+}
+export function combineClassNames(className, slot) {
+    return [className, slot].filter(Boolean).join(" ") || undefined;
+}
+export function displayName(user) {
+    const candidates = [
+        user.name,
+        user.preferred_username,
+        user.nickname,
+        user.email,
+        user.sub,
+    ];
+    for (const candidate of candidates) {
+        if (typeof candidate === "string" && candidate.length > 0)
+            return candidate;
+    }
+    return "Account";
+}

package/esm/react/components/mfa-challenge-form.d.ts

@@ -0,0 +1,66 @@
+/**
+ * {@link MfaChallengeForm} — a default, accessible, unstyled second-factor
+ * challenge form built on {@link useAuthForm}. Collects a one-time code and,
+ * when allowed, toggles to accepting a recovery code instead. The active
+ * method is forwarded to `onSubmit` so your endpoint knows how to verify it.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { AuthFormState } from "./use-auth-form.js";
+import type { BaseAuthFormProps } from "./types.js";
+/** Which credential the user is submitting. */
+export type MfaChallengeMethod = "totp" | "recovery";
+/** Values collected by {@link MfaChallengeForm}. */
+export type MfaChallengeValues = {
+    /** The one-time code or recovery code the user entered. */
+    code: string;
+    /** Which credential `code` represents. */
+    method: MfaChallengeMethod;
+};
+/** Visible text overrides for {@link MfaChallengeForm}. */
+export interface MfaChallengeLabels {
+    /** Label for the TOTP code field. Default: `"Authentication code"`. */
+    code?: string;
+    /** Label for the recovery-code field. Default: `"Recovery code"`. */
+    recoveryCode?: string;
+    /** Submit button text. Default: `"Verify"`. */
+    submit?: string;
+    /** Submit button text while submitting. Default: `"Verifying…"`. */
+    submitting?: string;
+    /** Toggle text to switch to recovery mode. Default: `"Use a recovery code"`. */
+    useRecovery?: string;
+    /** Toggle text to switch back to code mode. Default: `"Use your authenticator app"`. */
+    useAuthenticator?: string;
+}
+/** Props for {@link MfaChallengeForm}. */
+export interface MfaChallengeFormProps extends BaseAuthFormProps<MfaChallengeValues> {
+    /** Offer the "use a recovery code" toggle. Default: `true`. */
+    allowRecoveryCode?: boolean;
+    /** Text overrides. */
+    labels?: MfaChallengeLabels;
+    /**
+     * Render-prop escape hatch. When provided, you own the markup and receive
+     * the live {@link AuthFormState}. Toggle `method` with `setValue`.
+     */
+    children?: (state: AuthFormState<MfaChallengeValues>) => ReactNode;
+}
+/**
+ * A ready-to-use MFA challenge form. Wire `onSubmit` to your verification
+ * endpoint; inspect `values.method` to decide how to validate `values.code`.
+ *
+ * @example
+ * ```tsx
+ * <MfaChallengeForm
+ *   onSubmit={async (values) => {
+ *     const res = await fetch("/auth/mfa/verify", {
+ *       method: "POST",
+ *       headers: { "content-type": "application/json" },
+ *       body: JSON.stringify(values),
+ *     });
+ *     if (!res.ok) return { error: "That code was not valid." };
+ *   }}
+ * />
+ * ```
+ */
+export declare function MfaChallengeForm(props: MfaChallengeFormProps): ReactNode;

package/esm/react/components/mfa-challenge-form.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuthForm } from "./use-auth-form.js";
+import { AuthFormShell, SubmitButton, TextField, useFocusFirstError, } from "./internal.js";
+import { useAuthFormClassNames } from "./class-names.js";
+/**
+ * A ready-to-use MFA challenge form. Wire `onSubmit` to your verification
+ * endpoint; inspect `values.method` to decide how to validate `values.code`.
+ *
+ * @example
+ * ```tsx
+ * <MfaChallengeForm
+ *   onSubmit={async (values) => {
+ *     const res = await fetch("/auth/mfa/verify", {
+ *       method: "POST",
+ *       headers: { "content-type": "application/json" },
+ *       body: JSON.stringify(values),
+ *     });
+ *     if (!res.ok) return { error: "That code was not valid." };
+ *   }}
+ * />
+ * ```
+ */
+export function MfaChallengeForm(props) {
+    const { onSubmit, className, allowRecoveryCode = true, labels, children, } = props;
+    const form = useAuthForm({
+        initialValues: { code: "", method: "totp" },
+        onSubmit,
+        onSuccess: props.onSuccess,
+    });
+    useFocusFirstError(form);
+    const classNames = useAuthFormClassNames(props.classNames);
+    const isRecovery = form.values.method === "recovery";
+    const toggleMethod = () => {
+        form.setValues({
+            method: isRecovery ? "totp" : "recovery",
+            code: "",
+        });
+    };
+    return (_jsxs(AuthFormShell, { name: "mfa-challenge", form: form, className: className, classNames: classNames, render: children, action: props.action, method: props.method, formRef: props.formRef, rootProps: { "data-oauth2-method": form.values.method }, children: [_jsx(TextField, { fieldProps: form.getFieldProps("code"), label: isRecovery
+                    ? labels?.recoveryCode ?? "Recovery code"
+                    : labels?.code ?? "Authentication code", autoComplete: isRecovery ? "off" : "one-time-code", required: true, error: form.errors.code }), _jsx(SubmitButton, { isSubmitting: form.isSubmitting, label: labels?.submit ?? "Verify", submittingLabel: labels?.submitting ?? "Verifying…" }), allowRecoveryCode
+                ? (_jsx("button", { type: "button", onClick: toggleMethod, "data-oauth2-secondary": "", "data-oauth2-toggle-recovery": "", className: classNames.secondary, children: isRecovery
+                        ? labels?.useAuthenticator ?? "Use your authenticator app"
+                        : labels?.useRecovery ?? "Use a recovery code" }))
+                : null] }));
+}

package/esm/react/components/mfa-enrollment-form.d.ts

@@ -0,0 +1,83 @@
+/**
+ * {@link MfaEnrollmentForm} — a default, accessible, unstyled TOTP enrollment
+ * panel built on {@link useAuthForm}. Displays the shared secret / `otpauth://`
+ * URI (with a slot for your own QR renderer) and recovery codes, then collects
+ * a confirmation code to prove the authenticator is set up.
+ *
+ * The package ships no QR-code or crypto dependency: pass a rendered QR node
+ * via `qrSlot`, and provide the secret / URI / recovery codes as data.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { AuthFormState } from "./use-auth-form.js";
+import type { BaseAuthFormProps } from "./types.js";
+/** The enrollment secret material to display, produced server-side. */
+export interface MfaEnrollmentData {
+    /** Base32 shared secret for manual entry into an authenticator app. */
+    secret: string;
+    /** The full `otpauth://totp/...` provisioning URI (encode as a QR code). */
+    otpauthUri: string;
+    /** One-time recovery codes to show once and have the user save. */
+    recoveryCodes?: string[];
+}
+/** Values collected by {@link MfaEnrollmentForm}'s confirmation step. */
+export type MfaEnrollmentValues = {
+    /** The code from the authenticator app confirming enrollment. */
+    code: string;
+};
+/** Visible text overrides for {@link MfaEnrollmentForm}. */
+export interface MfaEnrollmentLabels {
+    /** Heading above the secret. Default: `"Scan this QR code"`. */
+    secretHeading?: string;
+    /** Prefix before the manual secret. Default: `"Or enter this code:"`. */
+    secretHint?: string;
+    /** Heading above recovery codes. Default: `"Save your recovery codes"`. */
+    recoveryHeading?: string;
+    /** Label for the confirmation code field. Default: `"Authentication code"`. */
+    code?: string;
+    /** Submit button text. Default: `"Confirm"`. */
+    submit?: string;
+    /** Submit button text while submitting. Default: `"Confirming…"`. */
+    submitting?: string;
+}
+/** Props for {@link MfaEnrollmentForm}. */
+export interface MfaEnrollmentFormProps extends BaseAuthFormProps<MfaEnrollmentValues> {
+    /** The secret, URI, and recovery codes to display. */
+    data: MfaEnrollmentData;
+    /**
+     * Your rendered QR code for `data.otpauthUri` (the package ships no QR
+     * dependency). A node, or a function of the URI.
+     */
+    qrSlot?: ReactNode | ((otpauthUri: string) => ReactNode);
+    /** Text overrides. */
+    labels?: MfaEnrollmentLabels;
+    /**
+     * Render-prop escape hatch. When provided, you own all of the markup —
+     * including the secret / QR / recovery-code display — and receive the live
+     * {@link AuthFormState}; the component still owns state and submit.
+     */
+    children?: (state: AuthFormState<MfaEnrollmentValues>) => ReactNode;
+}
+/**
+ * A ready-to-use TOTP enrollment panel: shows the QR/secret and recovery
+ * codes, then confirms via a code. Wire `onSubmit` to your verification
+ * endpoint and pass a rendered QR via `qrSlot`.
+ *
+ * @example
+ * ```tsx
+ * <MfaEnrollmentForm
+ *   data={{ secret, otpauthUri, recoveryCodes }}
+ *   qrSlot={(uri) => <QRCode value={uri} />}
+ *   onSubmit={async ({ code }) => {
+ *     const res = await fetch("/auth/mfa/enroll/confirm", {
+ *       method: "POST",
+ *       headers: { "content-type": "application/json" },
+ *       body: JSON.stringify({ code }),
+ *     });
+ *     if (!res.ok) return { error: "That code was not valid." };
+ *   }}
+ * />
+ * ```
+ */
+export declare function MfaEnrollmentForm(props: MfaEnrollmentFormProps): ReactNode;

package/esm/react/components/mfa-enrollment-form.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAuthForm } from "./use-auth-form.js";
+import { AuthFormShell, SubmitButton, TextField, useFocusFirstError, } from "./internal.js";
+import { useAuthFormClassNames } from "./class-names.js";
+/**
+ * A ready-to-use TOTP enrollment panel: shows the QR/secret and recovery
+ * codes, then confirms via a code. Wire `onSubmit` to your verification
+ * endpoint and pass a rendered QR via `qrSlot`.
+ *
+ * @example
+ * ```tsx
+ * <MfaEnrollmentForm
+ *   data={{ secret, otpauthUri, recoveryCodes }}
+ *   qrSlot={(uri) => <QRCode value={uri} />}
+ *   onSubmit={async ({ code }) => {
+ *     const res = await fetch("/auth/mfa/enroll/confirm", {
+ *       method: "POST",
+ *       headers: { "content-type": "application/json" },
+ *       body: JSON.stringify({ code }),
+ *     });
+ *     if (!res.ok) return { error: "That code was not valid." };
+ *   }}
+ * />
+ * ```
+ */
+export function MfaEnrollmentForm(props) {
+    const { data, onSubmit, qrSlot, className, labels, children } = props;
+    const form = useAuthForm({
+        initialValues: { code: "" },
+        onSubmit,
+        onSuccess: props.onSuccess,
+    });
+    useFocusFirstError(form);
+    const classNames = useAuthFormClassNames(props.classNames);
+    const qr = typeof qrSlot === "function" ? qrSlot(data.otpauthUri) : qrSlot;
+    return (_jsxs(AuthFormShell, { name: "mfa-enrollment", form: form, className: className, classNames: classNames, render: children, action: props.action, method: props.method, formRef: props.formRef, aboveForm: _jsxs(_Fragment, { children: [_jsxs("div", { "data-oauth2-secret": "", className: classNames.secret, children: [_jsx("p", { role: "heading", "aria-level": 2, "data-oauth2-secret-heading": "", children: labels?.secretHeading ?? "Scan this QR code" }), qr
+                            ? _jsx("div", { "data-oauth2-qr": "", className: classNames.qr, children: qr })
+                            : null, _jsxs("p", { "data-oauth2-secret-hint": "", children: [labels?.secretHint ?? "Or enter this code:", " ", _jsx("code", { "data-oauth2-secret-value": "", children: data.secret })] })] }), data.recoveryCodes && data.recoveryCodes.length > 0
+                    ? (_jsxs("div", { "data-oauth2-recovery": "", children: [_jsx("p", { role: "heading", "aria-level": 2, "data-oauth2-recovery-heading": "", children: labels?.recoveryHeading ?? "Save your recovery codes" }), _jsx("ul", { "data-oauth2-recovery-codes": "", className: classNames.recoveryCodes, children: data.recoveryCodes.map((recoveryCode) => (_jsx("li", { "data-oauth2-recovery-code": "", className: classNames.recoveryCode, children: _jsx("code", { children: recoveryCode }) }, recoveryCode))) })] }))
+                    : null] }), children: [_jsx(TextField, { fieldProps: form.getFieldProps("code"), label: labels?.code ?? "Authentication code", autoComplete: "one-time-code", required: true, error: form.errors.code }), _jsx(SubmitButton, { isSubmitting: form.isSubmitting, label: labels?.submit ?? "Confirm", submittingLabel: labels?.submitting ?? "Confirming…" })] }));
+}

package/esm/react/components/mod.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Prebuilt React auth components for `@udibo/oauth2` — the composable,
+ * headless-first, themeable form set an app assembles into its own auth
+ * surface. Works in both plain React Router v7 and Juniper (SSR React).
+ *
+ * These components are **composed by your app**: you own the routes, storage,
+ * session, and the submit wiring. Nothing here mounts routes, talks to a
+ * server on its own, or assumes a design system — every component ships
+ * unstyled with per-slot `className` hooks and stable `data-oauth2-*`
+ * attributes, and takes its action via an injected `onSubmit` prop so the same
+ * component drives a client-side `fetch` or a router action.
+ *
+ * ## Two integration modes
+ *
+ * - **Default components** — {@link SignInForm}, {@link SignUpForm},
+ *   {@link RequestPasswordResetForm}, {@link ResetPasswordForm},
+ *   {@link MfaEnrollmentForm}, {@link MfaChallengeForm}, {@link UserMenu} —
+ *   render accessible markup with class hooks.
+ * - **Headless** — {@link useAuthForm} owns values, errors, and the submit
+ *   lifecycle with no markup. Every default component is built on it; "eject"
+ *   by using the hook directly, or by passing a function as a component's
+ *   `children` (render prop) to keep the component's wiring but own the markup.
+ *
+ * Social buttons appear automatically on the sign-in / sign-up components when
+ * you pass a `socialProviders` array.
+ *
+ * ## Server-rendered pages
+ *
+ * Pass `action` + `method` and the rendered `<form>` carries them, so a
+ * server-rendered page still posts when JavaScript never arrives — every field
+ * carries its `name`, so the native post sends the same keys `onSubmit`
+ * receives. Once React is running, `onSubmit` handles the submit and the
+ * native post is suppressed. `formRef` hands you the same `<form>` element, for
+ * example to trigger a native `submit()` yourself.
+ *
+ * ## Theming
+ *
+ * Every form takes a per-slot {@link AuthFormClassNames} map and publishes it
+ * to the elements it renders. Wrap a subtree in
+ * {@link AuthFormClassNamesProvider} to theme every form under it at once — a
+ * form's own `classNames` overrides the inherited map slot by slot — and read
+ * the map in effect from your own markup with {@link useAuthFormClassNames}.
+ *
+ * The claims type {@link UserMenu} hands to `renderUser` / `children` is
+ * `UserInfoClaims`; import it from `@udibo/oauth2/client`, which owns it.
+ *
+ * ## Accessibility
+ *
+ * These components target **WCAG 2.2 level AA** and are accessible by default,
+ * so dropping them in does not quietly ship a barrier:
+ *
+ * - Every field is programmatically labelled (`<label htmlFor>` ↔ input `id`);
+ *   errors set `aria-invalid` + `aria-describedby` and render `role="alert"`.
+ * - A failed submit moves focus to the first errored field (or the form-level
+ *   error summary), so a keyboard / screen-reader user lands on what to fix.
+ * - One-time-code fields use `autocomplete="one-time-code"` and **never block
+ *   paste** (WCAG 2.2 §3.3.8 Accessible Authentication).
+ * - Section titles carry heading semantics; the components ship unstyled, so
+ *   **contrast and visible focus are yours to satisfy** with your own theme —
+ *   the ratios and focus rules Udibo uses are in its `DESIGN.md`.
+ *
+ * @example Plain React Router v7
+ * ```tsx
+ * import { SignInForm } from "@udibo/oauth2/react/components";
+ *
+ * function SignIn() {
+ *   return (
+ *     <SignInForm
+ *       onSubmit={async (values) => {
+ *         const res = await fetch("/auth/sign-in", {
+ *           method: "POST",
+ *           headers: { "content-type": "application/json" },
+ *           body: JSON.stringify(values),
+ *         });
+ *         if (!res.ok) return await res.json();
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @module
+ */
+import "../../_dnt.polyfills.js";
+export { useAuthForm } from "./use-auth-form.js";
+export type { AuthFieldProps, AuthFormState, AuthFormStatus, UseAuthFormOptions, } from "./use-auth-form.js";
+export type { AuthFormClassNames, AuthFormErrors, AuthFormResult, AuthFormValues, AuthSubmitHandler, BaseAuthFormProps, BaseClassNames, SocialProvider, SocialProvidersProps, } from "./types.js";
+export { AuthFormClassNamesProvider, useAuthFormClassNames, } from "./class-names.js";
+export type { AuthFormClassNamesProviderProps } from "./class-names.js";
+export { SignInForm } from "./sign-in-form.js";
+export type { SignInFormProps, SignInLabels, SignInValues, } from "./sign-in-form.js";
+export { SignUpForm } from "./sign-up-form.js";
+export type { SignUpFormProps, SignUpLabels, SignUpValues, } from "./sign-up-form.js";
+export { RequestPasswordResetForm } from "./request-password-reset-form.js";
+export type { RequestPasswordResetFormProps, RequestPasswordResetLabels, RequestPasswordResetValues, } from "./request-password-reset-form.js";
+export { ResetPasswordForm } from "./reset-password-form.js";
+export type { ResetPasswordFormProps, ResetPasswordLabels, ResetPasswordValues, } from "./reset-password-form.js";
+export { MfaEnrollmentForm } from "./mfa-enrollment-form.js";
+export type { MfaEnrollmentData, MfaEnrollmentFormProps, MfaEnrollmentLabels, MfaEnrollmentValues, } from "./mfa-enrollment-form.js";
+export { MfaChallengeForm } from "./mfa-challenge-form.js";
+export type { MfaChallengeFormProps, MfaChallengeLabels, MfaChallengeMethod, MfaChallengeValues, } from "./mfa-challenge-form.js";
+export { UserMenu } from "./user-menu.js";
+export type { UserMenuClassNames, UserMenuLabels, UserMenuProps, } from "./user-menu.js";

package/esm/react/components/mod.js

@@ -0,0 +1,93 @@
+/**
+ * Prebuilt React auth components for `@udibo/oauth2` — the composable,
+ * headless-first, themeable form set an app assembles into its own auth
+ * surface. Works in both plain React Router v7 and Juniper (SSR React).
+ *
+ * These components are **composed by your app**: you own the routes, storage,
+ * session, and the submit wiring. Nothing here mounts routes, talks to a
+ * server on its own, or assumes a design system — every component ships
+ * unstyled with per-slot `className` hooks and stable `data-oauth2-*`
+ * attributes, and takes its action via an injected `onSubmit` prop so the same
+ * component drives a client-side `fetch` or a router action.
+ *
+ * ## Two integration modes
+ *
+ * - **Default components** — {@link SignInForm}, {@link SignUpForm},
+ *   {@link RequestPasswordResetForm}, {@link ResetPasswordForm},
+ *   {@link MfaEnrollmentForm}, {@link MfaChallengeForm}, {@link UserMenu} —
+ *   render accessible markup with class hooks.
+ * - **Headless** — {@link useAuthForm} owns values, errors, and the submit
+ *   lifecycle with no markup. Every default component is built on it; "eject"
+ *   by using the hook directly, or by passing a function as a component's
+ *   `children` (render prop) to keep the component's wiring but own the markup.
+ *
+ * Social buttons appear automatically on the sign-in / sign-up components when
+ * you pass a `socialProviders` array.
+ *
+ * ## Server-rendered pages
+ *
+ * Pass `action` + `method` and the rendered `<form>` carries them, so a
+ * server-rendered page still posts when JavaScript never arrives — every field
+ * carries its `name`, so the native post sends the same keys `onSubmit`
+ * receives. Once React is running, `onSubmit` handles the submit and the
+ * native post is suppressed. `formRef` hands you the same `<form>` element, for
+ * example to trigger a native `submit()` yourself.
+ *
+ * ## Theming
+ *
+ * Every form takes a per-slot {@link AuthFormClassNames} map and publishes it
+ * to the elements it renders. Wrap a subtree in
+ * {@link AuthFormClassNamesProvider} to theme every form under it at once — a
+ * form's own `classNames` overrides the inherited map slot by slot — and read
+ * the map in effect from your own markup with {@link useAuthFormClassNames}.
+ *
+ * The claims type {@link UserMenu} hands to `renderUser` / `children` is
+ * `UserInfoClaims`; import it from `@udibo/oauth2/client`, which owns it.
+ *
+ * ## Accessibility
+ *
+ * These components target **WCAG 2.2 level AA** and are accessible by default,
+ * so dropping them in does not quietly ship a barrier:
+ *
+ * - Every field is programmatically labelled (`<label htmlFor>` ↔ input `id`);
+ *   errors set `aria-invalid` + `aria-describedby` and render `role="alert"`.
+ * - A failed submit moves focus to the first errored field (or the form-level
+ *   error summary), so a keyboard / screen-reader user lands on what to fix.
+ * - One-time-code fields use `autocomplete="one-time-code"` and **never block
+ *   paste** (WCAG 2.2 §3.3.8 Accessible Authentication).
+ * - Section titles carry heading semantics; the components ship unstyled, so
+ *   **contrast and visible focus are yours to satisfy** with your own theme —
+ *   the ratios and focus rules Udibo uses are in its `DESIGN.md`.
+ *
+ * @example Plain React Router v7
+ * ```tsx
+ * import { SignInForm } from "@udibo/oauth2/react/components";
+ *
+ * function SignIn() {
+ *   return (
+ *     <SignInForm
+ *       onSubmit={async (values) => {
+ *         const res = await fetch("/auth/sign-in", {
+ *           method: "POST",
+ *           headers: { "content-type": "application/json" },
+ *           body: JSON.stringify(values),
+ *         });
+ *         if (!res.ok) return await res.json();
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @module
+ */
+import "../../_dnt.polyfills.js";
+export { useAuthForm } from "./use-auth-form.js";
+export { AuthFormClassNamesProvider, useAuthFormClassNames, } from "./class-names.js";
+export { SignInForm } from "./sign-in-form.js";
+export { SignUpForm } from "./sign-up-form.js";
+export { RequestPasswordResetForm } from "./request-password-reset-form.js";
+export { ResetPasswordForm } from "./reset-password-form.js";
+export { MfaEnrollmentForm } from "./mfa-enrollment-form.js";
+export { MfaChallengeForm } from "./mfa-challenge-form.js";
+export { UserMenu } from "./user-menu.js";

package/esm/react/components/request-password-reset-form.d.ts

@@ -0,0 +1,61 @@
+/**
+ * {@link RequestPasswordResetForm} — a default, accessible, unstyled
+ * "forgot password" form built on {@link useAuthForm}. Collects an email and,
+ * on success, swaps the form for a confirmation message (a neutral one that
+ * doesn't reveal whether the address exists).
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { AuthFormState } from "./use-auth-form.js";
+import type { BaseAuthFormProps } from "./types.js";
+/** Values collected by {@link RequestPasswordResetForm}. */
+export type RequestPasswordResetValues = {
+    /** The email to send the reset link to. */
+    email: string;
+};
+/** Visible text overrides for {@link RequestPasswordResetForm}. */
+export interface RequestPasswordResetLabels {
+    /** Label for the email field. Default: `"Email"`. */
+    email?: string;
+    /** Submit button text. Default: `"Send reset link"`. */
+    submit?: string;
+    /** Submit button text while submitting. Default: `"Sending…"`. */
+    submitting?: string;
+    /** Confirmation shown after success. Default: a neutral "check your email". */
+    success?: string;
+}
+/** Props for {@link RequestPasswordResetForm}. */
+export interface RequestPasswordResetFormProps extends BaseAuthFormProps<RequestPasswordResetValues> {
+    /** Text overrides. */
+    labels?: RequestPasswordResetLabels;
+    /**
+     * Render-prop escape hatch. When provided, you own the markup and receive
+     * the live {@link AuthFormState} (including `succeeded`).
+     */
+    children?: (state: AuthFormState<RequestPasswordResetValues>) => ReactNode;
+}
+/**
+ * A ready-to-use "forgot password" request form. Wire `onSubmit` to your
+ * reset-request endpoint. Return no error to trigger the neutral success state.
+ *
+ * **Enumeration safety is the endpoint's job:** the success copy is neutral
+ * ("if an account exists…"), but this form renders whatever error `onSubmit`
+ * returns/throws. Point it at an enumeration-safe endpoint (like
+ * `IdentityService.requestPasswordReset`, which always resolves) — do **not**
+ * surface a "no such account" error, or the neutral copy is undone.
+ *
+ * @example
+ * ```tsx
+ * <RequestPasswordResetForm
+ *   onSubmit={async ({ email }) => {
+ *     await fetch("/auth/forgot-password", {
+ *       method: "POST",
+ *       headers: { "content-type": "application/json" },
+ *       body: JSON.stringify({ email }),
+ *     });
+ *   }}
+ * />
+ * ```
+ */
+export declare function RequestPasswordResetForm(props: RequestPasswordResetFormProps): ReactNode;

package/esm/react/components/request-password-reset-form.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuthForm } from "./use-auth-form.js";
+import { AuthFormShell, SubmitButton, TextField, useFocusFirstError, } from "./internal.js";
+import { useAuthFormClassNames } from "./class-names.js";
+const DEFAULT_SUCCESS = "If an account exists for that email, a reset link is on its way.";
+/**
+ * A ready-to-use "forgot password" request form. Wire `onSubmit` to your
+ * reset-request endpoint. Return no error to trigger the neutral success state.
+ *
+ * **Enumeration safety is the endpoint's job:** the success copy is neutral
+ * ("if an account exists…"), but this form renders whatever error `onSubmit`
+ * returns/throws. Point it at an enumeration-safe endpoint (like
+ * `IdentityService.requestPasswordReset`, which always resolves) — do **not**
+ * surface a "no such account" error, or the neutral copy is undone.
+ *
+ * @example
+ * ```tsx
+ * <RequestPasswordResetForm
+ *   onSubmit={async ({ email }) => {
+ *     await fetch("/auth/forgot-password", {
+ *       method: "POST",
+ *       headers: { "content-type": "application/json" },
+ *       body: JSON.stringify({ email }),
+ *     });
+ *   }}
+ * />
+ * ```
+ */
+export function RequestPasswordResetForm(props) {
+    const { onSubmit, className, labels, children } = props;
+    const form = useAuthForm({
+        initialValues: { email: "" },
+        onSubmit,
+        onSuccess: props.onSuccess,
+    });
+    useFocusFirstError(form);
+    const classNames = useAuthFormClassNames(props.classNames);
+    return (_jsxs(AuthFormShell, { name: "request-password-reset", form: form, className: className, classNames: classNames, render: children, action: props.action, method: props.method, formRef: props.formRef, succeeded: form.succeeded
+            ? (_jsx("div", { "data-oauth2-success": "", role: "status", className: classNames.success, children: labels?.success ?? DEFAULT_SUCCESS }))
+            : null, children: [_jsx(TextField, { fieldProps: form.getFieldProps("email"), label: labels?.email ?? "Email", type: "email", autoComplete: "email", required: true, error: form.errors.email }), _jsx(SubmitButton, { isSubmitting: form.isSubmitting, label: labels?.submit ?? "Send reset link", submittingLabel: labels?.submitting ?? "Sending…" })] }));
+}