<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.tsximport { 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.tsximport { 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.tsximport { 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 |
|---|---|---|
signInFallbackRedirectUrl? | string | The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead. |
signInForceRedirectUrl? | string | If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead. |
initialValues | SignInInitialValues | The values used to prefill the sign-in fields with. |
Last updated on April 22, 2024