Skip to content

Commit

Permalink
Rollback OAuth connections changes
Browse files Browse the repository at this point in the history
  • Loading branch information
LauraBeatris committed Jan 24, 2025
1 parent 3ecc186 commit c5b9f1d
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 21 deletions.
2 changes: 1 addition & 1 deletion docs/_partials/expo/enterprise-sso-custom-flow.mdx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
35 changes: 16 additions & 19 deletions docs/custom-flows/oauth-connections.mdx
Original file line number Diff line number Diff line change
@@ -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.
---

<Include src="_partials/custom-flows-callout" />

## 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.

<Tabs items={["Next.js", "Expo", "iOS (beta)"]}>
<Tab>
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 [`<AuthenticateWithRedirectCallback/>`](/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.

<CodeBlockTabs options={["Sign in page", "SSO callback page"]}>
```tsx {{ filename: 'app/sign-in/page.tsx' }}
Expand Down Expand Up @@ -93,7 +90,7 @@ When using SSO, the sign-up and sign-in flows are equivalent.

### Build the flow

<Include src="_partials/expo/sso-custom-flow" />
<Include src="_partials/expo/oauth-custom-flow" />
</Tab>

<Tab>
Expand Down Expand Up @@ -162,9 +159,9 @@ When using SSO, the sign-up and sign-in flows are equivalent.
</Tab>
</Tabs>

## 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.**

Expand All @@ -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()

Expand All @@ -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' &&
Expand All @@ -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) {
Expand All @@ -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)
}
}
Expand Down
2 changes: 1 addition & 1 deletion docs/deployments/deploy-expo.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit c5b9f1d

Please sign in to comment.