From c5b9f1d605cbd5a3433b57eefdc1fb48c99b0a71 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Fri, 24 Jan 2025 15:26:52 -0300 Subject: [PATCH] Rollback OAuth connections changes --- .../expo/enterprise-sso-custom-flow.mdx | 2 +- docs/custom-flows/oauth-connections.mdx | 35 +++++++++---------- docs/deployments/deploy-expo.mdx | 2 +- 3 files changed, 18 insertions(+), 21 deletions(-) diff --git a/docs/_partials/expo/enterprise-sso-custom-flow.mdx b/docs/_partials/expo/enterprise-sso-custom-flow.mdx index faa7cda7f3..09d03253fb 100644 --- a/docs/_partials/expo/enterprise-sso-custom-flow.mdx +++ b/docs/_partials/expo/enterprise-sso-custom-flow.mdx @@ -1,4 +1,4 @@ -The following example demonstrates how to create a custom SSO sign-in flow with [SAML](docs/authentication/enterprise-connections/overview#saml). +The following example demonstrates how to create a custom SSO flow with [SAML](docs/authentication/enterprise-connections/overview#saml). ```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }} import React, { useCallback, useEffect } from 'react' diff --git a/docs/custom-flows/oauth-connections.mdx b/docs/custom-flows/oauth-connections.mdx index c55e26cfa0..3456fe07f6 100644 --- a/docs/custom-flows/oauth-connections.mdx +++ b/docs/custom-flows/oauth-connections.mdx @@ -1,32 +1,29 @@ --- -title: Build a custom flow for authenticating with SSO connections -description: Learn how to use the Clerk API to build a custom sign-up and sign-in flow that supports SSO connections. +title: Build a custom flow for authenticating with OAuth connections +description: Learn how to use the Clerk API to build a custom sign-up and sign-in flow that supports OAuth connections. --- ## Before you start -You must configure your application instance through the Clerk Dashboard for the SSO connection that you want to use. - -- For OAuth SSO, refer to [this guide](/docs/authentication/social-connections/oauth#enable-a-social-connection). -- For Enterprise SSO, refer to [this guide](/docs/authentication/enterprise-connections/overview). +You must configure your application instance through the Clerk Dashboard for the social connection(s) that you want to use, as described at [the top of the OAuth guide](/docs/authentication/social-connections/oauth#configuration). ## Create the sign-up and sign-in flow -When using SSO, the sign-up and sign-in flows are equivalent. +When using OAuth, the sign-up and sign-in flows are equivalent. - A successful SSO flow consists of the following steps: + A successful OAuth flow consists of the following steps: - 1. Start the SSO flow by calling [`SignIn.authenticateWithRedirect(params)`](/docs/references/javascript/sign-in/authenticate-with#authenticate-with-redirect) or [`SignUp.authenticateWithRedirect(params)`](/docs/references/javascript/sign-up/authenticate-with#authenticate-with-redirect). Both of these methods require a `redirectUrl` param, which is the URL that the browser will be redirected to once the user authenticates with the OAuth provider. + 1. Start the OAuth flow by calling [`SignIn.authenticateWithRedirect(params)`](/docs/references/javascript/sign-in/authenticate-with#authenticate-with-redirect) or [`SignUp.authenticateWithRedirect(params)`](/docs/references/javascript/sign-up/authenticate-with#authenticate-with-redirect). Both of these methods require a `redirectUrl` param, which is the URL that the browser will be redirected to once the user authenticates with the OAuth provider. 1. Create a route at the URL that the `redirectUrl` param points to. The following example names this route `/sso-callback`. This route should call the [`Clerk.handleRedirectCallback()`](/docs/references/javascript/clerk/handle-navigation#handle-redirect-callback) method or simply render the prebuilt [``](/docs/components/control/authenticate-with-callback) component. The following example shows two files: - 1. The sign-in page where the user can start the SSO flow. - 1. The SSO callback page where the SSO flow is completed. + 1. The sign-in page where the user can start the OAuth flow. + 1. The SSO callback page where the OAuth flow is completed. ```tsx {{ filename: 'app/sign-in/page.tsx' }} @@ -93,7 +90,7 @@ When using SSO, the sign-up and sign-in flows are equivalent. ### Build the flow - + @@ -162,9 +159,9 @@ When using SSO, the sign-up and sign-in flows are equivalent. -## SSO account transfer flows +## OAuth account transfer flows -It is common for users who are authenticating with SSO to use a sign-in button when they mean to sign-up, and vice versa. For those cases, the `SignIn` and `SignUp` objects have a `transferable` status that indicates whether the user can be transferred to the other flow. +It is common for users who are authenticating with OAuth to use a sign-in button when they mean to sign-up, and vice versa. For those cases, the `SignIn` and `SignUp` objects have a `transferable` status that indicates whether the user can be transferred to the other flow. **If you would like to keep your sign-in and sign-up flows completely separate, then you can skip this section.** @@ -179,7 +176,7 @@ The following example demonstrates how to handle these cases in your sign-in flo import { OAuthStrategy } from '@clerk/types' import { useSignIn, useSignUp } from '@clerk/nextjs' - export default function SSOSignIn() { + export default function OauthSignIn() { const { signIn } = useSignIn() const { signUp, setActive } = useSignUp() @@ -197,7 +194,7 @@ The following example demonstrates how to handle these cases in your sign-in flo if (!signIn || !signUp) return null // If the user has an account in your application, but does not yet - // have an SSO account connected to it, you can transfer the SSO + // have an OAuth account connected to it, you can transfer the OAuth // account to the existing user account. const userExistsButNeedsToSignIn = signUp.verifications.externalAccount.status === 'transferable' && @@ -213,9 +210,9 @@ The following example demonstrates how to handle these cases in your sign-in flo } } - // If the user has an SSO account but does not yet + // If the user has an OAuth account but does not yet // have an account in your app, you can create an account - // for them using the SSO information. + // for them using the OAuth information. const userNeedsToBeCreated = signIn.firstFactorVerification.status === 'transferable' if (userNeedsToBeCreated) { @@ -230,7 +227,7 @@ The following example demonstrates how to handle these cases in your sign-in flo } } else { // If the user has an account in your application - // and has an SSO account connected to it, you can sign them in. + // and has an OAuth account connected to it, you can sign them in. signInWith(strategy) } } diff --git a/docs/deployments/deploy-expo.mdx b/docs/deployments/deploy-expo.mdx index be72d5c03c..08258d2815 100644 --- a/docs/deployments/deploy-expo.mdx +++ b/docs/deployments/deploy-expo.mdx @@ -15,7 +15,7 @@ With Clerk, you can [add OAuth flows in your Expo applications](/docs/custom-flo Clerk ensures that security critical nonces will be passed only to allowlisted URLs when the OAuth flow is complete in native browsers or webviews. -So for maximum security in your production instances, you need to allowlist the OAuth callback URL: +So for maximum security in your production instances, you need to allowlist the SSO callback URL: 1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. 1. Scroll to the **Allowlist for mobile SSO redirect** section and add your redirect URLs.