diff --git a/docs/custom-flows/manage-oauth-accounts.mdx b/docs/custom-flows/manage-oauth-accounts.mdx index 7fa61d9eab..3bae18e22c 100644 --- a/docs/custom-flows/manage-oauth-accounts.mdx +++ b/docs/custom-flows/manage-oauth-accounts.mdx @@ -1,8 +1,26 @@ --- -title: Build a custom flow for managing external accounts -description: Learn how to use the Clerk API to build a custom flow for adding and managing OAuth accounts +title: Build a custom flow for managing SSO connections +description: Learn how to use the Clerk API to build a custom flow for adding and managing SSO connections --- + + +## Enable one or more SSO connections + +For your users to be able to add or manage OAuth connections, you will ned to enable one or more SSO connections. + +1. In the Clerk Dashboard, navigate to the [SSO connections](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. +1. Ensure there is at least one enabled SSO connections. +1. Use the `Add connections` button to enable SSO connections. + +## Edit the `options` array + +1. Edit the `options` array in the code below to add all of your enabled SSO connections. +1. The `OAuthStrategy` lists all of the strategies for the pre-configured SSO connections. +1. Custom SSO connections will use a strategy like `oauth_custom_`. The `OAuthStrategy` type includes typing for custom providers. The code example below will need modifying to support custom providers. + + + ```tsx {{ filename: 'app/account/manage-external-accounts/page.tsx', collapsible: true }} 'use client' @@ -10,7 +28,7 @@ import { UserButton, useUser } from '@clerk/nextjs' import { OAuthStrategy } from '@clerk/types' import { useRouter } from 'next/navigation' -const capitalizeProvider = (provider: string) => { +const capitalize = (provider: string) => { return `${provider.slice(0, 1).toUpperCase()}${provider.slice(1)}` } @@ -22,7 +40,7 @@ export default function AddAccount() { const options: OAuthStrategy[] = ['oauth_discord', 'oauth_google', 'oauth_github'] // handle adding the new external account - const addOAuth = async (strategy: OAuthStrategy) => { + const addSSO = async (strategy: OAuthStrategy) => { await user ?.createExternalAccount({ strategy, @@ -67,11 +85,11 @@ export default function AddAccount() { {user?.externalAccounts.map((account) => { return ( - {capitalizeProvider(account.provider)} + {capitalize(account.provider)} {account.approvedScopes} {account.verification?.status && - capitalizeProvider(account.verification?.status)} + capitalize(account.verification?.status)} @@ -89,8 +107,8 @@ export default function AddAccount() { {unconnectedOptions.map((strategy) => { return (
  • -
  • )