Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

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

Props

NameTypeDescription
redirectUrlstringFull 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.
afterSignInUrlstringFull URL or path to navigate after successful sign-in.
afterSignUpUrlstringFull URL or path to navigate after successful sign-up.
initialValuesSignInInitialValuesThe values used to prefill the sign-in fields with.

What did you think of this content?

Clerk © 2023