<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.
1import React from "react";2import {3ClerkProvider,4AuthenticateWithRedirectCallback,5UserButton,6SignedOut,7useSignIn,8} from "@clerk/clerk-react";910const frontendApi = process.env.REACT_APP_CLERK_FRONTEND_API;1112function App() {13return (14// react-router-dom requires your app to be wrapped with a Router15<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>2425{/* Define a /sso-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}3536function SignInOAuthButtons() {37const { signIn } = useSignIn();38const signInWithGoogle = () =>39signIn.authenticateWithRedirect({40strategy: "oauth_google",41redirectUrl: "/sso-callback",42redirectUrlComplete: "/",43});44return <button onClick={signInWithGoogle}>Sign in with Google</button>;45}
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. |