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.

Properties

  • Name
    asChild?
    Type
    boolean
    Description

    For Astro only: If true, the <SignUpButton> component will render its children as a child of the component.

  • 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
    Description

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

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

Usage

Basic usage

app/page.tsx
import { SignUpButton } from '@clerk/nextjs'

export default function Home() {
  return <SignUpButton />
}
src/sign-up.tsx
import { SignUpButton } from '@clerk/clerk-react'

const SignUpPage = () => <SignUpButton />

export default SignUpPage
pages/sign-up.astro
---
import { SignUpButton } from '@clerk/astro/components'
---

<SignUpButton />

Note

This component can be used in Expo Web projects, but won't work in native environments (iOS or Android). For native apps, use the supported native components instead.

/app/sign-up.web.tsx
import { SignUpButton } from '@clerk/clerk-expo/web'

export default function SignUpPage() {
  return <SignUpButton />
}
app/routes/sign-up/$.tsx
import { SignUpButton } from '@clerk/remix'

export default function SignUpPage() {
  return <SignUpButton />
}
app/routes/sign-up.tsx
import { SignUpButton } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/sign-up')({
  component: SignUp,
})

function SignUp() {
  return <SignUpButton />
}
src/App.vue
<script setup>
import { SignUpButton } from '@clerk/vue'
</script>

<template>
  <SignUpButton />
</template>

Custom usage

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

app/page.tsx
import { SignUpButton } from '@clerk/nextjs'

export default function Home() {
  return (
    <SignUpButton>
      <button>Custom sign up button</button>
    </SignUpButton>
  )
}
src/App.jsx
import { SignUpButton } from '@clerk/clerk-react'

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

You must pass the asChild prop to the <SignUpButton> component if you are passing children to it.

src/pages/index.astro
---
import { SignUpButton } from '@clerk/astro/components'
---

<SignUpButton asChild>
  <button>Custom sign up button</button>
</SignUpButton>

Note

This component can be used in Expo Web projects, but won't work in native environments (iOS or Android). For native apps, use the supported native components instead.

/app/index.tsx
import { SignUpButton } from '@clerk/clerk-expo/web'

export default function Home() {
  return (
    <SignUpButton>
      <button>Custom sign up button</button>
    </SignUpButton>
  )
}
app/routes/_index.tsx
import { SignUpButton } from '@clerk/remix'

export default function Home() {
  return (
    <SignUpButton>
      <button>Custom sign up button</button>
    </SignUpButton>
  )
}
src/App.vue
<script setup>
import { SignUpButton } from '@clerk/vue'
</script>

<template>
  <SignUpButton>
    <button>Custom sign up button</button>
  </SignUpButton>
</template>

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on