Sign in

IdentifierStage gates on stage="identify" | "method" in the identifier-first flow and renders both in the other. Continue checks the address and moves on, focusing the field when it is not valid. IdentifierPill shows { email } and goes back to change it. SignUpLink is the host's registration link, and nothing without password support.

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

IdentifierStage gates on stage="identify" | "method" in the identifier-first flow and renders both in the other. Continue checks the address and moves on, focusing the field when it is not valid. IdentifierPill shows { email } and goes back to change it. SignUpLink is the host's registration link, and nothing without password support.

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

IdentifierStage gates on stage="identify" | "method" in the identifier-first flow and renders both in the other. Continue checks the address and moves on, focusing the field when it is not valid. IdentifierPill shows { email } and goes back to change it. SignUpLink is the host's registration link, and nothing without password support.

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

Step gates on name and accepts render={<MotionPanel />} to animate; without render it is a wrapper-free gate. Status is the one polite live region, mounted for the card's life, that speaks waits and the attempt budget. Viewport is a plain container for animated steps. Error is <div role="alert"> with { code, message }, only for the current step's last failed action. RetryAfter gets { seconds } while a rate limit holds. Restart returns to identify and drops the challenge.

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

SendCode is a submit with { pending, cooldown } and channel="email" | "sms"; it refuses and focuses the field when the address is invalid, and renders nothing without that channel. The rest render only once a code was sent. Destination is the address it went to; ChallengeTitle gets { multiple, channel }; ChallengeChannel gates on the channel; ChallengeInput shows the address read-only. CodeInput is a numeric one-time-code input with maxLength locked, verifying once complete; VerifyCode is for a pasted code; Verifying stands where a spinner would be. ResendCode gets { seconds, pending }. AttemptsRemaining gets { remaining, limit } after the first wrong code. CodeFeedback gets { invalid } for a wrong code.

Capability: methods: email-code or phone-code

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

Step gates on name and accepts render={<MotionPanel />} to animate; without render it is a wrapper-free gate. Status is the one polite live region, mounted for the card's life, that speaks waits and the attempt budget. Viewport is a plain container for animated steps. Error is <div role="alert"> with { code, message }, only for the current step's last failed action. RetryAfter gets { seconds } while a rate limit holds. Restart returns to identify and drops the challenge.

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

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

Capability: methods: oauth

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

The host owns the registration route; no link is offered without password support.

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

Password is <input type="password" autocomplete="current-password"> with { invalid }. RevealPassword toggles visibility with { visible }. CapsLock is <p role="status"> with { active }: keep it mounted and return empty content while inactive. PasswordStrength, StrengthSegment, PasswordFeedback and PasswordRequirement describe a new password, here the one set by a reset. PasswordSubmit is disabled until the address is valid and a password is typed.

Capability: methods: password

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

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

Capability: methods: email-code or phone-code

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

OAuth is <button type="button"> with { pending }, provider="google" | "github" and callbackURL; it renders nothing for a provider the backend lacks. Providers wraps them, sets data-layout to full or icons (layout="auto" switches to icons above three), and renders nothing when none is offered. LastUsed marks the method that last signed in from this browser. MethodSeparator renders only when a method before it and one after it are both offered.

Capability: methods: oauth

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

OAuth is <button type="button"> with { pending }, provider="google" | "github" and callbackURL; it renders nothing for a provider the backend lacks. Providers wraps them, sets data-layout to full or icons (layout="auto" switches to icons above three), and renders nothing when none is offered. LastUsed marks the method that last signed in from this browser. MethodSeparator renders only when a method before it and one after it are both offered.

Capability: methods: oauth

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

SendCode is a submit with { pending, cooldown } and channel="email" | "sms"; it refuses and focuses the field when the address is invalid, and renders nothing without that channel. The rest render only once a code was sent. Destination is the address it went to; ChallengeTitle gets { multiple, channel }; ChallengeChannel gates on the channel; ChallengeInput shows the address read-only. CodeInput is a numeric one-time-code input with maxLength locked, verifying once complete; VerifyCode is for a pasted code; Verifying stands where a spinner would be. ResendCode gets { seconds, pending }. AttemptsRemaining gets { remaining, limit } after the first wrong code. CodeFeedback gets { invalid } for a wrong code.

