# Sign-in components

> This feature is deprecated. With the release of [Clerk Core 3](https://clerk.com/changelog/2026-03-03-core-3.md), the redesigned [hooks](https://clerk.com/docs/reference/hooks/overview.md) are the recommended replacement for building custom flows. They expose stateful objects, step methods that map directly to the flow, and structured field-level errors out of the box, so you no longer need to manage attempt status, loading states, or error parsing yourself.

The following components are used when creating sign-in flows. They are imported from `@clerk/elements/sign-in`. It is recommended to import them all under the `SignIn` namespace to make discovery easier and reduce naming conflicts with other components throughout your application. The code snippets on this page assume you have imported the components this way.

filename: Anatomy
```tsx
import * as SignIn from '@clerk/elements/sign-in'

export default function SignInPage() {
  return (
    <SignIn.Root>
      <SignIn.Step name="start" />
      <SignIn.Step name="verifications" />
      <SignIn.Step name="choose-strategy" />
      <SignIn.Step name="forgot-password" />
      <SignIn.Step name="reset-password" />
    </SignIn.Root>
  )
}
```

## `<Root>`

The root sign-in component. Sets up providers and state management for the sign-in flow. Must wrap all other sign-in components.

`<Root>` will validate your sign-in flow to ensure the implementation is correct based on instance settings and best practices. In development instances, if the flow is invalid, it will throw an error.

### Properties {{ toc: false }}

| Name      | Type                | Description                                                                                                                                                                      |
| --------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| path?     | string              | The root path the sign-in flow is mounted at. If not provided, will be automatically inferred (either through the current pathname or environment variables). Fallback: /sign-in |
| fallback? | React.ReactNode     | Fallback markup to render while Clerk is loading. Default: null                                                                                                                  |
| routing?  | 'path' | 'virtual' | If you want to render Clerk Elements in e.g. a modal, use the 'virtual' routing mode. Default: 'path'                                                                            |

The following data attributes are also added to the underlying element:

- `data-global-error` - Refers to the [`<GlobalError>`](https://clerk.com/docs/guides/customizing-clerk/elements/reference/common.md#global-error) status

## `<Step>`

A step in the sign-in flow. Conditionally renders its children based on the status of the current sign-in attempt. `start` is the initial step.

### Properties {{ toc: false }}

| Name | Type                                                                                     | Description                                                   |
| ---- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| name | 'start' | 'verifications' | 'choose-strategy' | 'forgot-password' | 'reset-password' | The name of the step for which its children will be rendered. |

### `<Step name="start">`

Renders the beginning sign-in form. Once a sign-in attempt has been created from this step, `<Step name="verifications">` will be rendered.

Typically, this step will contain an `identifier` field and social connection buttons to create a sign-in attempt, however the exact fields that should be rendered depend on your instance configuration.

#### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignIn.Step name="start">
  <Clerk.Field name="identifier">
    <Clerk.Label>Email</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>
  <SignIn.Action submit>Sign In with Email</SignIn.Action>
</SignIn.Step>
```

### `<Step name="verifications">`

Will render its children if a sign-in attempt is in progress. Any nested `<Strategy>` components will conditionally render based on the status of the sign-in attempt.

You'll typically also want to link to `choose-strategy` to allow for alternative login methods.

#### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignIn.Step name="verifications">
  <SignIn.Strategy name="password">
    <Clerk.Field name="password">
      <Clerk.Label>password</Clerk.Label>
      <Clerk.Input />
      <Clerk.FieldError />
    </Clerk.Field>
    <SignIn.Action submit>Sign In</SignIn.Action>
  </SignIn.Strategy>
  <SignIn.Action navigate="choose-strategy">Use another method</SignIn.Action>
</SignIn.Step>
```

### `<Step name="choose-strategy">`

Allows a user to pick a new strategy to verify. This step can be rendered by navigating to `choose-strategy` using `<Action>`.

#### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignIn.Step name="choose-strategy">
  <SignIn.SupportedStrategy name="phone_code">Send a code to your phone</SignIn.SupportedStrategy>
</SignIn.Step>
```

### `<Step name="forgot-password">`

If the currently requested strategy is `password`, but a user can't remember their password, you can navigate them to the `forgot-password` step. They can begin the reset password flow or choose a new strategy. This step can be rendered by navigating to `forgot-password` using `<Action>`.

#### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignIn.Step name="forgot-password">
  <SignIn.SupportedStrategy name="reset_password_email_code">
    Reset your password via Email
  </SignIn.SupportedStrategy>
  <p>or</p>
  <SignIn.SupportedStrategy name="google">Sign in with Google</SignIn.SupportedStrategy>
</SignIn.Step>
```

### `<Step name="reset-password">`

If a user has requested a password reset and verified their identity, they will be navigated to `reset-password`. A password field should be rendered in this step to allow the user to set a new password.

#### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignIn.Step name="reset-password">
  <Clerk.Field name="password">
    <Clerk.Label>New password</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>
  <Clerk.Field name="confirmPassword">
    <Clerk.Label>Confirm password</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>
  <SignIn.Action submit>Update password</SignIn.Action>
</SignIn.Step>
```

## `<Strategy>`

Conditionally renders its children depending on the authentication strategy that needs to be verified. Does not render any markup on its own.

### Properties {{ toc: false }}

| Name | Type                                                                                                                                                                                                                                                                                                                                                                                 | Description                                                       |
| ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- |
| name | 'enterprise\_sso' | 'ticket' | 'password' | 'passkey' | 'phone\_code' | 'email\_code' | 'web3\_base\_signature' | 'web3\_metamask\_signature' | 'web3\_coinbase\_wallet\_signature' | 'web3\_okx\_wallet\_signature' | 'reset\_password\_email\_code' | 'reset\_password\_phone\_code' | 'email\_link' | 'totp' | 'backup\_code' | 'oauth' | 'web3' | OAuthStrategy | The name of the strategy for which its children will be rendered. |

### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignIn.Strategy name="email_code">
  <Clerk.Field name="code">
    <Clerk.Label>Code</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>
  <SignIn.Action submit>Verify</SignIn.Action>
</SignIn.Strategy>
```

#### `<Strategy name="passkey">`

filename: page.tsx
```tsx
<SignIn.Strategy name="passkey">
  <SignIn.Action submit>Continue with Passkey</SignIn.Action>
</SignIn.Strategy>
```

## `<SupportedStrategy>`

Renders a button that will change the current strategy that needs to be verified when in the `choose-strategy` or `forgot-password` steps.

### Properties {{ toc: false }}

| Name | Type                                                                                                                                                                                                                                                                              | Description                            |
| ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| name | 'email\_code' | 'email\_link' | 'password' | 'passkey' | 'phone\_code' | 'reset\_password\_email\_code' | 'reset\_password\_phone\_code' | 'web3\_base\_signature' | 'web3\_metamask\_signature' | 'web3\_coinbase\_wallet\_signature' | 'web3\_okx\_wallet\_signature' | The name of the strategy to switch to. |

### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignIn.Step name="choose-strategy">
  <SignIn.SupportedStrategy name="password">Sign in with password</SignIn.SupportedStrategy>
</SignIn.Step>
```

## `<Action>`

Exposes various flow-related actions. It can be used to submit forms, navigate between steps, and re-trigger sending of verification codes. By default, renders a `<button>`.

### Properties {{ toc: false }}

| Name      | Type                                                            | Description                                                                                                                         |
| --------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| submit?   | boolean                                                         | If true, the action will submit the form. Default: false                                                                            |
| navigate? | 'choose-strategy' | 'forgot-password' | 'previous' | 'start' | The name of the step to navigate to. Default: undefined                                                                             |
| resend?   | boolean                                                         | If true, the action will resend the verification code for the currently active strategy, if applicable. Default: false              |
| fallback? | ({ resendableAfter: number }) => React.ReactNode               | Only used when resend is true. If provided, the fallback markup will be rendered before the resend delay has expired. Default: null |

### Usage {{ toc: false }}

#### `<Action submit>`

filename: page.tsx
```tsx
<SignIn.Step name="start">
  <Clerk.Field name="identifier">
    <Clerk.Label>Email</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>
  <SignIn.Action submit>Sign in</SignIn.Action>
</SignIn.Step>
```

#### `<Action navigate>`

filename: page.tsx
```tsx
<SignIn.Step name="verifications">
  <SignIn.Strategy name="password">
    <Clerk.Field name="password">
      <Clerk.Label>Password</Clerk.Label>
      <Clerk.Input />
      <Clerk.FieldError />
    </Clerk.Field>
    <SignIn.Action submit>Sign in</SignIn.Action>
    <SignIn.Action navigate="forgot-password">Forgot password?</SignIn.Action>
  </SignIn.Strategy>
</SignIn.Step>
```

#### `<Action resend>`

filename: page.tsx
```tsx
<SignIn.Step name="verifications">
  <SignIn.Strategy name="email_code">
    <Clerk.Field name="code">
      <Clerk.Label>Code</Clerk.Label>
      <Clerk.Input />
      <Clerk.FieldError />
    </Clerk.Field>
    <SignIn.Action submit>Verify</SignIn.Action>
    <SignIn.Action
      resend
      fallback={({ resendableAfter }) => <p>Resend code in {resendableAfter} second(s)</p>}
    >
      Resend code
    </SignIn.Action>
  </SignIn.Strategy>
</SignIn.Step>
```

## `<SafeIdentifier />`

Renders a masked identifier corresponding to the parent `Strategy` or `SupportedStrategy`, falling back to the identifier that has been provided by the user during a sign-in attempt. Renders a `string` (or empty string if it can't find an identifier). Must be a child of either `<Strategy>` or `<SupportedStrategy>`.

### Properties {{ toc: false }}

| Name       | Type                           | Description                                                                                                                           |
| ---------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| transform? | (identifier: string) => string | If provided, modify the supplied identifier string before rendering. Useful when interpolating the identifier into localized strings. |

### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignIn.Strategy name="email_code">
  <h1>Check your email</h1>
  <p>
    We sent a code to <SignIn.SafeIdentifier />.
  </p>
</SignIn.Strategy>
```

filename: page.tsx
```tsx
<SignIn.Strategy name="email_code">
  <h1>{t('checkEmail')}</h1>
  <p>
    <SignIn.SafeIdentifier transform={(identifier) => t('sentCodeTo', { identifier })} />
  </p>
</SignIn.Strategy>
```

## `<Salutation />`

Renders a salutation for the user during a sign-in attempt. It attempts to resolve these values in this specific order:

1. First name
2. Last name
3. Identifier

Renders a `string` (or empty string if it can't find an identifier).

### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignIn.Strategy name="password">
  <p>
    Welcome back <SignIn.Salutation />!
  </p>
</SignIn.Strategy>
```

## `<Passkey />`

Trigger an autofill suggestion dialog with the stored passkeys. After selecting a passkey a sign-in attempt will be created. By default, renders a `<button>`.

### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignIn.Step name="start">
  <SignIn.Passkey>Continue with Passkey</SignIn.Passkey>
</SignIn.Step>
```

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)