Docs

You are viewing an archived version of the docs.Go to latest version

<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={`YOUR_PUBLISHABLE_KEY`}>
      <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>
  );
}
  • Name
    redirectUrl
    Type
    string
    Description

    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.

  • Name
    afterSignInUrl
    Type
    string
    Description

    The full URL or path to navigate after a successful sign in.

  • Name
    afterSignUpUrl
    Type
    string
    Description

    The full URL or path to navigate after a successful sign up.

  • Name
    initialValues
    Type
    SignUpInitialValues
    Description

    The values used to prefill the sign-up fields with.

Feedback

What did you think of this content?

Last updated on