Capability: methods: email-code or phone-code

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

SendCode is a submit with { pending, cooldown } and channel="email" | "sms"; it refuses and focuses the field when the address is invalid, and renders nothing without that channel. The rest render only once a code was sent. Destination is the address it went to; ChallengeTitle gets { multiple, channel }; ChallengeChannel gates on the channel; ChallengeInput shows the address read-only. CodeInput is a numeric one-time-code input with maxLength locked, verifying once complete; VerifyCode is for a pasted code; Verifying stands where a spinner would be. ResendCode gets { seconds, pending }. AttemptsRemaining gets { remaining, limit } after the first wrong code. CodeFeedback gets { invalid } for a wrong code.

Capability: methods: email-code or phone-code

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

Step gates on name and accepts render={<MotionPanel />} to animate; without render it is a wrapper-free gate. Status is the one polite live region, mounted for the card's life, that speaks waits and the attempt budget. Viewport is a plain container for animated steps. Error is <div role="alert"> with { code, message }, only for the current step's last failed action. RetryAfter gets { seconds } while a rate limit holds. Restart returns to identify and drops the challenge.

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

Base UI tabs between the email and SMS channels. Channels is the tabs root, ChannelList the tab list, ChannelTrigger channel="email" | "sms" one tab, ChannelPanel its panel. Unavailable channels render nothing, and with one channel the list disappears. Switching keeps what was typed in each.

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

Base UI tabs between the email and SMS channels. Channels is the tabs root, ChannelList the tab list, ChannelTrigger channel="email" | "sms" one tab, ChannelPanel its panel. Unavailable channels render nothing, and with one channel the list disappears. Switching keeps what was typed in each.

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

Base UI tabs between the email and SMS channels. Channels is the tabs root, ChannelList the tab list, ChannelTrigger channel="email" | "sms" one tab, ChannelPanel its panel. Unavailable channels render nothing, and with one channel the list disappears. Switching keeps what was typed in each.

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

Base UI tabs between the email and SMS channels. Channels is the tabs root, ChannelList the tab list, ChannelTrigger channel="email" | "sms" one tab, ChannelPanel its panel. Unavailable channels render nothing, and with one channel the list disappears. Switching keeps what was typed in each.

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

Step gates on name and accepts render={<MotionPanel />} to animate; without render it is a wrapper-free gate. Status is the one polite live region, mounted for the card's life, that speaks waits and the attempt budget. Viewport is a plain container for animated steps. Error is <div role="alert"> with { code, message }, only for the current step's last failed action. RetryAfter gets { seconds } while a rate limit holds. Restart returns to identify and drops the challenge.

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

Step gates on name and accepts render={<MotionPanel />} to animate; without render it is a wrapper-free gate. Status is the one polite live region, mounted for the card's life, that speaks waits and the attempt budget. Viewport is a plain container for animated steps. Error is <div role="alert"> with { code, message }, only for the current step's last failed action. RetryAfter gets { seconds } while a rate limit holds. Restart returns to identify and drops the challenge.

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

Form prevents the page submit, holds one submitting part, and gives { pending } while any sign-in action runs. Label takes field="email" | "phone" | "password" | "code" | "two-factor-code" | "trust-device" and locks htmlFor. Email is <input type="email" autocomplete="email"> with { invalid }, and nothing without passwords or email codes. EmailSuggestion offers a corrected domain without submitting; OpenInbox links to the person's mail provider after an email challenge.

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

Form prevents the page submit, holds one submitting part, and gives { pending } while any sign-in action runs. Label takes field="email" | "phone" | "password" | "code" | "two-factor-code" | "trust-device" and locks htmlFor. Email is <input type="email" autocomplete="email"> with { invalid }, and nothing without passwords or email codes. EmailSuggestion offers a corrected domain without submitting; OpenInbox links to the person's mail provider after an email challenge.

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

