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 should 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.
.envNEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding
.envCLERK_AFTER_SIGN_IN_URL=/dashboard CLERK_AFTER_SIGN_UP_URL=/onboarding
Middleware
If you are using Next.js and want a more programmatically generated redirect option, you can use the auth().protect()
method in your Clerk middleware.
middleware.tsimport { clerkMiddleware } from '@clerk/nextjs/server'; export default clerkMiddleware((auth, req) => { if (req.nextUrl.pathname.startsWith('/dashboard')) auth().protect(); }); export const config = { matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'], };
afterSignInUrl
and afterSignUpUrl
props
You can explicitly define the redirect paths by passing the afterSignInUrl
and afterSignUpUrl
properties to the respective components. In general, you should use environment variables instead.
Control components
example.jsfunction App() { return ( <ClerkProvider publishableKey={clerkPubKey} afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding" > <SignedIn> <Welcome /> </SignedIn> <SignedOut> <RedirectToSignIn /> </SignedOut> </ClerkProvider> ); }
example.jsfunction App() { return ( <ClerkProvider publishableKey={clerkPubKey}> <SignedIn> <Welcome /> </SignedIn> <SignedOut> <RedirectToSignIn afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding" /> </SignedOut> </ClerkProvider> ); }
example.jsfunction App() { return ( <ClerkProvider publishableKey={clerkPubKey}> <SignedIn> <Welcome /> </SignedIn> <SignedOut> <RedirectToSignUp afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding" /> </SignedOut> </ClerkProvider> ); }
<RedirectToSignIn />
or <RedirectToSignUp />
child components will always take precedence over <ClerkProvider>
.
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.
pages/index.jsimport { SignInButton, SignUpButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1>Welcome!</h1> <SignInButton afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding"> Sign in </SignInButton> <SignUpButton afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding"> Sign up </SignUpButton> </div> ); }
example.jsimport { SignInButton, SignUpButton } from "@clerk/clerk-react"; export default function Example() { return ( <div> <h1>Welcome!</h1> <SignInButton afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding"> Sign in </SignInButton> <SignUpButton afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding"> Sign up </SignUpButton> </div> ); }
pages/index.jsimport { SignInButton, SignUpButton } from "@clerk/remix"; export default function Home() { return ( <div> <h1>Welcome!</h1> <SignInButton afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding"> Sign in </SignInButton> <SignUpButton afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding"> Sign up </SignUpButton> </div> ); }
pages/index.jsimport { SignInButton, SignUpButton } from "gatsby-plugin-clerk"; export default function Home() { return ( <div> <h1>Welcome!</h1> <SignInButton afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding"> Sign in </SignInButton> <SignUpButton afterSignInUrl="/dashboard" afterSignUpUrl="/onboarding"> Sign up </SignUpButton> </div> ); }
Last updated on January 9, 2024