`<AuthenticateWithRedirectCallback />`

The <AuthenticateWithRedirectCallback /> is used to complete a custom OAuth flow. Simply render the component under the route you passed as redirectUrl to the authenticateWithRedirect methods.

Usage

This example below uses built in Next.js pages, but you could use any routing library you want.

app.tsx
import '@/styles/globals.css';
import { ClerkProvider, SignedIn, SignedOut, useSignIn } from '@clerk/nextjs';
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
 
const publicPages: Array<string> = [];
 
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>;
};
function MyApp({ Component, pageProps }: AppProps) {
  const { pathname } = useRouter();
  const isPublicPage = publicPages.includes(pathname);
 
  return (
    <ClerkProvider {...pageProps}>
      {isPublicPage ? (
        <Component {...pageProps} />
      ) : (
        <>
          <SignedIn>
            <Component {...pageProps} />
          </SignedIn>
          <SignedOut>
            <SignInOAuthButtons />
          </SignedOut>
        </>
      )}
    </ClerkProvider>
  );
}
 
export default MyApp;

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

/pages/sso-callback.tsx
import { AuthenticateWithRedirectCallback } from '@clerk/nextjs';
 
export default function SSOCallBack() {
  return <AuthenticateWithRedirectCallback />;
}

This example below is using the react-router-dom library. 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={`{{pub_key}}`}>
      {/* Define a / route that displays the OAuth button */}
      <Routes>
        <Route path="/" element={<HomePages />} />
 
        <Route
          path="/sso-callback"
          element={<AuthenticateWithRedirectCallback />}
        />
      </Routes>
    </ClerkProvider>
  );
}
 
function HomePages() {
  return (
    <>
      <SignedOut>
        <SignInOAuthButtons />
      </SignedOut>
      <SignedIn>
        <div>Hello! 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;

Properties

Name	Type	Description
`afterSignInUrl`	`string`	Full URL or path to navigate after successful sign in. Defaults to `/`. It's recommended to use the environment variable instead.
`afterSignUpUrl`	`string`	Full URL or path to navigate after successful sign up. Defaults to `/`. It's recommended to use the environment variable instead.
`redirectUrl`	`string`	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.
`secondFactorUrl`	`string`	Full URL or path to navigate during sign in, if 2FA is enabled.

Last updated on February 13, 2024