Form prevents the page submit, holds one submitting part, and gives { pending } while any sign-in action runs. Label takes field="email" | "phone" | "password" | "code" | "two-factor-code" | "trust-device" and locks htmlFor. Email is <input type="email" autocomplete="email"> with { invalid }, and nothing without passwords or email codes. EmailSuggestion offers a corrected domain without submitting; OpenInbox links to the person's mail provider after an email challenge.

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

Form prevents the page submit, holds one submitting part, and gives { pending } while any sign-in action runs. Label takes field="email" | "phone" | "password" | "code" | "two-factor-code" | "trust-device" and locks htmlFor. Email is <input type="email" autocomplete="email"> with { invalid }, and nothing without passwords or email codes. EmailSuggestion offers a corrected domain without submitting; OpenInbox links to the person's mail provider after an email challenge.

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

Form prevents the page submit, holds one submitting part, and gives { pending } while any sign-in action runs. Label takes field="email" | "phone" | "password" | "code" | "two-factor-code" | "trust-device" and locks htmlFor. Email is <input type="email" autocomplete="email"> with { invalid }, and nothing without passwords or email codes. EmailSuggestion offers a corrected domain without submitting; OpenInbox links to the person's mail provider after an email challenge.

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

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

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

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

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

Password is <input type="password" autocomplete="current-password"> with { invalid }. RevealPassword toggles visibility with { visible }. CapsLock is <p role="status"> with { active }: keep it mounted and return empty content while inactive. PasswordStrength, StrengthSegment, PasswordFeedback and PasswordRequirement describe a new password, here the one set by a reset. PasswordSubmit is disabled until the address is valid and a password is typed.

Capability: methods: password

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

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

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

Password is <input type="password" autocomplete="current-password"> with { invalid }. RevealPassword toggles visibility with { visible }. CapsLock is <p role="status"> with { active }: keep it mounted and return empty content while inactive. PasswordStrength, StrengthSegment, PasswordFeedback and PasswordRequirement describe a new password, here the one set by a reset. PasswordSubmit is disabled until the address is valid and a password is typed.

Capability: methods: password

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

OAuth is <button type="button"> with { pending }, provider="google" | "github" and callbackURL; it renders nothing for a provider the backend lacks. Providers wraps them, sets data-layout to full or icons (layout="auto" switches to icons above three), and renders nothing when none is offered. LastUsed marks the method that last signed in from this browser. MethodSeparator renders only when a method before it and one after it are both offered.

Capability: methods: oauth

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

SendCode is a submit with { pending, cooldown } and channel="email" | "sms"; it refuses and focuses the field when the address is invalid, and renders nothing without that channel. The rest render only once a code was sent. Destination is the address it went to; ChallengeTitle gets { multiple, channel }; ChallengeChannel gates on the channel; ChallengeInput shows the address read-only. CodeInput is a numeric one-time-code input with maxLength locked, verifying once complete; VerifyCode is for a pasted code; Verifying stands where a spinner would be. ResendCode gets { seconds, pending }. AttemptsRemaining gets { remaining, limit } after the first wrong code. CodeFeedback gets { invalid } for a wrong code.

Capability: methods: email-code or phone-code

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

SendCode is a submit with { pending, cooldown } and channel="email" | "sms"; it refuses and focuses the field when the address is invalid, and renders nothing without that channel. The rest render only once a code was sent. Destination is the address it went to; ChallengeTitle gets { multiple, channel }; ChallengeChannel gates on the channel; ChallengeInput shows the address read-only. CodeInput is a numeric one-time-code input with maxLength locked, verifying once complete; VerifyCode is for a pasted code; Verifying stands where a spinner would be. ResendCode gets { seconds, pending }. AttemptsRemaining gets { remaining, limit } after the first wrong code. CodeFeedback gets { invalid } for a wrong code.

Capability: methods: email-code or phone-code

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

