From 41949095d5e5df9af8b8fbb4147ebd4773fc9e25 Mon Sep 17 00:00:00 2001
From: Roy Anger <roy@royanger.com>
Date: Wed, 18 Dec 2024 01:32:48 -0500
Subject: [PATCH] feat: Added basic instructions to the doc

---
 docs/custom-flows/manage-oauth-accounts.mdx | 33 +++++++++++++++------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/docs/custom-flows/manage-oauth-accounts.mdx b/docs/custom-flows/manage-oauth-accounts.mdx
index 7fa61d9eab..fcfb3c2dcb 100644
--- a/docs/custom-flows/manage-oauth-accounts.mdx
+++ b/docs/custom-flows/manage-oauth-accounts.mdx
@@ -1,8 +1,24 @@
 ---
-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
 ---
 
+<Steps>
+  ## 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_<name>`. The `OAuthStrategy` type includes typing for custom providers. The code example below will need modifying to support custom providers.
+</Steps>
+
 ```tsx {{ filename: 'app/account/manage-external-accounts/page.tsx', collapsible: true }}
 'use client'
 
@@ -10,7 +26,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 +38,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 +83,10 @@ export default function AddAccount() {
             {user?.externalAccounts.map((account) => {
               return (
                 <tr key={account.id}>
-                  <td>{capitalizeProvider(account.provider)}</td>
+                  <td>{capitalize(account.provider)}</td>
                   <td>{account.approvedScopes}</td>
                   <td>
-                    {account.verification?.status &&
-                      capitalizeProvider(account.verification?.status)}
+                    {account.verification?.status && capitalize(account.verification?.status)}
                   </td>
                   <td>
                     <button onClick={() => account.destroy()}>Remove</button>
@@ -89,8 +104,8 @@ export default function AddAccount() {
             {unconnectedOptions.map((strategy) => {
               return (
                 <li key={strategy}>
-                  <button onClick={() => addOAuth(strategy)}>
-                    Add {capitalizeProvider(strategy.split('_')[1])}
+                  <button onClick={() => addSSO(strategy)}>
+                    Add {capitalize(strategy.split('_')[1])}
                   </button>
                 </li>
               )