Onboarding
Send newly registered users to an onboarding route.
Clerk · Pipe
afterSignUpUrl
afterSignUpUrl is the URL or path Clerk uses after a successful sign-up. Configure it in the JavaScript SDK and retrieve the resolved destination with buildAfterSignUpUrl().
How it works
afterSignUpUrl identifies the full URL or path Clerk should use after a successful sign-up. In the JavaScript SDK, provide it while loading Clerk, then call buildAfterSignUpUrl() to obtain the configured destination; the builder can also receive URL search parameters.
Syntax
Clerk.load({ afterSignUpUrl: string });
Clerk.buildAfterSignUpUrl(params?: { params?: URLSearchParams }): stringParameters
| Name | Type | Description |
|---|---|---|
afterSignUpUrl | string | Full URL or path to navigate to after successful sign-up. |
params | { params?: URLSearchParams } | Optional object containing URL search parameters used when building the destination. |
Returns
A string containing the configured post-sign-up URL.
Key points
- Use
afterSignUpUrlto direct a newly registered user to a path or complete URL after sign-up succeeds. - The destination can be supplied through supported configuration or directly through the relevant Clerk integration.
- In React-based SDKs, configure the post-sign-up destination through
ClerkProvider. - Non-React JavaScript integrations can set the value in the object passed to
Clerk.load. buildAfterSignUpUrlreturns the configured destination and optionally accepts URL search parameters.
Common mistakes
- When no applicable redirect value is configured, Clerk falls back to a request
redirect_urland then/. - For current Core 2 migrations, use the corresponding fallback redirect property instead of relying on the legacy-style
afterSignUpUrlprop.
Example: Configure and read the post-sign-up URL
import { Clerk } from '@clerk/clerk-js';
await Clerk.load({ afterSignUpUrl: '/welcome' });
const destination = Clerk.buildAfterSignUpUrl();
console.log(destination);Configures the post-sign-up destination and reads the resulting URL from the loaded Clerk instance.
When to use it
Application entry
Take users to the application home page after registration.
Parameterized redirects
Build a destination that preserves query parameters.
Interview questions
QWhat does afterSignUpUrl control?
It is the full URL or path Clerk uses after a successful sign-in or sign-up. In the JavaScript SDK, it can be supplied to Clerk.load, and buildAfterSignUpUrl() returns the configured value.
Follow-up: How can the resulting URL include query parameters? Call buildAfterSignUpUrl({ params }), where params is a URLSearchParams instance.
QHow do you configure and retrieve it in JavaScript?
The JavaScript SDK accepts it in the options passed to Clerk.load, for example { afterSignUpUrl: '/welcome' }. After loading, Clerk.buildAfterSignUpUrl() returns the configured destination as a string.
Follow-up: What is the builder's signature? buildAfterSignUpUrl(params?: { params?: URLSearchParams }): string.
QWhat happens if no destination is configured?
The documented default is / when no post-sign-up destination is otherwise supplied. A request redirect_url can take precedence before that fallback in the redirect flow.
Follow-up: What should a Core 2 migration use to preserve an explicit fallback destination? Use signUpFallbackRedirectUrl rather than the older afterSignUpUrl prop.
Related
afterSignInUrlbuildAfterSignUpUrlsignUpFallbackRedirectUrlredirect_urlClerk.load