(/authentication/social-connections/coinbase) update guide (#1644)

Co-authored-by: Alexis Aguilar <[email protected]>
clerk · Oct 25, 2024 · 425d26e · 425d26e
1 parent 841b084
commit 425d26e
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 22 deletions.
diff --git a/docs/authentication/social-connections/coinbase.mdx b/docs/authentication/social-connections/coinbase.mdx
@@ -1,38 +1,78 @@
 ---
 title: Add Coinbase as a social connection
-description: Learn how to set up social connection with Coinbase.
+description: Learn how to allow users to sign up and sign in to your Clerk app with their Coinbase account using OAuth.
 ---
 
-How to set up social connection with Coinbase
+<TutorialHero
+  beforeYouStart={[
+    {
+      title: "A Clerk app is required.",
+      link: "/docs/quickstarts/setup-clerk",
+      icon: "clerk",
+    },
+    {
+      title: "A Coinbase account is required.",
+      link: "https://login.coinbase.com/signup",
+      icon: "user-circle",
+    },
+  ]}
+>
+  - Use Coinbase to authenticate users with OAuth
+</TutorialHero>
 
-## Overview
+Enabling OAuth with [Coinbase](https://docs.cdp.coinbase.com/coinbase-app/docs/coinbase-app) allows your users to sign up and sign in to your Clerk app with their Coinbase account.
 
-Adding social connection with Coinbase to your app with Clerk is done in a few steps - you only need to set the **Client ID**, **Client Secret** and **Redirect URI** in your instance settings.
+## Configure for your development instance
 
-To make the development flow as smooth as possible, Clerk uses preconfigured shared OAuth credentials and redirect URIs for development instances - no other configuration is needed.
+For _development instances_, Clerk uses preconfigured shared OAuth credentials and redirect URIs—no other configuration is needed.
 
-For production instances, you will need to generate your own Client ID and Client secret using your Coinbase account.
+1. In the Clerk Dashboard, navigate to the [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page.
+1. Select **Add connection** and select **For all users**.
+1. In the **Choose provider** dropdown, select **Coinbase**.
+1. Select **Add connection**.
 
-> [!NOTE]
-> The purpose of this guide is to help you create a Coinbase developer account and a Coinbase OAuth app - if you're looking for step-by-step instructions using Clerk to add social connection (OAuth) to your application, follow the [Social connection (OAuth) guide](/docs/authentication/social-connections/oauth).
+## Configure for your production instance
 
-## Before you start
+For _production instances_, you must provide custom credentials which involves generating your own **Client ID** and **Client Secret** using your Coinbase account.
 
-- You need to create a Clerk Application in your [Clerk Dashboard](https://dashboard.clerk.com/). For more information, check out our [Set up your application guide](/docs/quickstarts/setup-clerk).
-- You need to have a Coinbase developer account. To create one, [click here](https://www.coinbase.com/).
+To make the setup process easier, it's recommended to keep two browser tabs open: one for your [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Coinbase's Developer Platform](https://portal.cdp.coinbase.com).
 
-## Configuring Coinbase social connection
+<Steps>
+  ### Enable Coinbase as a social connection in Clerk
 
-First, you need to create a new OAuth2 Coinbase app. You can find this option in your **Profile > Settings > API > New OAuth2 Application**.
+  1. In the Clerk Dashboard, navigate to the [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page.
+  1. Select **Add connection** and select **For all users**.
+  1. In the **Choose provider** dropdown, select **Coinbase**.
+  1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on.
+  1. Save the **Redirect URI** somewhere secure. Keep the modal and page open.
 
-You need to set all the required fields and the corresponding **Permitted Redirect URIs**. Under **Advanced Settings**, make sure to also select **Reuse Existing Tokens** for **Previously-Authorized Users** so that your users won't get notified everytime they sign in with their Coinbase account. Then, click **Create application**.
+  ### Create a Coinbase app
 
-![Creating application](/docs/images/authentication-providers/coinbase/creating-application.jpg)
+  > [!NOTE]
+  > Coinbase automatically creates a default project for you named `Project 1`. Select the icon next to the project name to rename it.
 
-Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections). In the top navigation, select **Configure**. Then in the sidebar, select **SSO Connections**. Select the **Add connection** button, and select **For all users**. In the **Choose provider** dropdown, select **Coinbase**. Toggle on **Use custom credentials** and copy **Redirect URI**. Make sure the value matches the **Redirect URIs**, as shown below.
+  1. In your [Coinbase Developer Platform project dashboard](https://portal.cdp.coinbase.com/projects), navigate to the **API Keys** tab.
+  1. Select **OAuth**, then select **Create client**.
+  1. Complete the required fields. In **Redirect URIs**, paste the **Redirect URI** you saved from the Clerk Dashboard.
+  1. Select **Create client**. The page will refresh and you should see the **Client ID** and **Client Secret** in the **OAuth** section. Save both values somewhere secure.
 
-![Copying the Client ID and Client Secret from the Box dashboard](/docs/images/authentication-providers/coinbase/copying-values-from-box-dashboard.jpg)
+  ### Set the Client ID and Client Secret in your Clerk Dashboard
 
-Copy the **Client ID** and **Client secret** as shown in the above image. Go back to the Clerk Dashboard and paste them into the respective fields.
+  1. Navigate back to your Clerk Dashboard where the modal should still be open. Paste the **Client ID** and **Client Secret** values that you saved into the respective fields.
+  1. Select **Add connection**.
 
-Don't forget to click **Apply** in the Clerk dashboard. Congratulations! Social connection with Coinbase is now configured for your instance.
+  > [!NOTE]
+  > If the modal or page is not still open, navigate to the [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page in the Clerk Dashboard. Select the **Coinbase** connection. Under **Use custom credentials**, you can paste the **Client ID** and **Client Secret** into their respective fields.
+
+  ### Test your OAuth
+
+  The simplest way to test your OAuth is to visit your Clerk app's [Account Portal](/docs/customization/account-portal/overview), which is available for all Clerk apps out-of-the-box.
+
+  1. In the Clerk Dashboard, navigate to the [**Account Portal**](https://dashboard.clerk.com/last-active?path=account-portal) page.
+  1. Next to the **Sign-in** URL, select **Visit**. The URL should resemble:
+
+  - **For development** – `https://your-domain.accounts.dev/sign-in`
+  - **For production** – `https://accounts.your-domain.com/sign-in`
+
+  1. Sign in with your Coinbase account.
+</Steps>
diff --git a/docs/authentication/social-connections/linear.mdx b/docs/authentication/social-connections/linear.mdx
@@ -54,15 +54,15 @@ To make the setup process easier, it's recommended to keep two browser tabs open
   1. In the top-left of [Linear](https://linear.app/), select your workspace, then select **Preferences**.
   1. In the sidebar, under **My Account**, select **API**. Scroll down to **OAuth Applications** and select **Create new OAuth Application**. You'll be navigated to the [**Create new application**](https://linear.app/clerk/settings/api/applications/new) page.
   1. Complete the required fields. In **Callback URLs**, paste the **Redirect URI** you saved from the Clerk Dashboard.
-  1. Select **Save**. The page will refresh and you should the **Client ID** and **Client Secret** at the top. Save both values somewhere secure. Keep this page open.
+  1. Select **Save**. The page will refresh and you should see the **Client ID** and **Client Secret** at the top. Save both values somewhere secure.
 
   ### Set the Client ID and Client Secret in your Clerk Dashboard
 
-  1. Navigate back to your Clerk Dashboard where the modal should still be open. Paste these values into the respective fields.
+  1. Navigate back to your Clerk Dashboard where the modal should still be open. Paste the  **Client ID** and **Client Secret** values that you saved into the respective fields.
   1. Select **Add connection**.
 
   > [!NOTE]
-  > If the modal or page is not still open, navigate to the [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page in the Clerk Dashboard. Select the Linear connection. Under **Use custom credentials**, you can paste the **Client ID** and **Client Secret** into their respective fields.
+  > If the modal or page is not still open, navigate to the [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page in the Clerk Dashboard. Select the **Linear** connection. Under **Use custom credentials**, you can paste the **Client ID** and **Client Secret** into their respective fields.
 
   ### Test your OAuth