<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.tsx
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;

pages/privatepage.tsx
import {
  ClerkProvider,
  SignedIn,
  SignedOut,
  RedirectToSignUp
} from "@clerk/clerk-react";
 
function PrivatePage() {
  return (
    <ClerkProvider publishableKey="pk_test_••••••••••••••••••••••••••••••••••">
      <SignedIn>
        Content that is displayed to signed in
        users.
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </div>
  );
}

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	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.

Last updated on November 21, 2023