Skip to Content
You are viewing a beta version of Clerk Docs
Visit the latest docs
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<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 />; }

Properties

NameTypeDescription
afterSignInUrlstringFull URL or path to navigate after successful sign in. Defaults to /. It's recommended to use the environment variable instead.
afterSignUpUrlstringFull URL or path to navigate after successful sign up. Defaults to /. It's recommended to use the environment variable instead.
redirectUrlstringFull 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.
secondFactorUrlstringFull URL or path to navigate during sign in, if 2FA is enabled.

Last updated on February 13, 2024

What did you think of this content?

Clerk © 2024