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.

.env
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding

.env
CLERK_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 afterAuth() function from our Clerk middleware.

The afterAuth() function will always take precedence over environment variables.

middleware.ts
export default authMiddleware({
  afterAuth(auth, req, evt) {
    // handle users who aren't authenticated
    if (!auth.userId && !auth.isPublicRoute) {
      if (req.url === "/onboarding") {
        return redirectToSignUp({ returnBackUrl: "/onboarding" });
      } else if (req.url === "/dashboard") {
        return redirectToSignIn({ returnBackUrl: "/dashboard" });
      }
    }
  },
  publicRoutes: ["/publicly-available-page"],
});

You can explicitly define the redirect paths by passing the afterSignInUrl and afterSignUpUrl properties to the respective components.

Control components

example.js
function App() {
  return (
    <ClerkProvider publishableKey={clerkPubKey} afterSignInUrl='/dashboard' afterSignUpUrl='/onboarding' >
      <SignedIn>
        <Welcome />
      </SignedIn>
      <SignedOut>
        <RedirectToSignIn />
      </SignedOut>
    </ClerkProvider>
  );
}

example.js
function App() {
  return (
    <ClerkProvider publishableKey={clerkPubKey}>
      <SignedIn>
        <Welcome />
      </SignedIn>
      <SignedOut>
        <RedirectToSignIn afterSignInUrl='/dashboard' afterSignUpUrl='/onboarding' />
      </SignedOut>
    </ClerkProvider>
  );
}

example.js
function 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.js
import { 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.js
import { 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.js
import { 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.js
import { 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>
  );
}

Environment variables

Middleware

afterSignInUrl and afterSignUpUrl props

Control components

Button components

`afterSignInUrl` and `afterSignUpUrl` props