<RedirectToSignIn />

The <RedirectToSignIn /> component will navigate to the sign in 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,
  RedirectToSignIn,
} from "@clerk/nextjs";
import { AppProps } from "next/app";
 
function MyApp({ Component, pageProps } : AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignedIn>
        <Component {...pageProps} />
      </SignedIn>
      <SignedOut>
        <RedirectToSignIn />
      </SignedOut>
    </ClerkProvider>
  );
}
 
export default MyApp;

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

routes/index.tsx
import {
  SignedIn,
  SignedOut,
  RedirectToSignIn,
  UserButton,
} from "@clerk/remix";
 
export default function Index() {
  return (
    <div>
      <SignedIn>
        <h1>Index route</h1>
        <p>You are signed in!</p>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <RedirectToSignIn />
      </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. Defaults to `/`. It's recommended to use the environment variable instead.
`afterSignUpUrl`	`string`	The full URL or path to navigate after a successful sign up. Defaults to `/`. It's recommended to use the environment variable instead.
`initialValues`	`SignInInitialValues`	The values used to prefill the sign-in fields with.

Last updated on February 13, 2024