<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
pages/_app.tsximport { ClerkProvider, SignedIn, SignedOut, RedirectToSignUp, } from "@clerk/nextjs"; import { AppProps } from "next/app"; function MyApp({ Component, pageProps } : AppProps) { return ( <ClerkProvider {...pageProps}> <SignedIn> <Component {...pageProps} /> </SignedIn> <SignedOut> <RedirectToSignUp /> </SignedOut> </ClerkProvider> ); } export default MyApp;
pages/privatepage.tsximport { ClerkProvider, SignedIn, SignedOut, RedirectToSignUp } from "@clerk/clerk-react"; function PrivatePage() { return ( <ClerkProvider publishableKey={`{{pub_key}}`}> <SignedIn> Content that is displayed to signed in users. </SignedIn> <SignedOut> <RedirectToSignUp /> </SignedOut> </div> ); }
routes/index.tsximport { 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 | Type | Description |
|---|---|---|
signUpFallbackRedirectUrl? | string | 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. |
signUpForceRedirectUrl? | string | If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead. |
initialValues | SignUpInitialValues | The values used to prefill the sign-up fields with. |