Skip to main content
Docs

<SignUpButton>

The <SignUpButton> component is a button that, by default, links to your app's sign-up page. Your sign-up page will be hosted by Clerk using the Account Portal unless you have set up a dedicated sign-up page.

Usage

Basic usage

src/App.tsx
import { SignUpButton } from '@clerk/clerk-react'

function App() {
  return <SignUpButton />
}

export default App

Custom usage

You can create a custom button by wrapping your own button, or button text, in the <SignUpButton> component.

src/App.jsx
import { SignUpButton } from '@clerk/clerk-react'

function App() {
  return (
    <SignUpButton>
      <button>Custom sign up button</button>
    </SignUpButton>
  )
}

export default App

Properties

  • Name
    forceRedirectUrl?
    Type
    string
    Description

    If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.

  • Name
    fallbackRedirectUrl?
    Type
    string
    Description

    The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

  • Name
    oauthFlow
    Type
    "redirect" | "popup" | "auto"
    Description

    Determines how OAuth authentication is performed. Accepts the following properties:

    • "redirect": Redirect to the OAuth provider on the current page.
    • "popup": Open a popup window.
    • "auto": Choose the best method based on whether the current domain typically requires the "popup" flow to correctly perform authentication.

    Defaults to "auto".

  • Name
    signInForceRedirectUrl?
    Type
    string
    Description

    If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.

  • Name
    signInFallbackRedirectUrl?
    Type
    string
    Description

    The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

  • Name
    mode?
    Type
    'redirect' | 'modal'
    Description

    Determines what happens when a user clicks on the <SignUpButton>. Setting this to 'redirect' will redirect the user to the sign-up route. Setting this to 'modal' will open a modal on the current route. Defaults to 'redirect'

  • Name
    children?
    Type
    React.ReactNode
    Description

    Children you want to wrap the <SignUpButton> in.

  • Name
    initialValues
    Type
    SignUpInitialValuesJavaScript Icon
    Description

    The values used to prefill the sign-up fields with.

  • Name
    unsafeMetadata
    Type
    SignUpUnsafeMetadataJavaScript Icon
    Description

    Metadata that can be read and set from the frontend and the backend. Once the sign-up is complete, the value of this field will be automatically copied to the created user's unsafe metadata (User.unsafeMetadata). One common use case is to collect custom information about the user during the sign-up process and store it in this property. Read more about unsafe metadata.

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on