Docs

<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={`YOUR_PUBLISHABLE_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
    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 has priority over the legacy afterSignInUrl. Use fallbackRedirectUrl or forceRedirectUrl instead of afterSignInUrl.

  • Name
    afterSignUpUrl
    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.

  • 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. signInFallbackRedirectUrl has priority over the legacy redirectUrl. Use fallbackRedirectUrl or forceRedirectUrl instead of redirectUrl.

  • Name
    secondFactorUrl
    Type
    string
    Description

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

Feedback

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