<AuthenticateWithRedirectCallback />

Complete a custom OAuth flow

Overview

The <AuthenticateWithRedirectCallback/> is used to complete a custom OAuth flow started by calling either SignIn.authenticateWithRedirect(params) or SignUp.authenticateWithRedirect(params).

Internally, it calls the Clerk.handleRedirectCallback() method

Usage

Make sure you've followed the installation guide for Clerk React before running the snippets below.

The most common scenario for using the <AuthenticateWithRedirectCallback/> component, is to complete a custom OAuth sign in or sign up flow in React and NextJS apps. Simply render the component under the route you passed as redirectUrl to the authenticateWithRedirect methods.

For a more detailed walkthrough, you can check the Social Login (OAuth) guide.

1
import React from "react";
2
import {
3
  ClerkProvider,
4
  AuthenticateWithRedirectCallback,
5
  UserButton,
6
  SignedOut,
7
  useSignIn,
8
} from "@clerk/clerk-react";
9

10
function App() {
11
  return (
12
    //  react-router-dom requires your app to be wrapped with a Router
13
    <BrowserRouter>
14
      <ClerkProvider publishableKey="clerk-pub-key">
15
        <Switch>
16
          {/* Define a / route that displays the OAuth button */}
17
          <Route path="/">
18
            <SignedOut>
19
              <SignInOAuthButtons />
20
            </SignedOut>
21
          </Route>
22
         
23
           {/* Define a /sso-callback route that handle the OAuth redirect flow */}
24
          <Route path="/sso-callback">
25
            {/* Simply render the component */}
26
            <AuthenticateWithRedirectCallback />
27
          </Route>
28
        </Switch>
29
      </ClerkProvider>
30
    </BrowserRouter>
31
  );
32
}
33

34
function SignInOAuthButtons() {
35
  const { signIn } = useSignIn();
36
  const signInWithGoogle = () =>
37
    signIn.authenticateWithRedirect({
38
      strategy: "oauth_google",
39
      redirectUrl: "/sso-callback",
40
      redirectUrlComplete: "/",
41
    });
42
  return <button onClick={signInWithGoogle}>Sign in with Google</button>;
43
}

Props

Name	Type	Description
afterSignInUrl?	string	Full URL or path to navigate after successful sign in.
afterSignUpUrl?	string	Full URL or path to navigate after successful sign up.
redirectUrl?	string	Full URL or path to navigate after successful sign in or sign up. 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.