Docs

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.

However, you can customize this behavior to redirect users to a specific page by using the following methods:

Environment variables

It is recommended to use environment variables to define your redirect URLs.

Fallback redirect

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 redirect

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, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)'])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) await auth.protect()
})

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(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.

Warning

The afterSignIn, afterSignUp, and redirectUrl props are deprecated. If you're still using them, the props described in this section will override them.

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.

  • fallbackRedirectUrl - Used by sign-in and sign-up related components.
  • signInFallbackRedirectUrl - Used on sign up components, such as <SignUp /> and <SignUpButton>.
  • signUpFallbackRedirectUrl - Used on sign in components, such as <SignIn /> and <SignInButton>.

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.

  • forceRedirectUrl - Used by sign-in and sign-up related components.
  • signInForceRedirectUrl - Used on sign up components, such as <SignUp /> and <SignUpButton>.
  • signUpForceRedirectUrl - Used on sign in components, such as <SignIn /> and <SignInButton>.

Control components

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

Note

<RedirectToSignIn /> or <RedirectToSignUp /> child components will always take precedence over <ClerkProvider>.

Button components

<SignInButton> and <SignUpButton> also accepts these properties.

Note

It is recommended to define both signInFallbackRedirectUrl and signUpFallbackRedirectUrl redirects in each button as some users may choose to sign up after attempting to sign-in, or sign in after attempting to sign-up.

app/sign-in/page.tsx
'use client'
import { SignInButton, SignUpButton } from '@clerk/nextjs'

export default function SignInPage() {
  return (
    <div>
      <h1>Welcome!</h1>

      <SignInButton fallbackRedirectUrl="/dashboard" signUpFallbackRedirectUrl="/onboarding">
        Sign in
      </SignInButton>

      <SignUpButton signInFallbackRedirectUrl="/dashboard" fallbackRedirectUrl="/onboarding">
        Sign up
      </SignUpButton>
    </div>
  )
}

UI Components

<SignIn> and <SignUp> also accept these properties.

Note

It is recommended to define both signInFallbackRedirectUrl and signUpFallbackRedirectUrl redirects in each component as some users may choose to sign up instead after attempting to sign in.

app/page.tsx
import { SignIn, SignUp, useUser } from '@clerk/nextjs'

export default function Home() {
  const { user } = useUser()

  if (!user) {
    return (
      <>
        <h1>Sign in or sign up</h1>
        <div>
          <SignIn fallbackRedirectUrl="/dashboard" signUpFallbackRedirectUrl="/onboarding" />
          <SignUp fallbackRedirectUrl="/onboarding" signInFallbackRedirectUrl="/dashboard" />
        </div>
      </>
    )
  }

  return <div>Welcome!</div>
}

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on