SignInDialog

Sign in without leaving the page that asked for it, so the product and scroll position the buyer was at survive. Shadows the app's AuthProvider, whose seam usually sends a sign-in to the account page.

import { SignInDialog } from "@evolve-storefront/feature-auth/sign-in-dialog";

Renders inside AuthProvider.

Preview

DefaultOpen in Storybook ↗

Usage

const adoptSession = useAdoptSession({
  validateLocalToken: useAuth().validateLocalToken,
  refresh: router.refresh,
});

<SignInDialog
  onSignedIn={adoptSession}
  footer={<Link href="/account/password-reset">Forgot your password?</Link>}
>
  Sign in
</SignInDialog>;

Props

Prop	Type	Description
children	ReactNode	What the trigger shows — a label, an icon.
onSignedIn	(customer: AuthCustomer) => void	Runs once signed in, before the dialog closes — useAdoptSession() to stay on the page, or a document navigation to leave it.
trigger?	Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "type" | "ref" | "children" | "onClick">	The trigger's attributes. Plain props rather than an element, so a Server Component can render the dialog: an element authored there cannot be cloned.
footer?	ReactNode	Under the form: the password-reset and register links, whose routes are the app's.

Examples

Inside Another FormSigning in stays inside the dialog. The dialog sits under an add-to-cart form here; its submit must not reach that form, or the product lands in the cart before the session that decides whether the buyer may.

<form action={addToCart} aria-label="Add to cart">
  <SignInDialog onSignedIn={adoptSession}>Sign in</SignInDialog>
</form>;

Open in Storybook ↗