<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 |
|---|---|---|
redirectUrl | string | Full URL or path to navigate after successful sign in or sign up. This is the same as setting afterSignInUrl and afterSignUpUrl to the same value. |
afterSignInUrl | string | The full URL or path to navigate after a successful sign in. |
afterSignUpUrl | string | The full URL or path to navigate after a successful sign up. |
initialValues | SignUpInitialValues | The values used to prefill the sign-up fields with. |