# Create an account

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

Import: @slices.sh/auth/headless

Public parts: 49

## Installation

### 1. Install the service registry

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

```bash
npx shadcn@latest add "https://slices.sh/r/services.json"
```

### 2. Install the headless library

```bash
npm install @slices.sh/auth@^0.1.10
```

### 3. Install the service

Install the provider configuration via shadcn or the slices CLI. Skip this step if your app already has the service configured. Provider commands and provisioning: https://slices.sh/docs/services/auth.md

## Anatomy

### Composition

```text
SignUp.Root
  SignUp.Viewport
    SignUp.Step name="details"
      SignUp.Channels
        SignUp.ChannelPanel channel="email"
          SignUp.Form
            SignUp.Name
            SignUp.Label field="email"
            SignUp.Email
            SignUp.EmailSuggestion
            SignUp.NewPassword
            SignUp.RevealPassword
            SignUp.CapsLock
            SignUp.PasswordStrength
              SignUp.StrengthSegment
            SignUp.PasswordFeedback
            SignUp.PasswordRequirement
            SignUp.BreachCheck
            SignUp.Terms
            SignUp.Submit
          SignUp.Error
          SignUp.SignInInstead
          Authentication.Mode name="sign-up"
        SignUp.ChannelPanel channel="sms"
          SignUp.PhoneRoot
            SignUp.Phone
          SignUp.SendCode
        SignUp.ChannelList
          SignUp.ChannelTrigger channel="sms"
      SignUp.Providers
        SignUp.OAuth provider="google"
          SignUp.LastUsed method="google"
      SignUp.MethodSeparator before={["google"]}
    SignUp.Step name="code"
      SignUp.Verifying
        SignUp.Status
      SignUp.ChallengeTitle
      SignUp.Destination
      SignUp.ChallengeChannel
        SignUp.ChallengeInput
        SignUp.CodeInput
      SignUp.CodeFeedback
      SignUp.AttemptsRemaining
      SignUp.VerifyCode
      SignUp.ResendCode
      SignUp.Restart
      SignUp.OpenInbox
    SignUp.Step name="locked"
      SignUp.RetryAfter
    SignUp.Step name="profile"
      SignUp.ProfileError
      SignUp.SaveProfile
    SignUp.Step name="tasks"
      SignUp.Tasks
        SignUp.Continue
    SignUp.Step name="expired"
    SignUp.Step name="signed-up"
```

## Minimal composition

```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.

## Complete API reference

### SignUp.LastUsed

content · Element: span

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

Import: @slices.sh/auth/headless

Capability: methods: oauth

```tsx
PartProps<"span"> & { method: OAuthProvider | "passkey" }
```

Alternate import: SignUp.LastUsed from @slices.sh/auth/headless/sign-up

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

### SignUp.SignInInstead

action · Element: button

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

Import: @slices.sh/auth/headless

SignUp.SignInInstead requires SignUp.Root.

```tsx
PartProps<"button"> & { onSignIn?: (email: string) => void }
```

Alternate import: SignUp.SignInInstead from @slices.sh/auth/headless/sign-up

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

### SignUp.Viewport

content · Element: 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.

Import: @slices.sh/auth/headless

```tsx
PartProps<"div">
```

Alternate import: SignUp.Viewport from @slices.sh/auth/headless/sign-up

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

### SignUp.CodeFeedback

content · Element: div

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

```tsx
PartProps<"div", { invalid: boolean }>
```

Alternate import: SignUp.CodeFeedback from @slices.sh/auth/headless/sign-up

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

### SignUp.RetryAfter

content · Element: 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.

Import: @slices.sh/auth/headless

```tsx
PartProps<"p", { seconds: number }>
```

Alternate import: SignUp.RetryAfter from @slices.sh/auth/headless/sign-up

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

### SignUp.CapsLock

content · Element: 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.

Import: @slices.sh/auth/headless

Capability: methods: password

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

```tsx
PartProps<"p", { active: boolean }>
```

Alternate import: SignUp.CapsLock from @slices.sh/auth/headless/sign-up

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

### SignUp.ChallengeTitle

content · Element: h2

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

ChallengeTitle needs SignIn.Root or SignUp.Root.

```tsx
PartProps<"h2", { multiple: boolean; channel: "email" | "sms"; inTerminal: boolean }>
```

Alternate import: SignUp.ChallengeTitle from @slices.sh/auth/headless/sign-up

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

### SignUp.Providers

content · Element: div

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

Import: @slices.sh/auth/headless

Capability: methods: oauth

```tsx
PartProps<"div"> & {
  providers: readonly OAuthProvider[]
  layout?: ProviderLayout
}

