Skip to content
SLICES / TECHNICAL FOLIO Nº 001FULL-STACK ASSEMBLIES — OPEN SOURCE
slices.sh

Headless / Authentication

Create an account

Create an account, collect profile details, and verify its email or phone.

49 public parts · 1examples

@slices.sh/auth/headlessView as Markdown ↗

Your design. Our behavior.

Explore the tree to see what each part controls. Gates reveal the relevant state; roots outline their scope.

Behavior / inputGateGenericRenderer · not headlessScope
COMPONENT ANATOMYHover · focus · tap
ONE POSSIBLE DESIGNStatic preview

SignUp.Root · Scope

SignUp.RootAs in SignIn: Step gates on the sign-up steps, Status speaks, Error reports the current step, RetryAfter waits out a rate limit, Restart returns to details.

Sign inRecover accessProfile and contact detailsAccount menuPasswordConnected accountsActive sessionsDelete accountSwitch or create a workspaceWorkspace settingsMembersInvitationsJoin requestsDomain access

Installation

Choose what your component needs. Run these commands in an initialized Next.js app.

0

Before you start

The steps below run in a Next.js app with shadcn set up (it has a components.json). In an existing Next.js app, such as one from create-next-app, set shadcn up first:

npx shadcn@latest init -t next -b base -p nova

Or start fresh: the slices CLI creates the app and sets it up.

npx slices.sh install
1

Install the service registry

Adds services/index.ts, which import "@/services" loads. A provider setup writes the same file, so skip this if your app has one.

npx add services
2

Install the headless library

npm

Add the React parts to your app, then compose them with your own elements.

npm install @slices.sh/auth@^0.1.10

Import from @slices.sh/auth/headless.

3

Install the service

Connect the parts to a provider. Skip this step if this service is already configured in your app.

Provider
Database
Authentication methods
Account capabilities
npx add auth.betterauth

Adds service configuration and API routes to your app, with the provider dependencies. For a headless composition, add import "@/services" after "use client".

The slices CLI installs the service and provisions its required resources in one command.

Set BETTER_AUTH_URL to your app origin. Memory is for local development; use a persistent database for deployment. Neon and Supabase also require the migration script printed by the installer.

Provider setup notes
  • BETTER_AUTH_SECRET signs every session and is generated into .env.local while this installs (32 random bytes, base64, nothing leaves the machine). Changing it signs everyone out; in production set the same one on every instance.
  • The public origin (OAuth callbacks, the passkey domain) is the one each request comes to in development, and the deployment's own on Vercel. Elsewhere, or behind a proxy or a custom domain, set BETTER_AUTH_URL, such as https://acme.com.

Start small

Parts bring the behavior. Use their default elements, or supply your own with render.

example.tsx
"use client"import "@/services"import { SignUp } from "@slices.sh/auth/headless"export function Example() {  return (    <SignUp.Root emailPassword>      <SignUp.Form>        <SignUp.Label field="email">Email</SignUp.Label>        <SignUp.Email />        <SignUp.Label field="password">Password</SignUp.Label>        <SignUp.NewPassword />        <SignUp.Submit>Create account</SignUp.Submit>        <SignUp.Error />      </SignUp.Form>    </SignUp.Root>  )}

Enable password in the auth config. Add code-verification steps when the provider requires verification.

API reference

Every public part used by this experience is listed below. Gates render children without adding an element. Element parts accept native element props and render; function children receive the state declared in their props. Scopes provide context rather than a visual element.

SignUp.LastUsedcontent · <span>

A label for a supported method that previously completed a login in this browser.

Capability: methods: oauth

Props

3 documented props · Native <span> attributes supported

SignUp.LastUsed props
PropTypeDefault
methodRequired
OAuthProvider | "passkey"—
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.LastUsed from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/last-used.tsx

SignUp.SignInInsteadaction · <button>

Offer a way in only after the backend explicitly reports an existing account.

Required scope

SignUp.SignInInstead requires SignUp.Root.

Props

3 documented props · Native <button> attributes supported

SignUp.SignInInstead props
PropTypeDefault
onSignIn
(email: string) => void—
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.SignInInstead from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/sign-in-instead.tsx

SignUp.Viewportcontent · <div>

As in SignIn: Step gates on the sign-up steps, Status speaks, Error reports the current step, RetryAfter waits out a rate limit, Restart returns to details.

Props

2 documented props · Native <div> attributes supported