SendCode is a submit with { pending, cooldown } and channel="email" | "sms"; it refuses and focuses the field when the address is invalid, and renders nothing without that channel. The rest render only once a code was sent. Destination is the address it went to; ChallengeTitle gets { multiple, channel }; ChallengeChannel gates on the channel; ChallengeInput shows the address read-only. CodeInput is a numeric one-time-code input with maxLength locked, verifying once complete; VerifyCode is for a pasted code; Verifying stands where a spinner would be. ResendCode gets { seconds, pending }. AttemptsRemaining gets { remaining, limit } after the first wrong code. CodeFeedback gets { invalid } for a wrong code.

Capability: methods: email-code or phone-code

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

SendCode is a submit with { pending, cooldown } and channel="email" | "sms"; it refuses and focuses the field when the address is invalid, and renders nothing without that channel. The rest render only once a code was sent. Destination is the address it went to; ChallengeTitle gets { multiple, channel }; ChallengeChannel gates on the channel; ChallengeInput shows the address read-only. CodeInput is a numeric one-time-code input with maxLength locked, verifying once complete; VerifyCode is for a pasted code; Verifying stands where a spinner would be. ResendCode gets { seconds, pending }. AttemptsRemaining gets { remaining, limit } after the first wrong code. CodeFeedback gets { invalid } for a wrong code.

Capability: methods: email-code or phone-code

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

SendCode is a submit with { pending, cooldown } and channel="email" | "sms"; it refuses and focuses the field when the address is invalid, and renders nothing without that channel. The rest render only once a code was sent. Destination is the address it went to; ChallengeTitle gets { multiple, channel }; ChallengeChannel gates on the channel; ChallengeInput shows the address read-only. CodeInput is a numeric one-time-code input with maxLength locked, verifying once complete; VerifyCode is for a pasted code; Verifying stands where a spinner would be. ResendCode gets { seconds, pending }. AttemptsRemaining gets { remaining, limit } after the first wrong code. CodeFeedback gets { invalid } for a wrong code.

Capability: methods: email-code or phone-code

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

SendCode is a submit with { pending, cooldown } and channel="email" | "sms"; it refuses and focuses the field when the address is invalid, and renders nothing without that channel. The rest render only once a code was sent. Destination is the address it went to; ChallengeTitle gets { multiple, channel }; ChallengeChannel gates on the channel; ChallengeInput shows the address read-only. CodeInput is a numeric one-time-code input with maxLength locked, verifying once complete; VerifyCode is for a pasted code; Verifying stands where a spinner would be. ResendCode gets { seconds, pending }. AttemptsRemaining gets { remaining, limit } after the first wrong code. CodeFeedback gets { invalid } for a wrong code.

Capability: methods: email-code or phone-code

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

SendCode is a submit with { pending, cooldown } and channel="email" | "sms"; it refuses and focuses the field when the address is invalid, and renders nothing without that channel. The rest render only once a code was sent. Destination is the address it went to; ChallengeTitle gets { multiple, channel }; ChallengeChannel gates on the channel; ChallengeInput shows the address read-only. CodeInput is a numeric one-time-code input with maxLength locked, verifying once complete; VerifyCode is for a pasted code; Verifying stands where a spinner would be. ResendCode gets { seconds, pending }. AttemptsRemaining gets { remaining, limit } after the first wrong code. CodeFeedback gets { invalid } for a wrong code.

Capability: methods: email-code or phone-code

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

Step gates on name and accepts render={<MotionPanel />} to animate; without render it is a wrapper-free gate. Status is the one polite live region, mounted for the card's life, that speaks waits and the attempt budget. Viewport is a plain container for animated steps. Error is <div role="alert"> with { code, message }, only for the current step's last failed action. RetryAfter gets { seconds } while a rate limit holds. Restart returns to identify and drops the challenge.

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

Step gates on name and accepts render={<MotionPanel />} to animate; without render it is a wrapper-free gate. Status is the one polite live region, mounted for the card's life, that speaks waits and the attempt budget. Viewport is a plain container for animated steps. Error is <div role="alert"> with { code, message }, only for the current step's last failed action. RetryAfter gets { seconds } while a rate limit holds. Restart returns to identify and drops the challenge.

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

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.

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

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.

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