export type ProviderLayout = "auto" | "full" | "icons"
```

Alternate import: SignUp.Providers from @slices.sh/auth/headless/sign-up

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

### SignUp.MethodSeparator

content · Element: div

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

Import: @slices.sh/auth/headless

Capability: methods: oauth

MethodSeparator needs SignIn.Root or SignUp.Root.

```tsx
PartProps<"div"> & {
  before: readonly Method[]
  after?: "passkey" | "channels"
}

type Method = OAuthProvider | "passkey"
```

Alternate import: SignUp.MethodSeparator from @slices.sh/auth/headless/sign-up

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

### SignUp.ChallengeChannel

content

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

ChallengeChannel needs SignIn.Root or SignUp.Root.

```tsx
PartProps<null> & { channel: "email" | "sms" }
```

Alternate import: SignUp.ChallengeChannel from @slices.sh/auth/headless/sign-up

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

### SignUp.ChallengeInput

input · Element: input

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

ChallengeInput needs SignIn.Root or SignUp.Root.

```tsx
PartProps<"input">
```

Alternate import: SignUp.ChallengeInput from @slices.sh/auth/headless/sign-up

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

### SignUp.Root

scope

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.

Import: @slices.sh/auth/headless

```tsx
SignUpRootProps & AuthRootProps

type SignUpRootProps = RootProps & {
  onSignedUp?: (destination: string) => void
  collectName?: boolean
  hasTasks?: boolean
  channels?: readonly OtpChannel[]
  emailPassword?: boolean
}
```

Alternate import: SignUp.Root from @slices.sh/auth/headless/sign-up

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

### SignUp.ChannelPanel

content · Element: div

As in SignIn.

Import: @slices.sh/auth/headless

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

```tsx
PartProps<"div"> & { channel: OtpChannel }
```

Alternate import: SignUp.ChannelPanel from @slices.sh/auth/headless/sign-up

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

### SignUp.ChannelTrigger

action · Element: button

As in SignIn.

Import: @slices.sh/auth/headless

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

```tsx
PartProps<"button"> & { channel: OtpChannel }
```

Alternate import: SignUp.ChannelTrigger from @slices.sh/auth/headless/sign-up

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

### SignUp.ChannelList

content · Element: div

As in SignIn.

Import: @slices.sh/auth/headless

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

```tsx
PartProps<"div">
```

Alternate import: SignUp.ChannelList from @slices.sh/auth/headless/sign-up

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

### SignUp.Channels

content · Element: div

As in SignIn.

Import: @slices.sh/auth/headless

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

```tsx
PartProps<"div">
```

Alternate import: SignUp.Channels from @slices.sh/auth/headless/sign-up

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

### SignUp.Step

gate

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.

Import: @slices.sh/auth/headless

SignUp.Step requires SignUp.Root.

```tsx
GateProps & { name: SignUpStep; render?: ReactElement }

export type SignUpStep = "details" | "code" | "locked" | "expired" | "signed-up" | "profile" | "tasks"
```

Alternate import: SignUp.Step from @slices.sh/auth/headless/sign-up

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

### SignUp.Status

content · Element: 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.

Import: @slices.sh/auth/headless

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

```tsx
PartProps<"p", { pending: boolean; attempts: StatusAttempts | null }>

export type StatusAttempts = { remaining: number; limit: number }
```

Alternate import: SignUp.Status from @slices.sh/auth/headless/sign-up

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

### SignUp.Form

action · Element: 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.

Import: @slices.sh/auth/headless

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

```tsx
PartProps<"form", { pending: boolean }>
```

Alternate import: SignUp.Form from @slices.sh/auth/headless/sign-up

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

### SignUp.Label

content · Element: 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.

Import: @slices.sh/auth/headless

Label field=

```tsx
PartProps<"label"> & { field: LabelField }

