Skip to Content
You are viewing a beta version of Clerk Docs
Visit the latest docs
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. Defaults to /. It's recommended to use the environment variable instead.
afterSignUpUrlstringThe full URL or path to navigate after a successful sign up. Defaults to /. It's recommended to use the environment variable instead.
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