Docs

<AuthenticateWithRedirectCallback />

The <AuthenticateWithRedirectCallback /> component is a crucial part of implementing custom OAuth flows in your application. It serves as the callback handler for the authentication process initiated by the authenticateWithRedirect() method. Render it on the route specified as the redirectUrl in your authenticateWithRedirect() call.

This component automatically handles the OAuth callback, completing the authentication process and managing the user's session.

Properties

  • Name
    signInUrl?
    Type
    string
    Description

    Full URL or path where the SignIn component is mounted.

  • Name
    signUpUrl?
    Type
    string
    Description

    Full URL or path where the SignUp component is mounted.

  • Name
    signInFallbackRedirectUrl?
    Type
    string
    Description

    The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

  • Name
    signUpFallbackRedirectUrl?
    Type
    string
    Description

    The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

  • Name
    signInForceRedirectUrl?
    Type
    string
    Description

    If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.

  • Name
    signUpForceRedirectUrl?
    Type
    string
    Description

    If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.

  • Name
    firstFactorUrl
    Type
    string | undefined
    Description

    Full URL or path to navigate during sign in, if identifier verification is required.

  • Name
    secondFactorUrl
    Type
    string | undefined
    Description

    Full URL or path to navigate during sign in, if 2FA is enabled.

  • Name
    resetPasswordUrl
    Type
    string
    Description

    Full URL or path to navigate during sign in, if the user is required to reset their password.

  • Name
    continueSignUpUrl
    Type
    string | undefined | null
    Description

    Full URL or path to navigate after an incomplete sign up.

  • Name
    verifyEmailAddressUrl
    Type
    string | undefined | null
    Description

    Full URL or path to navigate after requesting email verification.

  • Name
    verifyPhoneNumberUrl
    Type
    string | undefined | null
    Description

    Full URL or path to navigate after requesting phone verification.

  • Name
    afterSignInUrl (deprecated)
    Type
    string
    Description

    Full URL or path to navigate to after successful sign in. Defaults to /. It's recommended to use the environment variable instead. signInFallbackRedirectUrl and signInforceRedirectUrl have priority and should be used instead.

  • Name
    afterSignUpUrl (deprecated)
    Type
    string
    Description

    Full URL or path to navigate to after successful sign up. Defaults to /. It's recommended to use the environment variable instead. signUpFallbackRedirectUrl and signUpforceRedirectUrl have priority and should be used instead.

  • Name
    redirectUrl (deprecated)
    Type
    string
    Description

    Full URL or path to navigate after successful sign in or sign up. This is the same as setting afterSignInUrl and afterSignUpUrl to the same value. The signXfallbackRedirectUrl and signXforceRedirectUrl props have priority over the deprecated redirectUrl and should be used instead.

Usage

In the following example, when a user selects the "Sign in with Google" button, they are redirected to Google for authentication. After successful authentication, Google redirects the user back to your application at the /sso-callback route, where the <AuthenticateWithRedirectCallback /> component is automatically rendered. This component handles the OAuth callback, completes the authentication process, and manages the user's session.

app/layout.tsx
'use client'

import { ClerkProvider, SignedIn, SignedOut, UserButton, useSignIn } from '@clerk/nextjs'

const SignInOAuthButtons = () => {
  const { signIn, isLoaded } = useSignIn()

  if (!isLoaded) {
    return null
  }

  const signInWithGoogle = () =>
    signIn.authenticateWithRedirect({
      strategy: 'oauth_google',
      redirectUrl: '/sso-callback',
      redirectUrlComplete: '/',
    })

  return <button onClick={signInWithGoogle}>Sign in with Google</button>
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <header>
            <SignedOut>
              <SignInOAuthButtons />
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </header>
          <main>{children}</main>
        </body>
      </html>
    </ClerkProvider>
  )
}

Once you have implemented your sign-in flow, you can implement the callback page.

app/sso-callback/page.tsx
import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'

export default function Page() {
  return <AuthenticateWithRedirectCallback />
}

The following example is using the react-router-dom library, but you can use any routing library you want.

app.tsx
import {
  ClerkProvider,
  AuthenticateWithRedirectCallback,
  SignedOut,
  useSignIn,
  SignedIn,
} from '@clerk/clerk-react'

import { Route, Routes } from 'react-router-dom'

function App() {
  return (
    <ClerkProvider publishableKey={'YOUR_PUBLISHABLE_KEY'}>
      {/* Define a / route that displays the OAuth button */}
      <Routes>
        <Route path="/" element={<HomePages />} />

        {/* Define a /sso-callback route that renders the <AuthenticateWithRedirectCallback /> component */}
        <Route path="/sso-callback" element={<AuthenticateWithRedirectCallback />} />
      </Routes>
    </ClerkProvider>
  )
}

function HomePages() {
  return (
    <>
      <SignedOut>
        <SignInOAuthButtons />
      </SignedOut>
      <SignedIn>
        <div>You are signed in</div>
      </SignedIn>
    </>
  )
}

function SignInOAuthButtons() {
  const { signIn, isLoaded } = useSignIn()
  if (!isLoaded) {
    return null
  }
  const signInWithGoogle = () =>
    signIn.authenticateWithRedirect({
      strategy: 'oauth_google',
      redirectUrl: '/sso-callback',
      redirectUrlComplete: '/',
    })
  return <button onClick={signInWithGoogle}>Sign in with Google</button>
}

export default App

Feedback

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

Last updated on