<AuthenticateWith RedirectCallback />
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.
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.
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.
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
- Name
signInUrl?
- Type
string
- Description
Full URL or path where the SignIn component is mounted.
- Name
signUpUrl?
- Type
string
- Description
Full URL or path where the SignUp component is mounted.
- Name
signInFallbackRedirectUrl?
- Type
string
- Description
The fallback URL to redirect to after the user signs in, if there's no
redirect_url
in the path already. Defaults to/
. It's recommended to use the environment variable instead.
- Name
signUpFallbackRedirectUrl?
- Type
string
- Description
The fallback URL to redirect to after the user signs up, if there's no
redirect_url
in the path already. Defaults to/
. It's recommended to use the environment variable instead.
- Name
signInForceRedirectUrl?
- Type
string
- Description
If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.
- Name
signUpForceRedirectUrl?
- Type
string
- Description
If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.
- Name
firstFactorUrl
- Type
string | undefined
- Description
Full URL or path to navigate during sign in, if identifier verification is required.
- Name
secondFactorUrl
- Type
string | undefined
- Description
Full URL or path to navigate during sign in, if 2FA is enabled.
- Name
resetPasswordUrl
- Type
string
- Description
Full URL or path to navigate during sign in, if the user is required to reset their password.
- Name
continueSignUpUrl
- Type
string | undefined | null
- Description
Full URL or path to navigate after an incomplete sign up.
- Name
verifyEmailAddressUrl
- Type
string | undefined | null
- Description
Full URL or path to navigate after requesting email verification.
- Name
verifyPhoneNumberUrl
- Type
string | undefined | null
- Description
Full URL or path to navigate after requesting phone verification.
- 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
andsignInforceRedirectUrl
have priority and should be used instead.
- Name
afterSignUpUrl
(deprecated)- 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.signUpFallbackRedirectUrl
andsignUpforceRedirectUrl
have priority and should be used 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
andafterSignUpUrl
to the same value. ThesignXfallbackRedirectUrl
andsignXforceRedirectUrl
props have priority over the deprecatedredirectUrl
and should be used instead.
Feedback
Last updated on