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:

1. Persist the previous page's URL in a redirect_url query string
2. 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.

The following guide describes your options for customizing where your users are redirected to after completing a sign-in or sign-up process.

Environment variables

You can define a fallback redirect URL in the case that there is no redirect_url in the path already. This is useful for users who navigate directly to the sign-in or sign-up page.

The following example shows how to define a fallback redirect URL for both sign-in and sign-up pages:

.env.local
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/onboarding

.env
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/dashboard
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/onboarding

Force environment variable redirects

If you would like to override the redirect_url value and supply a custom redirect URL after sign-in or sign-up, you can use the following environment variables:

.env.local
NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/onboarding

.env
CLERK_SIGN_IN_FORCE_REDIRECT_URL=/dashboard
CLERK_SIGN_UP_FORCE_REDIRECT_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.ts
import { 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)(.*)'],
};

Redirect URL props

You can explicitly define the redirect paths after sign-up or sign-in by using the properties described in this section with Clerk's components. In general, it is 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.

• signInFallbackRedirectUrl
• signUpFallbackRedirectUrl

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.

• signInForceRedirectUrl
• signUpForceRedirectUrl

Control components

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

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

example.js
function App() {
  return (
    <ClerkProvider publishableKey={clerkPubKey}>
      <SignedIn>
        <Welcome />
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp
          signInFallbackRedirectUrl="/dashboard"
          signUpFallbackRedirectUrl="/onboarding"
        />
      </SignedOut>
    </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 signInFallbackRedirectUrl and signUpFallbackRedirectUrl 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 signInFallbackRedirectUrl="/dashboard" signUpFallbackRedirectUrl="/onboarding">
      Sign in
    </SignInButton>
 
    <SignUpButton signInFallbackRedirectUrl="/dashboard" signUpFallbackRedirectUrl="/onboarding">
      Sign up
    </SignUpButton>
  </div>
);
}

example.js
import { SignInButton, SignUpButton } from "@clerk/clerk-react";
 
export default function Example() {
  return (
    <div>
      <h1>Welcome!</h1>
 
      <SignInButton signInFallbackRedirectUrl="/dashboard" signUpFallbackRedirectUrl="/onboarding">
        Sign in
      </SignInButton>
 
      <SignUpButton signInFallbackRedirectUrl="/dashboard" signUpFallbackRedirectUrl="/onboarding">
        Sign up
      </SignUpButton>
    </div>
  );
}

pages/index.js
import { SignInButton, SignUpButton } from "@clerk/remix";
 
export default function Home() {
  return (
    <div>
      <h1>Welcome!</h1>
 
      <SignInButton signInFallbackRedirectUrl="/dashboard" signUpFallbackRedirectUrl="/onboarding">
        Sign in
      </SignInButton>
 
      <SignUpButton signInFallbackRedirectUrl="/dashboard" signUpFallbackRedirectUrl="/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 signInFallbackRedirectUrl="/dashboard" signUpFallbackRedirectUrl="/onboarding">
        Sign in
      </SignInButton>
 
      <SignUpButton signInFallbackRedirectUrl="/dashboard" signUpFallbackRedirectUrl="/onboarding">
        Sign up
      </SignUpButton>
    </div>
  );
}