`<RedirectToSignUp />`

The <RedirectToSignUp /> component will navigate to the sign up URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

Usage

Next.js

React

Remix

App Router

Pages Router

app/layout.tsx

import { ClerkProvider, SignedIn, SignedOut, RedirectToSignUp } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ClerkProvider>
          <SignedIn>{children}</SignedIn>
          <SignedOut>
            <RedirectToSignUp />
          </SignedOut>
        </ClerkProvider>
      </body>
    </html>
  )
}

pages/_app.tsx

import { ClerkProvider, SignedIn, SignedOut, RedirectToSignUp } from '@clerk/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider>
      <SignedIn>
        <Component {...pageProps} />
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </ClerkProvider>
  )
}

export default MyApp

pages/privatepage.tsx

import { ClerkProvider, SignedIn, SignedOut, RedirectToSignUp } from '@clerk/clerk-react'

function PrivatePage() {
  return (
    <ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <SignedIn>Content that is displayed to signed in users.</SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </ClerkProvider>
  )
}

routes/index.tsx

import { SignedIn, SignedOut, RedirectToSignUp, UserButton } from '@clerk/remix'

export default function Index() {
  return (
    <div>
      <SignedIn>
        <h1>Index route</h1>
        <p>You are signed in!</p>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </div>
  )
}

Properties

Name
signUpFallbackRedirectUrl?
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
signUpForceRedirectUrl?
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
initialValues
Type
SignUpInitialValues
Description
The values used to prefill the sign-up fields with.

Edit this page on GitHub

Last updated on Dec 3, 2024

<RedirectToSignUp />

Usage

Properties

Feedback

`<RedirectToSignUp />`