ElvixEmailCodeSignIn

"use client";

import { ElvixEmailCodeSignIn } from "@elvix.is/sdk/react";

// Inside <ElvixProvider clientId="your-app">, in your own card, right after
// the step that told you the address (a wallet payment, an invite).
export function TicketReady({ email, onSignedIn }: Props) {
  return (
    <ElvixEmailCodeSignIn
      email={email}
      title="Your ticket is ready" // optional, like the line below
      description="Sign in to keep it in your account."
      deferOnboarding // the ticket first; username and passkey next time
      onSignedIn={(session) => onSignedIn(session.token)} // verify it on your backend
      signedIn={<p>Your ticket is in your account.</p>} // optional
    />
  );
}

type Props = { email: string; onSignedIn: (token?: string) => void };

When to use it

Your app already knows the address: a person paid with Apple Pay or Google Pay while signed out and the wallet handed it over, or they followed an invite. Right after that step you want them signed in with one move, the code in their inbox, in a block short enough to sit under other content. <ElvixSignInForm> is the whole front door (every method, the header, the footer); this is the one step that is left.

Sign-in is sign-up, as everywhere in elvix: an address nobody signed in with yet creates the account.

Props

What it does

• One code per address. The code goes out when the block mounts, and never again for a remount, React StrictMode's double effect or a reload while the code is still good (it is kept in sessionStorage for nine of its ten minutes). Send again is the only way to a second one, after the same cooldown as the form.
• Use another email turns the block into an email field and Continue, in the same frame; the code goes to that address. Back returns to the code already sent. A wallet can hand over an address the person does not read, so this way out is always there.
• The code verifies at the sixth digit, typed, pasted or filled in by the phone's one-time-code suggestion. The boxes are one labelled group, described by the line that says where the code went, and that line and every error are announced.
• Onboarding happens in the block, with the sign-in form's own panes: pick a username, add a passkey, restore a membership. deferOnboarding signs in at once instead of offering the first two.
• It never navigates. onSignedIn is where you do what comes next; the block then shows signedIn, or nothing.
• DPoP works as in the form: with dpopEnabled on, the session binds to this browser's key the moment it is created.

Errors

Every failure is shown in the block with its cause and what to do, and reported to onResult with its code.

Preview mode

To show the flow to someone who is not signing in (an organizer previewing what a buyer sees), draw it in preview mode. It hits no endpoint and sends no email.

// What the buyer will see, drawn for someone who is not buying: no request,
// no email, the given address and a filled-in code.
<ElvixEmailCodeSignIn mode="preview" email="[email protected]" />

// Any pane: "code" (default), "email", "username", "passkey", "recover".
<ElvixEmailCodeSignIn mode="preview" previewStep="username" email="[email protected]" />

Look

No card, logo, method list or footer: your card is the frame, with its own padding; the block is one column with one gap, so a title or line left out leaves no space behind. Colours follow the provider and the Console like the form. The fields are a tint of the text colour with no outline, and a thin brand border when focused. Every part of that look is a variable, set on any ancestor; the fields are plain CSS, so no stylesheet order can override them. Words come from the provider's messages (signin.codeSentSubtitle, signin.sendAgain, signin.useAnotherEmail and the rest), like every SDK string.

/* On any ancestor of the block; every one is optional. */
.ticket-card {
  --elvix-field: var(--muted);             /* fill */
  --elvix-field-hover: var(--accent);      /* fill under the pointer */
  --elvix-field-border: transparent;       /* outline at rest */
  --elvix-field-focus: var(--ring);        /* outline when focused */
  --elvix-field-focus-ring: none;          /* a ring around a focused field */
  --elvix-field-radius: 12px;
  --elvix-field-text: var(--foreground);
}