<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
import {
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;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>
</div>
);
}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>
);
}- Name
signUpFallbackRedirectUrl?- Type
string- Description
The fallback URL to redirect to after the user signs up, if there's no
redirect_urlin 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.