update reference

clerk · Oct 10, 2024 · 9926557 · 9926557
1 parent b391664
commit 9926557
Showing 1 changed file with 34 additions and 34 deletions.
diff --git a/docs/components/control/authenticate-with-callback.mdx b/docs/components/control/authenticate-with-callback.mdx
@@ -1,75 +1,74 @@
 ---
 title: <code>\<AuthenticateWith<wbr />RedirectCallback /></code>
-description: 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.
+description: Clerk's `<AuthenticateWithRedirectCallback />` component is used to implement custom OAuth flows. It handles the OAuth callback and completes the authentication process.
 ---
 
-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.
+The `<AuthenticateWithRedirectCallback />` 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
 
-<Tabs type="framework" items={["Next.js", "React"]}>
-  <Tab>
-    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 `<AuthenticateWithRedirectCallback />` 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 `<AuthenticateWithRedirectCallback />` 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'
+<Tabs items={["Next.js", "React"]}>
+  <Tab>
+    ```tsx {{ filename: 'app/layout.tsx' }}
+    'use client'
 
-    const publicPages: Array<string> = []
+    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 <button onClick={signInWithGoogle}>Sign in with Google</button>
     }
-    function MyApp({ Component, pageProps }: AppProps) {
-      const { pathname } = useRouter()
-      const isPublicPage = publicPages.includes(pathname)
 
+    export default function RootLayout({ children }: { children: React.ReactNode }) {
       return (
-        <ClerkProvider {...pageProps}>
-          {isPublicPage ? (
-            <Component {...pageProps} />
-          ) : (
-            <>
-              <SignedIn>
-                <Component {...pageProps} />
-              </SignedIn>
-              <SignedOut>
-                <SignInOAuthButtons />
-              </SignedOut>
-            </>
-          )}
+        <ClerkProvider>
+          <html lang="en">
+            <body>
+              <header>
+                <SignedOut>
+                  <SignInOAuthButtons />
+                </SignedOut>
+                <SignedIn>
+                  <UserButton />
+                </SignedIn>
+              </header>
+              <main>{children}</main>
+            </body>
+          </html>
         </ClerkProvider>
       )
     }
-
-    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 <AuthenticateWithRedirectCallback />
     }
     ```
   </Tab>
 
   <Tab>
-    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 `<AuthenticateWithRedirectCallback />` is used to complete a custom OAuth fl
 
     function App() {
       return (
-        <ClerkProvider publishableKey={`{{pub_key}}`}>
+        <ClerkProvider publishableKey={'{{pub_key}}'}>
           {/* Define a / route that displays the OAuth button */}
           <Routes>
             <Route path="/" element={<HomePages />} />
 
+            {/* Define a /sso-callback route that renders the <AuthenticateWithRedirectCallback /> component */}
             <Route path="/sso-callback" element={<AuthenticateWithRedirectCallback />} />
           </Routes>
         </ClerkProvider>
@@ -102,7 +102,7 @@ The `<AuthenticateWithRedirectCallback />` is used to complete a custom OAuth fl
             <SignInOAuthButtons />
           </SignedOut>
           <SignedIn>
-            <div>Hello! You are Signed In!</div>
+            <div>You are signed in</div>
           </SignedIn>
         </>
       )