export type LabelField = keyof typeof FIELDS
```

Alternate import: SignUp.Label from @slices.sh/auth/headless/sign-up

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

### SignUp.Name

input · Element: 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.

Import: @slices.sh/auth/headless

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

```tsx
PartProps<"input">
```

Alternate import: SignUp.Name from @slices.sh/auth/headless/sign-up

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

### SignUp.Continue

action · Element: 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.

Import: @slices.sh/auth/headless

SignUp.Continue requires SignUp.Root.

```tsx
PartProps<"button">
```

Alternate import: SignUp.Continue from @slices.sh/auth/headless/sign-up

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

### SignUp.Tasks

gate

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

Import: @slices.sh/auth/headless

```tsx
GateProps
```

Alternate import: SignUp.Tasks from @slices.sh/auth/headless/sign-up

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

### SignUp.ProfileError

content · Element: 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.

Import: @slices.sh/auth/headless

SignUp.ProfileError requires SignUp.Root.

```tsx
PartProps<"div", { message: string }>
```

Alternate import: SignUp.ProfileError from @slices.sh/auth/headless/sign-up

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

### SignUp.SaveProfile

action · Element: 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.

Import: @slices.sh/auth/headless

SignUp.SaveProfile requires SignUp.Root.

```tsx
PartProps<"button", { pending: boolean }>
```

Alternate import: SignUp.SaveProfile from @slices.sh/auth/headless/sign-up

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

### SignUp.BreachCheck

content · Element: p

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

Import: @slices.sh/auth/headless

Capability: methods: password

```tsx
PartProps<"p">
```

Alternate import: SignUp.BreachCheck from @slices.sh/auth/headless/sign-up

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

### SignUp.Email

input · Element: 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.

Import: @slices.sh/auth/headless

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

```tsx
PartProps<"input", { invalid: boolean }>
```

Alternate import: SignUp.Email from @slices.sh/auth/headless/sign-up

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

### SignUp.OpenInbox

content · Element: 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.

Import: @slices.sh/auth/headless

OpenInbox requires SignIn.Root or SignUp.Root.

```tsx
PartProps<"a", { name: string }>
```

Alternate import: SignUp.OpenInbox from @slices.sh/auth/headless/sign-up

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

### SignUp.EmailSuggestion

action · Element: 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.

Import: @slices.sh/auth/headless

EmailSuggestion requires SignIn.Root or SignUp.Root.

```tsx
PartProps<"button", { suggestion: string }>
```

Alternate import: SignUp.EmailSuggestion from @slices.sh/auth/headless/sign-up

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

### SignUp.PhoneRoot

scope

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.

Import: @slices.sh/auth/headless

Capability: methods: phone-code

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

```tsx
PhoneRootProps

type PhoneRootProps = RootProps & {
  /** Where a number typed without a `+` is read until a country is picked. ISO 3166-1 alpha-2. */
  defaultCountry?: string
  /** The countries a number may be in, which are also the ones the list offers. Without it, every country. */
  allowedCountries?: readonly string[]
  locale?: string
}
```

Alternate import: SignUp.PhoneRoot from @slices.sh/auth/headless/sign-up

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

### SignUp.Phone

input · Element: 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.

Import: @slices.sh/auth/headless

Capability: methods: phone-code

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

```tsx
PartProps<"input", { invalid: boolean; status: PhoneStatus }> & { invalidMessage?: string }
```

Alternate import: SignUp.Phone from @slices.sh/auth/headless/sign-up

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

### SignUp.NewPassword

input · Element: 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.

Import: @slices.sh/auth/headless

Capability: methods: password

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

```tsx
PartProps<"input", { invalid: boolean }>
```

Alternate import: SignUp.NewPassword from @slices.sh/auth/headless/sign-up

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

### SignUp.RevealPassword

action · Element: 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.

Import: @slices.sh/auth/headless

Capability: methods: password

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

```tsx
PartProps<"button", { visible: boolean }>
```

Alternate import: SignUp.RevealPassword from @slices.sh/auth/headless/sign-up

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

### SignUp.PasswordStrength

content · Element: 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.

Import: @slices.sh/auth/headless

Capability: methods: password

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

```tsx
PartProps<"div", { score: number | null; levels: number }>
```

Alternate import: SignUp.PasswordStrength from @slices.sh/auth/headless/sign-up

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

### SignUp.StrengthSegment

content · Element: 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.

Import: @slices.sh/auth/headless

Capability: methods: password

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

```tsx
Props

