Skip to main content
Docs

Customize your redirect URLs

To avoid breaking a user's flow through your app, when a user navigates to a Clerk sign up or sign in page via a link or button, Clerk will:

  1. Persist the previous page's URL in a redirect_url query string
  2. Navigate back to that page after the sign-up or sign-in is completed

For example, a user selecting a sign-in button on example.com/foo will navigate to example.com/sign-in?redirect_url=example.com/foo, then navigate back to example.com/foo upon completing the sign-in process.

However, you can customize this behavior to redirect users to a specific page by using the following methods:

Environment variables

The following environment variables are available for customizing your redirect URLs:

VariableDescriptionExample
CLERK_SIGN_IN_URLThe full URL or path to your sign-in page. Needs to point to your primary application on the client-side. Required for a satellite application in a development instance./sign-in
CLERK_SIGN_UP_URLThe full URL or path to your sign-up page. Needs to point to your primary application on the client-side. Required for a satellite application in a development instance./sign-up
CLERK_SIGN_IN_FORCE_REDIRECT_URLIf provided, this URL will always be redirected to after the user signs in./dashboard
CLERK_SIGN_UP_FORCE_REDIRECT_URLIf provided, this URL will always be redirected to after the user signs up./dashboard
CLERK_SIGN_IN_FALLBACK_REDIRECT_URLThe fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /./dashboard
CLERK_SIGN_UP_FALLBACK_REDIRECT_URLThe fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /./dashboard
VariableDescriptionExample
NEXT_PUBLIC_CLERK_SIGN_IN_URLThe full URL or path to your sign-in page. Needs to point to your primary application on the client-side. Required for a satellite application in a development instance./sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URLThe full URL or path to your sign-up page. Needs to point to your primary application on the client-side. Required for a satellite application in a development instance./sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URLIf provided, this URL will always be redirected to after the user signs in./dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URLIf provided, this URL will always be redirected to after the user signs up./dashboard
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URLThe fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /./dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URLThe fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /./dashboard

Redirect URL props

This section describes the properties available for customizing your redirect URLs on Clerk components. In general, it's recommended to use environment variables instead.

Warning

The afterSignIn, afterSignUp, and redirectUrl props are deprecated. If you're still using them, the props described in this section will override them.

Fallback redirect URL props

The "fallback redirect URL" props will only be used if there is no redirect_url value. This can happen if the user has navigated directly to the sign up or sign in page.

  • fallbackRedirectUrl - Used by sign-in and sign-up related components.
  • signInFallbackRedirectUrl - Used for the 'Sign In' link that's rendered on sign-up components, such as <SignUp /> and <SignUpButton>.
  • signUpFallbackRedirectUrl - Used for the 'Sign Up' link that's rendered on sign-in components, such as <SignIn /> and <SignInButton>.

Force redirect URL props

The "force redirect URL" props will always redirect to the provided URL after sign up or sign in, regardless of what page the user was on before, and will override the redirect_url value if present.

  • forceRedirectUrl - Used by sign-in and sign-up related components.
  • signInForceRedirectUrl - Used for the 'Sign In' link that's rendered on sign-up components, such as <SignUp /> and <SignUpButton>.
  • signUpForceRedirectUrl - Used for the 'Sign Up' link that's rendered on sign-in components, such as <SignIn /> and <SignInButton>.

Set the props

It is recommended to define both signInFallbackRedirectUrl and signUpFallbackRedirectUrl props, or signInForceRedirectUrl and signUpForceRedirectUrl props, as some users may choose to sign up instead after attempting to sign in, and vice versa.

The following components accept the redirect URL props:

See the appropriate reference documentation for each component, as linked above, for more information on what specific props are available.

Note

<RedirectToSignIn /> or <RedirectToSignUp /> child components will always take precedence over <ClerkProvider>.

Feedback

What did you think of this content?

Last updated on