The way across: "Don't have an account? Sign up", and back again. A button rather than a link, because both flows are this one page. An installed app that keeps `/sign-in` and `/sign-up` as two routes links between them instead, and drops this.

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

Keep the entire invitation out of the screen when password registration is unavailable.

Capability: methods: password

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

SignedIn and SignedOut open once the session has answered, so nobody flashes signed out. Loading covers the first load only. SessionExpired opens when the session on screen has run out while its name and picture are still shown. ReadError is <p role="alert"> with { message } when the session could not be read, and Retry reads it again.

Source: @slices.sh/auth/src/headless/user/signed-out.tsx

Passkey is <button type="button"> with { pending }; it runs the ceremony on click and renders nothing where the backend or the browser cannot. PasskeyAutofill renders no element: it starts conditional mediation once, on mount, so the passkey is offered in the autofill list under the email field. A ceremony that ends without a credential is remembered, and Passkeys.SetupPrompt offers one after sign-in.

Capability: methods: passkey

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

Starts the passkey ceremony the browser runs from the identifier field itself. Renders nothing: conditional mediation has no button, which is the point — the passkey is offered in the autofill list under the email field, and the ceremony finishes as soon as one is picked. It runs once, on mount, and only where the browser said it can, because `startAuthentication` with autofill throws in a browser that cannot serve it. The ceremony is owned here rather than by the pattern, which calls no hook of its own.

Capability: methods: passkey

Source: @slices.sh/auth/src/headless/passkeys/sign-in/passkey-autofill.tsx

One second factor or the other. The backup-code side renders nothing at all where the backend cannot redeem one, so a lost authenticator is never offered a way out that this deployment does not have.

Capability: two-factor

Source: @slices.sh/auth/src/headless/two-factor/sign-in/second-factor.tsx

Switches to the other second factor, and is absent when there is no other to switch to.

Capability: two-factor

Source: @slices.sh/auth/src/headless/two-factor/sign-in/choose-second-factor.tsx

SecondFactor is a gate with factor="authenticator" | "backup-code": one is on screen at a time, so each gets its own form and Enter works. ChooseSecondFactor switches to the other factor and renders nothing when there is no other. TwoFactorCode is a numeric one-time-code input, read-only while it is checked, and takes focus when the step opens. TrustDevice is a checkbox, unticked again after Restart. VerifyTwoFactor submits, disabled until a code is typed.

Capability: two-factor

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

BackupCode is the input for one recovery code, with no one-time-code token so a password manager does not offer the last SMS. VerifyBackupCode submits it. The backup-code side of SecondFactor renders nothing where the backend cannot redeem one.

Capability: backup-codes

Source: @slices.sh/auth/src/headless/two-factor/sign-in/backup-code.tsx

BackupCode is the input for one recovery code, with no one-time-code token so a password manager does not offer the last SMS. VerifyBackupCode submits it. The backup-code side of SecondFactor renders nothing where the backend cannot redeem one.

Capability: backup-codes

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

SecondFactor is a gate with factor="authenticator" | "backup-code": one is on screen at a time, so each gets its own form and Enter works. ChooseSecondFactor switches to the other factor and renders nothing when there is no other. TwoFactorCode is a numeric one-time-code input, read-only while it is checked, and takes focus when the step opens. TrustDevice is a checkbox, unticked again after Restart. VerifyTwoFactor submits, disabled until a code is typed.

Capability: two-factor

Source: @slices.sh/auth/src/headless/two-factor/sign-in/trust-device.tsx

SecondFactor is a gate with factor="authenticator" | "backup-code": one is on screen at a time, so each gets its own form and Enter works. ChooseSecondFactor switches to the other factor and renders nothing when there is no other. TwoFactorCode is a numeric one-time-code input, read-only while it is checked, and takes focus when the step opens. TrustDevice is a checkbox, unticked again after Restart. VerifyTwoFactor submits, disabled until a code is typed.

Capability: two-factor

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

