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:
- Persist the previous page's URL in a
redirect_urlquery string - 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:
| Variable | Description | Example |
|---|---|---|
CLERK_SIGN_IN_URL | The 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_URL | The 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_URL | If provided, this URL will always be redirected to after the user signs in. | /dashboard |
CLERK_SIGN_UP_FORCE_REDIRECT_URL | If provided, this URL will always be redirected to after the user signs up. | /dashboard |
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL | The 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_URL | The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /. | /dashboard |
| Variable | Description | Example |
|---|---|---|
NEXT_PUBLIC_CLERK_SIGN_IN_URL | The 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_URL | The 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_URL | If provided, this URL will always be redirected to after the user signs in. | /dashboard |
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL | If provided, this URL will always be redirected to after the user signs up. | /dashboard |
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL | The 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_URL | The 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.
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:
<RedirectToSignIn /><RedirectToSignUp /><ClerkProvider><SignInButton><SignUpButton><SignIn><SignUp>
See the appropriate reference documentation for each component, as linked above, for more information on what specific props are available.
Feedback
Last updated on