Send unauthenticated visitors from a registration-required page to sign-up.
Access control
Clerk · Component
RedirectToSignUp
<RedirectToSignUp /> declaratively sends signed-out users to the sign-up URL configured for the Clerk application. Its navigation replaces the current history entry, matching server-side redirect behavior.
How it works
Render this control component when a user must register before accessing a page. Clerk navigates to the sign-up URL configured for the application, replacing the current history entry in the same way as a server-side redirect.
Syntax
<RedirectToSignUp />Returns
No rendered UI is described; rendering triggers navigation to the configured sign-up URL.
Key points
- It sends the browser to the application instance’s configured sign-up URL.
- Its navigation semantics are comparable to an HTTP 3xx redirect.
- The current history entry is replaced instead of adding a normal navigation entry.
- Render it conditionally for signed-out users so authenticated users do not get redirected.
Common mistakes
- Because navigation replaces the current history entry, users generally cannot return to the protected page with the browser Back button.
Example: Redirect signed-out users to sign-up
import { Show, RedirectToSignUp, UserButton } from '@clerk/react'
export default function Page() {
return (
<>
<Show when="signed-in">
<UserButton />
</Show>
<Show when="signed-out">
<RedirectToSignUp />
</Show>
</>
)
}Shows the user menu to signed-in users and sends signed-out users to the configured sign-up URL.
When to use it
Pair signed-out redirection with signed-in controls in the same route.
Conditional authentication UI
Direct users to an application route that renders Clerk’s <SignUp /> component.
Custom registration flow
Interview questions
QWhat does <RedirectToSignUp /> do?
It navigates to the sign-up URL configured in the application instance. Its navigation behaves like a server-side 3xx redirect and replaces the current history entry.
Follow-up: How would you support a custom sign-up page? Configure the application’s sign-up URL to the route where <SignUp /> is mounted, then render this component when the user is signed out.
QHow is it typically used in a React page?
Place it in a branch that renders only for signed-out users, commonly alongside a signed-in branch containing user controls. The component itself performs the navigation, so no click handler is required.
Follow-up: What should the signed-in branch render? It can show authenticated UI such as <UserButton />, while the redirect component remains unavailable to signed-in users.
QHow is the destination selected and customized?
The component uses the sign-up URL configured for the application instance rather than declaring a destination in the component markup. Redirect URL customization can also be configured through supported Clerk component properties or environment variables.
Follow-up: Why define both sign-up and sign-in redirect settings? A user who starts one flow may switch to the other, so configuring both provides consistent fallback behavior.
Related
RedirectToSignInSignUpSignUpButtonClerkProviderredirectToSignUp()