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;

Properties

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.
afterSignInUrlstringThe full URL or path to navigate after a successful sign in.
afterSignUpUrlstringThe full URL or path to navigate after a successful sign up.
initialValuesSignInInitialValuesThe values used to prefill the sign-in fields with.

Last updated on February 13, 2024

What did you think of this content?

Clerk © 2024