SignUp.Viewport props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Viewport from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/viewport.tsx

SignUp.CodeFeedbackcontent · <div>

As in SignIn. When the address already has an account, the code signs that person in instead.

Capability: methods: email-code or phone-code

Props

2 documented props · Native <div> attributes supported

SignUp.CodeFeedback props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { invalid: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.CodeFeedback from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/code-feedback.tsx

SignUp.RetryAftercontent · <p>

As in SignIn: Step gates on the sign-up steps, Status speaks, Error reports the current step, RetryAfter waits out a rate limit, Restart returns to details.

Props

2 documented props · Native <p> attributes supported

SignUp.RetryAfter props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { seconds: number }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.RetryAfter from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/retry-after.tsx

SignUp.CapsLockcontent · <p>

NewPassword is <input type="password" autocomplete="new-password"> with passwordrules from the backend's policy. PasswordStrength is a meter with data-level 0 to 4 once a score is known, StrengthSegment one bar of it, PasswordRequirement rule="length" | "strength" one rule with data-state met or unmet, PasswordFeedback the estimator's own advice. BreachCheck says the backend checks new passwords against breaches, and nothing where it does not. Submit creates the account, refusing and focusing the field to fix until the address, the password and the terms are acceptable.

Capability: methods: password

Required scope

CapsLock must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <p> attributes supported

SignUp.CapsLock props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { active: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.CapsLock from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/caps-lock.tsx

SignUp.ChallengeTitlecontent · <h2>

`inTerminal`: development with nothing set up to send codes; the code was printed where the app runs.

Capability: methods: email-code or phone-code

Required scope

ChallengeTitle needs SignIn.Root or SignUp.Root.

Props

2 documented props · Native <h2> attributes supported

SignUp.ChallengeTitle props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { multiple: boolean; channel: "email" | "sms"; inTerminal: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.ChallengeTitle from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/challenge-title.tsx

SignUp.Providerscontent · <div>

As in SignIn. With Terms rendered, OAuth refuses until they are accepted.

Capability: methods: oauth

Props

4 documented props · Native <div> attributes supported

SignUp.Providers props
PropTypeDefault
providersRequired
readonly OAuthProvider[]—
layout
"auto" | "full" | "icons""auto"
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Providers from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/providers.tsx

SignUp.MethodSeparatorcontent · <div>

As in SignIn. With Terms rendered, OAuth refuses until they are accepted.

Capability: methods: oauth

Required scope

MethodSeparator needs SignIn.Root or SignUp.Root.

Props

4 documented props · Native <div> attributes supported

SignUp.MethodSeparator props
PropTypeDefault
beforeRequired
readonly Method[]—
after
"passkey" | "channels""channels"
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.MethodSeparator from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/method-separator.tsx

SignUp.ChallengeChannelcontent

As in SignIn. When the address already has an account, the code signs that person in instead.

Capability: methods: email-code or phone-code

Required scope

ChallengeChannel needs SignIn.Root or SignUp.Root.

Props

3 documented props

SignUp.ChallengeChannel props
PropTypeDefault
channelRequired
"email" | "sms"—
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.ChallengeChannel from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/challenge-channel.tsx

SignUp.ChallengeInputinput · <input>

As in SignIn. When the address already has an account, the code signs that person in instead.

Capability: methods: email-code or phone-code

Required scope

ChallengeInput needs SignIn.Root or SignUp.Root.

Props

2 documented props · Native <input> attributes supported

SignUp.ChallengeInput props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.ChallengeInput from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/challenge-input.tsx

SignUp.Rootscope

As in SignIn: Step gates on the sign-up steps, Status speaks, Error reports the current step, RetryAfter waits out a rate limit, Restart returns to details.

Props

8 documented props

SignUp.Root props
PropTypeDefault
onSignedUp
(destination: string) => void—
collectName
booleanfalse
hasTasks
booleanfalse
channels
readonly OtpChannel[]—
emailPassword
boolean—
config

The auth config, a slug from the registry (services/auth/<config>.config.ts). The nearest root's, else "default", when left out.

string—
enabled

Left out or true: required, and missing auth throws. "optional": renders its children and every part inside degrades without auth. false: off. A capability name such as "methods: password": requires auth with it.

Enabled—
children

Content rendered inside this part.

ReactNode—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Root from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/root.tsx

SignUp.ChannelPanelcontent · <div>

As in SignIn.

Required scope

SignIn.ChannelPanel must be inside a sign-in or sign-up Root.

Props

3 documented props · Native <div> attributes supported

SignUp.ChannelPanel props
PropTypeDefault
channelRequired
"email" | "sms"—
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.ChannelPanel from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/channel-panel.tsx

SignUp.ChannelTriggeraction · <button>

As in SignIn.

Required scope

SignIn.ChannelTrigger must be inside a sign-in or sign-up Root.

Props

3 documented props · Native <button> attributes supported

SignUp.ChannelTrigger props
PropTypeDefault
channelRequired
"email" | "sms"—
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.ChannelTrigger from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/channel-trigger.tsx

SignUp.ChannelListcontent · <div>

As in SignIn.

Required scope

SignIn.ChannelList must be inside a sign-in or sign-up Root.

Props

2 documented props · Native <div> attributes supported

SignUp.ChannelList props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.ChannelList from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/channel-list.tsx

SignUp.Channelscontent · <div>

As in SignIn.

Required scope

SignIn.Channels must be inside a sign-in or sign-up Root.

Props

2 documented props · Native <div> attributes supported

SignUp.Channels props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Channels from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/channels.tsx

SignUp.Stepgate

As in SignIn: Step gates on the sign-up steps, Status speaks, Error reports the current step, RetryAfter waits out a rate limit, Restart returns to details.

Required scope

SignUp.Step requires SignUp.Root.

Props

3 documented props

SignUp.Step props
PropTypeDefault
nameRequired
"details" | "code" | "locked" | "expired" | "signed-up" | "profile" | "tasks"—
children

Content rendered inside this part.

ReactNode—
render
ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Step from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/step.tsx

SignUp.Statuscontent · <p>

As in SignIn: Step gates on the sign-up steps, Status speaks, Error reports the current step, RetryAfter waits out a rate limit, Restart returns to details.

Required scope

Status must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <p> attributes supported

SignUp.Status props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { pending: boolean; attempts: StatusAttempts | null }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Status from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/status.tsx

SignUp.Formaction · <form>

Form and Label as in SignIn, with field="name" | "email" | "phone" | "password" | "terms" | "code". Name is optional and passed along by a code sign-up too. Email is also invalid when the address already has an account, and SignInInstead then offers a way in with that address. Terms is a required checkbox: while rendered, Submit, SendCode and OAuth refuse until it is checked.

Required scope

Form must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <form> attributes supported

SignUp.Form props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { pending: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Form from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/form.tsx

SignUp.Labelcontent · <label>

Form and Label as in SignIn, with field="name" | "email" | "phone" | "password" | "terms" | "code". Name is optional and passed along by a code sign-up too. Email is also invalid when the address already has an account, and SignInInstead then offers a way in with that address. Terms is a required checkbox: while rendered, Submit, SendCode and OAuth refuse until it is checked.

Required scope

Label field=

Props

3 documented props · Native <label> attributes supported

SignUp.Label props
PropTypeDefault
fieldRequired
LabelField—
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Label from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/label.tsx

SignUp.Nameinput · <input>

Form and Label as in SignIn, with field="name" | "email" | "phone" | "password" | "terms" | "code". Name is optional and passed along by a code sign-up too. Email is also invalid when the address already has an account, and SignInInstead then offers a way in with that address. Terms is a required checkbox: while rendered, Submit, SendCode and OAuth refuse until it is checked.

Required scope

SignUp.Name must be inside <SignUp.Root>.

Props

2 documented props · Native <input> attributes supported

SignUp.Name props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Name from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/name.tsx

SignUp.Continueaction · <button>

The profile and tasks steps. SaveProfile stores the name typed in the profile step, and ProfileError reports its refusal. Tasks gates the host's own next steps, and Continue finishes them and calls onSignedUp.

Required scope

SignUp.Continue requires SignUp.Root.

Props

2 documented props · Native <button> attributes supported

SignUp.Continue props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Continue from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/continue.tsx

SignUp.Tasksgate

Host-owned next steps; the host decides when Continue is available.

Props

1 documented props

SignUp.Tasks props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Tasks from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/tasks.tsx

SignUp.ProfileErrorcontent · <div>

The profile and tasks steps. SaveProfile stores the name typed in the profile step, and ProfileError reports its refusal. Tasks gates the host's own next steps, and Continue finishes them and calls onSignedUp.

Required scope

SignUp.ProfileError requires SignUp.Root.

Props

2 documented props · Native <div> attributes supported

SignUp.ProfileError props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { message: string }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.ProfileError from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/profile-error.tsx

SignUp.SaveProfileaction · <button>

The profile and tasks steps. SaveProfile stores the name typed in the profile step, and ProfileError reports its refusal. Tasks gates the host's own next steps, and Continue finishes them and calls onSignedUp.

Required scope

SignUp.SaveProfile requires SignUp.Root.

Props

2 documented props · Native <button> attributes supported

SignUp.SaveProfile props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { pending: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.SaveProfile from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/save-profile.tsx

SignUp.BreachCheckcontent · <p>

A declared submission-time check, never a live claim that this draft is safe.

Capability: methods: password

Props

2 documented props · Native <p> attributes supported

SignUp.BreachCheck props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.BreachCheck from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/breach-check.tsx

SignUp.Emailinput · <input>

Form and Label as in SignIn, with field="name" | "email" | "phone" | "password" | "terms" | "code". Name is optional and passed along by a code sign-up too. Email is also invalid when the address already has an account, and SignInInstead then offers a way in with that address. Terms is a required checkbox: while rendered, Submit, SendCode and OAuth refuse until it is checked.

Required scope

Email must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <input> attributes supported

SignUp.Email props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { invalid: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Email from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/email.tsx

SignUp.OpenInboxcontent · <a>

Form and Label as in SignIn, with field="name" | "email" | "phone" | "password" | "terms" | "code". Name is optional and passed along by a code sign-up too. Email is also invalid when the address already has an account, and SignInInstead then offers a way in with that address. Terms is a required checkbox: while rendered, Submit, SendCode and OAuth refuse until it is checked.

Required scope

OpenInbox requires SignIn.Root or SignUp.Root.

Props

2 documented props · Native <a> attributes supported

SignUp.OpenInbox props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { name: string }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.OpenInbox from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/open-inbox.tsx

SignUp.EmailSuggestionaction · <button>

Form and Label as in SignIn, with field="name" | "email" | "phone" | "password" | "terms" | "code". Name is optional and passed along by a code sign-up too. Email is also invalid when the address already has an account, and SignInInstead then offers a way in with that address. Terms is a required checkbox: while rendered, Submit, SendCode and OAuth refuse until it is checked.

Required scope

EmailSuggestion requires SignIn.Root or SignUp.Root.

Props

2 documented props · Native <button> attributes supported

SignUp.EmailSuggestion props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { suggestion: string }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.EmailSuggestion from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/email-suggestion.tsx

SignUp.PhoneRootscope

The phone number and its country list, kept in the card's phone field as an E.164 number or as nothing at all. Renders nothing itself, and nothing inside it when the backend sends no codes by text. The card's field keeps the id, so its label and the focus a refused send asks for find the number's input without knowing a country list is there.

Capability: methods: phone-code

Required scope

SignIn.PhoneRoot must be inside <SignIn.Root> or <SignUp.Root>.

Props

4 documented props

SignUp.PhoneRoot props
PropTypeDefault
defaultCountry

Where a number typed without a + is read until a country is picked. ISO 3166-1 alpha-2.

string—
allowedCountries

The countries a number may be in, which are also the ones the list offers. Without it, every country.

readonly string[]—
locale
string—
children

Content rendered inside this part.

ReactNode—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.PhoneRoot from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/phone-root.tsx

SignUp.Phoneinput · <input>

The number, typed in its country's own format. It sits inside `SignIn.PhoneRoot`, which is where the country list is too, and says "invalid" for the refusals the number's own reading cannot know about.

Capability: methods: phone-code

Required scope

Phone must be inside <SignIn.Root> or <SignUp.Root>.

Props

3 documented props · Native <input> attributes supported

SignUp.Phone props
PropTypeDefault
invalidMessage
string—
children

Content rendered inside this part.

ReactNode | ((state: { invalid: boolean; status: PhoneStatus }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Phone from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/sign-in-phone.tsx

SignUp.NewPasswordinput · <input>

NewPassword is <input type="password" autocomplete="new-password"> with passwordrules from the backend's policy. PasswordStrength is a meter with data-level 0 to 4 once a score is known, StrengthSegment one bar of it, PasswordRequirement rule="length" | "strength" one rule with data-state met or unmet, PasswordFeedback the estimator's own advice. BreachCheck says the backend checks new passwords against breaches, and nothing where it does not. Submit creates the account, refusing and focusing the field to fix until the address, the password and the terms are acceptable.

Capability: methods: password

Required scope

SignUp.NewPassword must be inside <SignUp.Root>.

Props

2 documented props · Native <input> attributes supported

SignUp.NewPassword props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { invalid: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.NewPassword from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/new-password.tsx

SignUp.RevealPasswordaction · <button>

Shows or hides what was typed into the password field. No `aria-pressed`: its own name changes, and a button announced as "Hide password, pressed" says the same thing twice in opposite directions.

Capability: methods: password

Required scope

SignIn.RevealPassword must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <button> attributes supported

SignUp.RevealPassword props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { visible: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.RevealPassword from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/reveal-password.tsx

SignUp.PasswordStrengthcontent · <div>

The meter over a new password: `data-level` is the score, 0 to 4, and absent until one is known. Absent over an empty field too. A meter that says "very weak" before anything has been typed is a screen telling somebody off for not having started.

Capability: methods: password

Required scope

PasswordStrength must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <div> attributes supported

SignUp.PasswordStrength props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { score: number | null; levels: number }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.PasswordStrength from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/password-strength.tsx

SignUp.StrengthSegmentcontent · <span>

One bar of the meter, repeated once per level. The count comes from the estimator's own scale rather than from the card, so a skin cannot draw five bars over a score that only goes to four.

Capability: methods: password

Required scope

StrengthSegment must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <span> attributes supported

SignUp.StrengthSegment props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { index: number; filled: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.StrengthSegment from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/strength-segment.tsx

SignUp.PasswordFeedbackcontent · <p>

What the estimator would say about this password, in its own words. Its sentences come from the language pack, so they are already the person's language and are not repeated in `copy`. Absent until there is something to say: a strong password earns no advice, and an empty field has not been judged.

Capability: methods: password

Required scope

PasswordFeedback must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <p> attributes supported

SignUp.PasswordFeedback props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { warning: string | null; suggestions: readonly string[] }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.PasswordFeedback from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/password-feedback.tsx

SignUp.PasswordRequirementcontent · <li>

One rule a new password has to meet, said out loud rather than discovered by being refused. The numbers are the backend's, read from the capability, so the sentence and the refusal can never disagree. `data-state` is `met` or `unmet`, which is what a skin ticks off. A rule the backend does not have is absent: a "hard to guess" line over a backend that accepts anything would be a promise nobody keeps.

Capability: methods: password

Required scope

PasswordRequirement must be inside <SignIn.Root> or <SignUp.Root>.

Props

3 documented props · Native <li> attributes supported

SignUp.PasswordRequirement props
PropTypeDefault
ruleRequired
"length" | "strength"—
children

Content rendered inside this part.

ReactNode | ((state: State) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.PasswordRequirement from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/password-requirement.tsx

SignUp.Termsinput · <input>

Form and Label as in SignIn, with field="name" | "email" | "phone" | "password" | "terms" | "code". Name is optional and passed along by a code sign-up too. Email is also invalid when the address already has an account, and SignInInstead then offers a way in with that address. Terms is a required checkbox: while rendered, Submit, SendCode and OAuth refuse until it is checked.

Required scope

SignUp.Terms must be inside <SignUp.Root>.

Props

2 documented props · Native <input> attributes supported

SignUp.Terms props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { checked: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Terms from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/terms.tsx

SignUp.Submitaction · <button>

NewPassword is <input type="password" autocomplete="new-password"> with passwordrules from the backend's policy. PasswordStrength is a meter with data-level 0 to 4 once a score is known, StrengthSegment one bar of it, PasswordRequirement rule="length" | "strength" one rule with data-state met or unmet, PasswordFeedback the estimator's own advice. BreachCheck says the backend checks new passwords against breaches, and nothing where it does not. Submit creates the account, refusing and focusing the field to fix until the address, the password and the terms are acceptable.

Capability: methods: password

Required scope

SignUp.Submit must be inside <SignUp.Root>.

Props

2 documented props · Native <button> attributes supported

SignUp.Submit props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { pending: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Submit from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-up/submit.tsx

SignUp.OAuthaction · <button>

As in SignIn. With Terms rendered, OAuth refuses until they are accepted.

Capability: methods: oauth

Required scope

OAuth must be inside <SignIn.Root> or <SignUp.Root>.

Props

4 documented props · Native <button> attributes supported

SignUp.OAuth props
PropTypeDefault
providerRequired
OAuthProvider—
callbackURL

Where the provider sends the person back; the backend's default when left out.

string—
children

Content rendered inside this part.

ReactNode | ((state: { pending: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.OAuth from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/oauth.tsx

SignUp.SendCodeaction · <button>

As in SignIn. When the address already has an account, the code signs that person in instead.

Capability: methods: email-code or phone-code

Required scope

SendCode must be inside <SignIn.Root> or <SignUp.Root>.

Props

3 documented props · Native <button> attributes supported

SignUp.SendCode props
PropTypeDefault
channel
"email" | "sms""email"
children

Content rendered inside this part.

ReactNode | ((state: { pending: boolean; cooldown: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.SendCode from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/send-code.tsx

SignUp.Destinationcontent

As in SignIn. When the address already has an account, the code signs that person in instead.

Capability: methods: email-code or phone-code

Required scope

Destination must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props

SignUp.Destination props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Destination from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/destination.tsx

SignUp.CodeInputinput · <input>

As in SignIn. When the address already has an account, the code signs that person in instead.

Capability: methods: email-code or phone-code

Required scope

CodeInput must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <input> attributes supported

SignUp.CodeInput props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { invalid: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.CodeInput from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/code-input.tsx

SignUp.VerifyCodeaction · <button>

As in SignIn. When the address already has an account, the code signs that person in instead.

Capability: methods: email-code or phone-code

Required scope

VerifyCode must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <button> attributes supported

SignUp.VerifyCode props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { pending: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.VerifyCode from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/verify-code.tsx

SignUp.Verifyinggate

As in SignIn. When the address already has an account, the code signs that person in instead.

Capability: methods: email-code or phone-code

Required scope

Verifying must be inside <SignIn.Root> or <SignUp.Root>.

Props

1 documented props

SignUp.Verifying props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Verifying from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/verifying.tsx

SignUp.ResendCodeaction · <button>

As in SignIn. When the address already has an account, the code signs that person in instead.

Capability: methods: email-code or phone-code

Required scope

ResendCode must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <button> attributes supported

SignUp.ResendCode props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { seconds: number; pending: boolean; exhausted: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.ResendCode from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/resend-code.tsx

SignUp.AttemptsRemainingcontent · <p>

As in SignIn. When the address already has an account, the code signs that person in instead.

Capability: methods: email-code or phone-code

Required scope

AttemptsRemaining must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <p> attributes supported

SignUp.AttemptsRemaining props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { remaining: number; limit: number }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.AttemptsRemaining from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/attempts-remaining.tsx

SignUp.Restartaction · <button>

As in SignIn: Step gates on the sign-up steps, Status speaks, Error reports the current step, RetryAfter waits out a rate limit, Restart returns to details.

Required scope

Restart must be inside <SignIn.Root> or <SignUp.Root>.

Props

2 documented props · Native <button> attributes supported

SignUp.Restart props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Restart from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/restart.tsx

SignUp.Errorcontent · <div>

As in SignIn: Step gates on the sign-up steps, Status speaks, Error reports the current step, RetryAfter waits out a rate limit, Restart returns to details.

Props

2 documented props · Native <div> attributes supported

SignUp.Error props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { code: AuthErrorCode; message: string }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • SignUp.Error from @slices.sh/auth/headless/sign-up

Source: @slices.sh/auth/src/headless/sign-in/error.tsx

Authentication.Modegate

Mode gates on name="sign-in" | "sign-up", so the hidden flow is unmounted, not hidden. Switch is a button with to="sign-in" | "sign-up", and renders nothing in the flow it points to.

Required scope

Authentication.Mode must be inside <Authentication.Root>.

Props

2 documented props

Authentication.Mode props
PropTypeDefault
nameRequired
"sign-in" | "sign-up"—
children

Content rendered inside this part.

ReactNode—

Required props are marked. A dash means no explicit default is declared in this component.

Alternate public imports
  • Authentication.Mode from @slices.sh/auth/headless/authentication

Source: @slices.sh/auth/src/headless/authentication/mode.tsx

When something is missing

No service configuration
Install the auth setup below and import "@/services". Required service roots report missing setup; gates do not replace that configuration.
Missing capability or parent scope
Follow each part’s context requirements and the example composition. Capability-aware controls hide when the provider cannot perform their action.
Read the setup guide →