Require sign-in
Protect a page or route by sending signed-out visitors to authentication.
Clerk · Component
RedirectToSignIn
RedirectToSignIn sends unauthenticated users to the sign-in URL configured in the Clerk application. Its navigation behaves like a server-side redirect and replaces the current history entry.
How it works
Render this control component when an unauthenticated visitor should be sent to the application's configured sign-in page. Navigation behaves like a server redirect and replaces the current history entry rather than leaving it available as a back-navigation destination.
Syntax
<RedirectToSignIn />Key points
- It sends the browser to the sign-in URL configured for the current Clerk application instance.
- Its navigation models a server-side 3xx redirect, making it suitable for guarding pages at render time.
- The redirect replaces the current history location instead of preserving the protected page as a back-stack entry.
- The same component reference is available across multiple Clerk SDK integrations, including React and Next.js.
Common mistakes
- Because the redirect replaces the current history entry, users cannot return to the protected location with the browser Back button.
Example: Redirect signed-out users
import { Show, RedirectToSignIn, UserButton } from '@clerk/react'
export default function Page() {
return (
<>
<Show when="signed-in">
<UserButton />
</Show>
<Show when="signed-out">
<RedirectToSignIn />
</Show>
</>
)
}Displays the user button for authenticated users and redirects unauthenticated users to the configured sign-in URL.
When to use it
Branch by auth state
Use Clerk's authentication-state rendering to show signed-in content and redirect everyone else.
Interview questions
QWhat does RedirectToSignIn do?
It navigates to the sign-in URL configured for the application instance. Its navigation has server-side 3xx-like behavior and overrides the current history location.
Follow-up: How would you avoid redirecting authenticated users? Render it only in a signed-out branch, such as a Show component whose condition is signed-out.
QHow is RedirectToSignIn commonly used in a React page?
In React, import it from @clerk/react and render it as a JSX component. It is a control component intended to be composed with Clerk's authentication-state controls.
Follow-up: What complementary control can render authenticated-only content? Use Show with when="signed-in", or the related signed-in control documented by Clerk.
QWhere does the component obtain its destination?
It redirects to the sign-in URL configured in the Clerk application instance rather than taking a destination URL in the component markup. The documented component declaration is simply <RedirectToSignIn />.
Follow-up: What should be configured when the default sign-in destination is not the desired route? Change the sign-in URL in the application's Clerk configuration so the component targets that configured location.
Related
ShowUserButtonSignInRedirectToSignUpSignedInSignedOut