From 992655760c69c7e2b7cd374e69441d0ff23b2aa3 Mon Sep 17 00:00:00 2001
From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com>
Date: Thu, 10 Oct 2024 16:08:17 -0400
Subject: [PATCH] update reference
---
.../control/authenticate-with-callback.mdx | 68 +++++++++----------
1 file changed, 34 insertions(+), 34 deletions(-)
diff --git a/docs/components/control/authenticate-with-callback.mdx b/docs/components/control/authenticate-with-callback.mdx
index b1b4d8c8cc..ea458be3a6 100644
--- a/docs/components/control/authenticate-with-callback.mdx
+++ b/docs/components/control/authenticate-with-callback.mdx
@@ -1,75 +1,74 @@
---
title: \RedirectCallback />
-description: The `` is used to complete a custom OAuth flow. Simply render the component under the route you passed as `redirectUrl` to the `authenticateWithRedirect` methods.
+description: Clerk's `` component is used to implement custom OAuth flows. It handles the OAuth callback and completes the authentication process.
---
-The `` is used to complete a custom OAuth flow. Simply render the component under the route you passed as `redirectUrl` to the `authenticateWithRedirect` methods.
+The `` component is a crucial part of implementing custom OAuth flows in your application. It serves as the callback handler for the authentication process initiated by the `authenticateWithRedirect()` method. Render it on the route specified as the `redirectUrl` in your `authenticateWithRedirect()` call.
+
+This component automatically handles the OAuth callback, completing the authentication process and managing the user's session.
## Usage
-
-
- This example below uses built in Next.js pages, but you could use any routing library you want.
+The following example demonstrates a sign-in flow that allows users to sign in with their Google account. The URL passed to `redirectUrl` is `/sso-callback`, so the `` component is rendered on this route. When a user selects the "Sign in with Google" button, they are redirected to Google for authentication. After successful authentication, Google redirects the user back to your application at the `/sso-callback` route, where the `` component is automatically rendered. This component handles the OAuth callback, completes the authentication process, and manages the user's session.
- ```tsx {{ filename: 'app.tsx' }}
- import '@/styles/globals.css'
- import { ClerkProvider, SignedIn, SignedOut, useSignIn } from '@clerk/nextjs'
- import { AppProps } from 'next/app'
- import { useRouter } from 'next/router'
+
+
+ ```tsx {{ filename: 'app/layout.tsx' }}
+ 'use client'
- const publicPages: Array = []
+ import { ClerkProvider, SignedIn, SignedOut, UserButton, useSignIn } from '@clerk/nextjs'
const SignInOAuthButtons = () => {
const { signIn, isLoaded } = useSignIn()
+
if (!isLoaded) {
return null
}
+
const signInWithGoogle = () =>
signIn.authenticateWithRedirect({
strategy: 'oauth_google',
redirectUrl: '/sso-callback',
redirectUrlComplete: '/',
})
+
return
}
- function MyApp({ Component, pageProps }: AppProps) {
- const { pathname } = useRouter()
- const isPublicPage = publicPages.includes(pathname)
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
-
- {isPublicPage ? (
-
- ) : (
- <>
-
-
-
-
-
-
-
- )}
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
)
}
-
- export default MyApp
```
Once you have implemented your sign in flow, you can implement the callback page.
- ```tsx {{ filename: '/pages/sso-callback.tsx' }}
+ ```tsx {{ filename: 'app/sso-callback/page.tsx' }}
import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'
- export default function SSOCallBack() {
+ export default function Page() {
return
}
```
- This example below is using the `react-router-dom` library. You can use any routing library you want.
+ The following example is using the `react-router-dom` library, but you can use any routing library you want.
```tsx {{ filename: 'app.tsx' }}
import {
@@ -84,11 +83,12 @@ The `` is used to complete a custom OAuth fl
function App() {
return (
-
+
{/* Define a / route that displays the OAuth button */}
} />
+ {/* Define a /sso-callback route that renders the component */}
} />
@@ -102,7 +102,7 @@ The `` is used to complete a custom OAuth fl
-