Skip to main content

<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/routes/sign-up.tsx
import { SignUpButton } from '@clerk/chrome-extension'

export default function SignUpPage() {
  return <SignUpButton />
}

Custom usage

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

src/routes/home.tsx
import { SignUpButton } from '@clerk/chrome-extension'

export default function Home() {
  return (
    <SignUpButton>
      <button>Custom sign up button</button>
    </SignUpButton>
  )
}

If you want to render multiple elements, wrap them in a single parent element:

<SignUpButton>
  <button>
    <span>Get started</span>
    <span aria-hidden="true"> →</span>
  </button>
</SignUpButton>

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

    Warning

    Both mode values can silently fall back to the Account Portal when <ClerkProvider> is missing the signUpUrl and/or signInUrl props (or the equivalent environment variables):

    • mode="redirect" navigates the user to signUpUrl. If signUpUrl is not configured but signInUrl is set to a relative path, Clerk treats your app as a combined sign-in-or-up page and navigates to signInUrl#/create. If neither is configured, Clerk redirects to the Account Portal sign-up page instead.
    • mode="modal" opens the sign-up modal in your app, but if a user starts an SSO/OAuth flow and the identity already exists (so the user must be transferred to sign-in), Clerk navigates to signInUrl. If signInUrl is not configured, the user is redirected to the Account Portal sign-in page mid-flow.

    If the Account Portal is disabled, either set both signInUrl and signUpUrl on <ClerkProvider>, or use a combined sign-in-or-up page (set signInUrl to a relative path and leave signUpUrl unset). Otherwise the fallback target returns a 404 and the authentication flow breaks.

  • Name
    children?
    Type
    React.ReactNode
    Description

    Children you want to wrap the <SignUpButton> in. Only accepts one child; if you want to render multiple elements, wrap them in a single parent element.

  • Name
    initialValues
    Type
    SignUpInitialValues
    Description

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

  • Name
    unsafeMetadata
    Type
    SignUpUnsafeMetadata
    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?

Last updated on

GitHubEdit on GitHub