type Props = PartProps<"span", { index: number; filled: boolean }>
```

Alternate import: SignUp.StrengthSegment from @slices.sh/auth/headless/sign-up

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

### SignUp.PasswordFeedback

content · Element: 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.

Import: @slices.sh/auth/headless

Capability: methods: password

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

```tsx
PartProps<"p", { warning: string | null; suggestions: readonly string[] }>
```

Alternate import: SignUp.PasswordFeedback from @slices.sh/auth/headless/sign-up

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

### SignUp.PasswordRequirement

content · Element: 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.

Import: @slices.sh/auth/headless

Capability: methods: password

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

```tsx
PartProps<"li", State> & { rule: PasswordRule }

export type PasswordRule = "length" | "strength"

type State = { met: boolean; minLength: number; maxLength: number }
```

Alternate import: SignUp.PasswordRequirement from @slices.sh/auth/headless/sign-up

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

### SignUp.Terms

input · Element: 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.

Import: @slices.sh/auth/headless

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

```tsx
PartProps<"input", { checked: boolean }>
```

Alternate import: SignUp.Terms from @slices.sh/auth/headless/sign-up

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

### SignUp.Submit

action · Element: 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.

Import: @slices.sh/auth/headless

Capability: methods: password

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

```tsx
PartProps<"button", { pending: boolean }>
```

Alternate import: SignUp.Submit from @slices.sh/auth/headless/sign-up

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

### SignUp.OAuth

action · Element: button

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

Import: @slices.sh/auth/headless

Capability: methods: oauth

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

```tsx
OAuthProps

type OAuthProps = PartProps<"button", { pending: boolean }> & {
  provider: OAuthProvider
  // Where the provider sends the person back; the backend's default when left out.
  callbackURL?: string
}
```

Alternate import: SignUp.OAuth from @slices.sh/auth/headless/sign-up

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

### SignUp.SendCode

action · Element: button

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

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

```tsx
SendCodeProps

type SendCodeProps = PartProps<"button", { pending: boolean; cooldown: boolean }> & { channel?: OtpChannel }
```

Alternate import: SignUp.SendCode from @slices.sh/auth/headless/sign-up

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

### SignUp.Destination

content

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

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

```tsx
PartProps<null>
```

Alternate import: SignUp.Destination from @slices.sh/auth/headless/sign-up

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

### SignUp.CodeInput

input · Element: input

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

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

```tsx
PartProps<"input", { invalid: boolean }>
```

Alternate import: SignUp.CodeInput from @slices.sh/auth/headless/sign-up

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

### SignUp.VerifyCode

action · Element: button

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

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

```tsx
PartProps<"button", { pending: boolean }>
```

Alternate import: SignUp.VerifyCode from @slices.sh/auth/headless/sign-up

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

### SignUp.Verifying

gate

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

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

```tsx
GateProps
```

Alternate import: SignUp.Verifying from @slices.sh/auth/headless/sign-up

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

### SignUp.ResendCode

action · Element: button

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

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

```tsx
PartProps<"button", { seconds: number; pending: boolean; exhausted: boolean }>
```

Alternate import: SignUp.ResendCode from @slices.sh/auth/headless/sign-up

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

### SignUp.AttemptsRemaining

content · Element: p

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

Import: @slices.sh/auth/headless

Capability: methods: email-code or phone-code

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

```tsx
PartProps<"p", { remaining: number; limit: number }>
```

Alternate import: SignUp.AttemptsRemaining from @slices.sh/auth/headless/sign-up

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

### SignUp.Restart

action · Element: 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.

Import: @slices.sh/auth/headless

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

```tsx
PartProps<"button">
```

Alternate import: SignUp.Restart from @slices.sh/auth/headless/sign-up

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

### SignUp.Error

content · Element: 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.

Import: @slices.sh/auth/headless

```tsx
PartProps<"div", { code: AuthErrorCode; message: string }>
```

Alternate import: SignUp.Error from @slices.sh/auth/headless/sign-up

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

### Authentication.Mode

gate

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.

Import: @slices.sh/auth/headless

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

```tsx
GateProps & { name: AuthMode }
```

Alternate import: Authentication.Mode from @slices.sh/auth/headless/authentication

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