Docs

Sign-up components

The following components are used when creating sign-up flows. They are imported from @clerk/elements/sign-up. It is recommended to import them all under the SignUp 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.

Anatomy
import * as SignUp from '@clerk/elements/sign-up'

export default function SignUpPage() {
  return (
    <SignUp.Root>
      <SignUp.Step name="start" />
      <SignUp.Step name="continue" />
      <SignUp.Step name="verifications" />
    </SignUp.Root>
  )
}

<Root>

The root sign-up component. Sets up providers and state management for the sign-up flow. Must wrap all other sign-up components. <Root> will validate your built sign-up flow to ensure the implementation is correct based on instance settings and best practices.

Properties

  • Name
    path?
    Type
    string
    Description

    The root path the sign-up flow is mounted at. If not provided, will be automatically inferred (either through the current pathname or environment variables). Fallback: /sign-up

  • Name
    fallback?
    Type
    React.ReactNode
    Description

    Fallback markup to render while Clerk is loading. Default: null

  • Name
    routing?
    Type
    'path' | 'virtual'
    Description

    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:

<Step>

A step in the sign-up flow. Controls conditionally rendering its children based on the status of the current sign up attempt. start is the initial step.

Properties

  • Name
    name
    Type
    'start' | 'continue' | 'verifications'
    Description

    The name of the step for which its children will be rendered.

<Step name="start">

Renders the beginning sign-up form. Once a sign up attempt has been created from this step, the continue or verification step will be rendered. The exact fields that should be rendered depend on your instance configuration.

Usage

page.tsx
<SignUp.Step name="start">
  <Clerk.Connection name="google">Sign up with Google</Clerk.Connection>
  <Clerk.Field name="identifier">
    <Clerk.Label>Email</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>

  <SignUp.Captcha />

  <SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>

<Step name="continue">

Collects additional required fields from the user during a sign up attempt. This step will be rendered if a user initiates a sign up, but does not provide all required fields (e.g. through social connection).

Usage

page.tsx
<SignUp.Step name="continue">
  <Clerk.Field name="username">
    <Clerk.Label>Username</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>

  <SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>

<Step name="verifications">

Verifies certain fields provided during sign up. Will render if your instance is configured to require verification of emails or phone numbers.

Usage

page.tsx
<SignUp.Step name="verifications">
  <SignUp.Strategy name="email_code">
    <Clerk.Field name="code">
      <Clerk.Label>Email code</Clerk.Label>
      <Clerk.Input />
      <Clerk.FieldError />
    </Clerk.Field>

    <SignUp.Action submit>Verify email</SignUp.Action>
  </SignUp.Strategy>
</SignUp.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

  • Name
    name
    Type
    'code' | 'email_code' | 'email_link' | 'phone_code'
    Description

    The name of the strategy for which its children will be rendered.

Usage

page.tsx
<SignUp.Strategy name="email_code">
  <Clerk.Field name="code">
    <Clerk.Label>Code</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>

  <SignUp.Action submit>Verify</SignUp.Action>
</SignUp.Strategy>

<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

  • Name
    submit?
    Type
    boolean
    Description

    If true, the action will submit the form. Default: false

  • Name
    navigate?
    Type
    'start' | 'previous'
    Description

    The name of the step to navigate to. Default: undefined

  • Name
    resend?
    Type
    boolean
    Description

    If true, the action will resend the verification code for the currently active strategy, if applicable. Default: false

  • Name
    fallback?
    Type
    ({ resendableAfter: number }) => React.ReactNode
    Description

    Only used when resend is true. If provided, the fallback markup will be rendered before the resend delay has expired. Default: null

Usage

<Action submit>

page.tsx
<SignUp.Step name="start">
  <Clerk.Field name="identifier">
    <Clerk.Label>Email</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>

  <SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>

<Action navigate>

page.tsx
<SignUp.Step name="continue">
  <Clerk.Field name="username">
    <Clerk.Label>Username</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>

  <SignUp.Action submit>Sign up</SignUp.Action>
  <SignUp.Action navigate="start">Go back</SignUp.Action>
</SignUp.Step>

<Action resend>

page.tsx
<SignUp.Step name="verifications">
  <SignUp.Strategy name="email_code">
    <Clerk.Field name="code">
      <Clerk.Label>Code</Clerk.Label>
      <Clerk.Input />
      <Clerk.FieldError />
    </Clerk.Field>

    <SignUp.Action submit>Verify</SignUp.Action>
    <SignUp.Action
      resend
      fallback={({ resendableAfter }) => <p>Resend code in {resendableAfter} second(s)</p>}
    >
      Resend code
    </SignUp.Action>
  </SignUp.Strategy>
</SignUp.Step>

<Captcha>

Renders the Cloudflare Turnstile widget. It must be used within the <Step name="start"> component. By default, renders a <div>.

Properties

  • Name
    asChild?
    Type
    boolean
    Description

    If true, <Captcha> will render as its child element. The element must be a self-closing element or component. Any children passed to the immediate child component of <Captcha> will be ignored. Default: false

<Captcha> usage

page.tsx
<SignUp.Step name="start">
  <SignUp.Captcha />

  <SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>

With asChild

page.tsx
<SignUp.Step name="start">
  <SignUp.Captcha asChild>
    <aside />
  </SignUp.Captcha>

  <SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on