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 1/5] 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 -
Hello! You are Signed In!
+
You are signed in
 ) From 36a908e3a26948452c8e3ba281675802889628c9 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 10 Oct 2024 16:11:34 -0400 Subject: [PATCH 2/5] update example explanation --- docs/components/control/authenticate-with-callback.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/control/authenticate-with-callback.mdx b/docs/components/control/authenticate-with-callback.mdx index ea458be3a6..e1dddef3d2 100644 --- a/docs/components/control/authenticate-with-callback.mdx +++ b/docs/components/control/authenticate-with-callback.mdx @@ -9,7 +9,7 @@ This component automatically handles the OAuth callback, completing the authenti ## Usage -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. +In the following example, 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. From 3363d7549367a8c9dea2898110ada7006d2a7d8e Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 10 Oct 2024 16:12:25 -0400 Subject: [PATCH 3/5] move props above usage --- .../control/authenticate-with-callback.mdx | 214 +++++++++--------- 1 file changed, 107 insertions(+), 107 deletions(-) diff --git a/docs/components/control/authenticate-with-callback.mdx b/docs/components/control/authenticate-with-callback.mdx index e1dddef3d2..bccf6d6fb6 100644 --- a/docs/components/control/authenticate-with-callback.mdx +++ b/docs/components/control/authenticate-with-callback.mdx @@ -7,6 +7,113 @@ The `` component is a crucial part of implem This component automatically handles the OAuth callback, completing the authentication process and managing the user's session. +## Properties + + + - `signInUrl?` + - `string` + + Full URL or path where the SignIn component is mounted. + + --- + + - `signUpUrl?` + - `string` + + Full URL or path where the SignUp component is mounted. + + --- + + - `signInFallbackRedirectUrl?` + - `string` + + 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](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) instead. + + --- + + - `signUpFallbackRedirectUrl?` + - `string` + + 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](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) instead. + + --- + + - `signInForceRedirectUrl?` + - `string` + + If provided, this URL will always be redirected to after the user signs in. It's recommended to use [the environment variable](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) instead. + + --- + + - `signUpForceRedirectUrl?` + - `string` + + If provided, this URL will always be redirected to after the user signs up. It's recommended to use [the environment variable](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) instead. + + --- + + - `firstFactorUrl` + - `string | undefined` + + Full URL or path to navigate during sign in, if identifier verification is required. + + --- + + - `secondFactorUrl` + - `string | undefined` + + Full URL or path to navigate during sign in, if 2FA is enabled. + + --- + + - `resetPasswordUrl` + - `string` + + Full URL or path to navigate during sign in, if the user is required to reset their password. + + --- + + - `continueSignUpUrl` + - `string | undefined | null` + + Full URL or path to navigate after an incomplete sign up. + + --- + + - `verifyEmailAddressUrl` + - `string | undefined | null` + + Full URL or path to navigate after requesting email verification. + + --- + + - `verifyPhoneNumberUrl` + - `string | undefined | null` + + Full URL or path to navigate after requesting phone verification. + + --- + + - `afterSignInUrl` (deprecated) + - `string` + + Full URL or path to navigate to after successful sign in. Defaults to `/`. It's recommended to use [the environment variable](/docs/deployments/clerk-environment-variables#deprecated) instead. **`signInFallbackRedirectUrl` and `signInforceRedirectUrl` have priority and should be used instead.** + + --- + + - `afterSignUpUrl` (deprecated) + - `string` + + Full URL or path to navigate to after successful sign up. Defaults to `/`. It's recommended to use [the environment variable](/docs/deployments/clerk-environment-variables#deprecated) instead. **`signUpFallbackRedirectUrl` and `signUpforceRedirectUrl` have priority and should be used instead.** + + --- + + - `redirectUrl` (deprecated) + - `string` + + Full 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. The **`signXfallbackRedirectUrl` and `signXforceRedirectUrl` props have priority over the deprecated `redirectUrl` and should be used instead.** + + ## Usage In the following example, 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. @@ -126,110 +233,3 @@ In the following example, when a user selects the "Sign in with Google" button, ``` - -## Properties - - - - `signInUrl?` - - `string` - - Full URL or path where the SignIn component is mounted. - - --- - - - `signUpUrl?` - - `string` - - Full URL or path where the SignUp component is mounted. - - --- - - - `signInFallbackRedirectUrl?` - - `string` - - 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](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) instead. - - --- - - - `signUpFallbackRedirectUrl?` - - `string` - - 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](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) instead. - - --- - - - `signInForceRedirectUrl?` - - `string` - - If provided, this URL will always be redirected to after the user signs in. It's recommended to use [the environment variable](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) instead. - - --- - - - `signUpForceRedirectUrl?` - - `string` - - If provided, this URL will always be redirected to after the user signs up. It's recommended to use [the environment variable](/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) instead. - - --- - - - `firstFactorUrl` - - `string | undefined` - - Full URL or path to navigate during sign in, if identifier verification is required. - - --- - - - `secondFactorUrl` - - `string | undefined` - - Full URL or path to navigate during sign in, if 2FA is enabled. - - --- - - - `resetPasswordUrl` - - `string` - - Full URL or path to navigate during sign in, if the user is required to reset their password. - - --- - - - `continueSignUpUrl` - - `string | undefined | null` - - Full URL or path to navigate after an incomplete sign up. - - --- - - - `verifyEmailAddressUrl` - - `string | undefined | null` - - Full URL or path to navigate after requesting email verification. - - --- - - - `verifyPhoneNumberUrl` - - `string | undefined | null` - - Full URL or path to navigate after requesting phone verification. - - --- - - - `afterSignInUrl` (deprecated) - - `string` - - Full URL or path to navigate to after successful sign in. Defaults to `/`. It's recommended to use [the environment variable](/docs/deployments/clerk-environment-variables#deprecated) instead. **`signInFallbackRedirectUrl` and `signInforceRedirectUrl` have priority and should be used instead.** - - --- - - - `afterSignUpUrl` (deprecated) - - `string` - - Full URL or path to navigate to after successful sign up. Defaults to `/`. It's recommended to use [the environment variable](/docs/deployments/clerk-environment-variables#deprecated) instead. **`signUpFallbackRedirectUrl` and `signUpforceRedirectUrl` have priority and should be used instead.** - - --- - - - `redirectUrl` (deprecated) - - `string` - - Full 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. The **`signXfallbackRedirectUrl` and `signXforceRedirectUrl` props have priority over the deprecated `redirectUrl` and should be used instead.** - From d295304131cff1e82e7fbba5b8a3e88b6b72bb2f Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 10 Oct 2024 16:15:04 -0400 Subject: [PATCH 4/5] add collapsible:true --- docs/components/control/authenticate-with-callback.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components/control/authenticate-with-callback.mdx b/docs/components/control/authenticate-with-callback.mdx index bccf6d6fb6..28098b5e25 100644 --- a/docs/components/control/authenticate-with-callback.mdx +++ b/docs/components/control/authenticate-with-callback.mdx @@ -120,7 +120,7 @@ In the following example, when a user selects the "Sign in with Google" button, - ```tsx {{ filename: 'app/layout.tsx' }} + ```tsx {{ filename: 'app/layout.tsx', collapsible: true }} 'use client' import { ClerkProvider, SignedIn, SignedOut, UserButton, useSignIn } from '@clerk/nextjs' @@ -177,7 +177,7 @@ In the following example, when a user selects the "Sign in with Google" button, The following example is using the `react-router-dom` library, but you can use any routing library you want. - ```tsx {{ filename: 'app.tsx' }} + ```tsx {{ filename: 'app.tsx', collapsible: true }} import { ClerkProvider, AuthenticateWithRedirectCallback, From 3af78cd4e478c9e466ab6d8ddc5f7a27e29c01c1 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Fri, 11 Oct 2024 11:50:19 -0400 Subject: [PATCH 5/5] Update docs/components/control/authenticate-with-callback.mdx Co-authored-by: victoria --- docs/components/control/authenticate-with-callback.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/control/authenticate-with-callback.mdx b/docs/components/control/authenticate-with-callback.mdx index 28098b5e25..50f8a0741d 100644 --- a/docs/components/control/authenticate-with-callback.mdx +++ b/docs/components/control/authenticate-with-callback.mdx @@ -163,7 +163,7 @@ In the following example, when a user selects the "Sign in with Google" button, } ``` - Once you have implemented your sign in flow, you can implement the callback page. + Once you have implemented your sign-in flow, you can implement the callback page. ```tsx {{ filename: 'app/sso-callback/page.tsx' }} import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'