Customizing your Account Portal redirects
After a user signs in or signs up, Clerk automatically redirects users back to your application by appending a redirect_url
query param on the Account Portal page. However, Clerk provides various options for you to customize where your users are redirected to.
Environment variables
You can define the paths you want the users to be redirected to via environment variables. In this example, we redirect users to /dashboard
after signing in, and to /onboarding
after signing up.
Middleware
If you are using Next.js and want a more programmatically generated redirect option, you can use the afterAuth()
function from our Clerk middleware.
afterSignInUrl
and afterSignUpUrl
props
You can explicitly define the redirect paths by passing the afterSignInUrl
and afterSignUpUrl
properties to the respective components.
Control components
Button components
In the case that you are using a <SignInButton>
or <SignUpButton>
, you can also pass the properties into those components. We recommend defining both afterSignInUrl
and afterSignUpUrl
redirects in each button as some users may choose to sign up instead after attempting to sign in.
Feedback
Last updated on