RegisterForm

Create an account on the evolve-feature-form pattern. Self-contained: runs useRegister, maps ValidationError.fields per-field (e.g. email → CUSTOMER_ALREADY_EXISTS), shows a password-strength hint (guidance only), and delegates session-setting to AuthProvider's onAuthenticated seam.

import { RegisterForm } from "@evolve-storefront/feature-auth/register-form";

Renders inside AuthProvider.

Preview

DefaultOpen in Storybook ↗

Usage

// Runs the register mutation; AuthProvider's onAuthenticated sets the session.
<RegisterForm onRegistered={() => router.push("/account")} />;

Props

Prop	Type	Description
validationBehavior?	"aria" | "native"	Default "aria": mark fields via ARIA rather than blocking native submit. The form is then noValidate, so an input's own constraint (type="email") never stops the submit with a browser tooltip that the field's error does not match.
onRegistered?	((customer: AuthCustomer) => void)	Called with the customer on success (alongside the provider's session seam).
defaultValues?	{ email?: string | undefined; givenName?: string | undefined; familyName?: string | undefined; }
privacyPath?	string | null	The privacy page's path, such as sitePagePath(settings, "privacyPage"); a line under the button links to it.
renderLink?	((props: { href: string; children: ReactNode; }) => ReactNode)	The privacy link with the app's router. A plain anchor by default.

Any other props go to the root element, like on a plain HTML element.

Examples

With Privacy PageThe site's settings name a privacy page: a line under the button links to it.

<RegisterForm
  privacyPath={sitePagePath(settings, "privacyPage")}
  onRegistered={() => router.push("/account")}
/>;

Open in Storybook ↗

PrefilleddefaultValues prefills what the shopper already gave, e.g.

<RegisterForm
  defaultValues={{ email: order.email, givenName: order.givenName }}
  onRegistered={() => router.push("/account")}
/>;

Open in Storybook ↗