Asks for the reset screen. Absent unless the backend can actually put a link in front of somebody: a "Forgot password?" that leads nowhere is worse than none at all. `stage="identify"` is for the link under the email field of an identifier-first card: it is there only while that step is drawn. Where the email and the password stand together there is no such step, and the password field's own link is the only one.

Capability: password-reset

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

How this install replaces a forgotten password: a link to the inbox, or a code to type. A gate, because the two are different screens rather than one screen with a different sentence — a link is followed away and comes back with a token, a code is typed here — and only the backend knows which it can deliver.

Capability: password-reset

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

ForgotPassword opens the reset steps, and nothing unless the backend can deliver a link or a code. ResetMethod gates on method="link" | "code". RequestReset sends it with { pending, method }; ResetSent says it went, the same for any address. ResetDestination, ResetCodeInput and ResendResetCode are the code variant. ResetUnused gates while a link is unspent; NewPassword and SubmitReset set the password; ResetDone follows. BackToSignIn leaves and drops the token from the address bar.

Capability: password-reset

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

ForgotPassword opens the reset steps, and nothing unless the backend can deliver a link or a code. ResetMethod gates on method="link" | "code". RequestReset sends it with { pending, method }; ResetSent says it went, the same for any address. ResetDestination, ResetCodeInput and ResendResetCode are the code variant. ResetUnused gates while a link is unspent; NewPassword and SubmitReset set the password; ResetDone follows. BackToSignIn leaves and drops the token from the address bar.

Capability: password-reset

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

Leaves the reset screens. It drops the token as well as the intent, which is what takes a live credential out of the address bar once it has been spent, and the code challenge with it: coming back to a half-typed code for a reset nobody is doing any more is a screen nobody asked for.

Capability: password-reset

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

Where the reset code went, as the backend spells it back: often masked, never guessed.

Capability: password-reset

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

The code that proves the address a reset was asked for. The same six digits as a sign-in code and a different thing entirely: a right one answers a token that sets a password, and signs nobody in. Checked the moment its last digit lands, so there is no button beside it.

Capability: password-reset

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

ForgotPassword opens the reset steps, and nothing unless the backend can deliver a link or a code. ResetMethod gates on method="link" | "code". RequestReset sends it with { pending, method }; ResetSent says it went, the same for any address. ResetDestination, ResetCodeInput and ResendResetCode are the code variant. ResetUnused gates while a link is unspent; NewPassword and SubmitReset set the password; ResetDone follows. BackToSignIn leaves and drops the token from the address bar.

Capability: password-reset

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

ForgotPassword opens the reset steps, and nothing unless the backend can deliver a link or a code. ResetMethod gates on method="link" | "code". RequestReset sends it with { pending, method }; ResetSent says it went, the same for any address. ResetDestination, ResetCodeInput and ResendResetCode are the code variant. ResetUnused gates while a link is unspent; NewPassword and SubmitReset set the password; ResetDone follows. BackToSignIn leaves and drops the token from the address bar.

Capability: password-reset

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

The password being set by a reset, which is a new one and is announced as such.

Capability: password-reset

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

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

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

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

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

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

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

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

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

ForgotPassword opens the reset steps, and nothing unless the backend can deliver a link or a code. ResetMethod gates on method="link" | "code". RequestReset sends it with { pending, method }; ResetSent says it went, the same for any address. ResetDestination, ResetCodeInput and ResendResetCode are the code variant. ResetUnused gates while a link is unspent; NewPassword and SubmitReset set the password; ResetDone follows. BackToSignIn leaves and drops the token from the address bar.

Capability: password-reset

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

ForgotPassword opens the reset steps, and nothing unless the backend can deliver a link or a code. ResetMethod gates on method="link" | "code". RequestReset sends it with { pending, method }; ResetSent says it went, the same for any address. ResetDestination, ResetCodeInput and ResendResetCode are the code variant. ResetUnused gates while a link is unspent; NewPassword and SubmitReset set the password; ResetDone follows. BackToSignIn leaves and drops the token from the address bar.

Capability: password-reset

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