Search…
<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 callbackUrl to the authenticateWithRedirect methods.
For a more detailed walkthrough, you can check the Social Login (OAuth) guide.
Clerk React
1
import React from "react";
2
import {
3
ClerkProvider,
4
AuthenticateWithRedirectCallback,
5
UserButton,
6
SignedOut,
7
useSignIn,
8
} from "@clerk/clerk-react";
9
10
const frontendApi = process.env.REACT_APP_CLERK_FRONTEND_API;
11
12
function App() {
13
return (
14
// react-router-dom requires your app to be wrapped with a Router
15
<BrowserRouter>
16
<ClerkProvider frontendApi={frontendApi}>
17
<Switch>
18
{/* Define a / route that displays the OAuth button */}
19
<Route path="/">
20
<SignedOut>
21
<SignInOAuthButtons />
22
</SignedOut>
23
</Route>
24
25
{/* Define a /sss-callback route that handle the OAuth redirect flow */}
26
<Route path="/sso-callback">
27
{/* Simply render the component */}
28
<AuthenticateWithRedirectCallback />
29
</Route>
30
</Switch>
31
</ClerkProvider>
32
</BrowserRouter>
33
);
34
}
35
36
function SignInOAuthButtons() {
37
const { authenticateWithRedirect } = useSignIn();
38
const signInWithGoogle = () =>
39
authenticateWithRedirect({
40
strategy: "oauth_google",
41
callbackUrl: "/sso-callback",
42
callbackUrlComplete: "/",
43
});
44
return <button onClick={signInWithGoogle}>Sign in with Google</button>;
45
}
Copied!

Props

Name
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.
Last modified 1mo ago
Copy link
Edit on GitHub