diff --git a/docs/authentication/social-connections/discord.mdx b/docs/authentication/social-connections/discord.mdx index bb20b65c96..4fe4f13d70 100644 --- a/docs/authentication/social-connections/discord.mdx +++ b/docs/authentication/social-connections/discord.mdx @@ -1,38 +1,78 @@ --- title: Add Discord as a social connection -description: Learn how to set up social connection with Discord. +description: Learn how to allow users to sign up and sign in to your Clerk app with their Discord account with OAuth. --- -How to set up social connection with Discord + + - Use Discord to authenticate users with OAuth + -## Overview +Enabling OAuth with [Discord](https://discord.com/developers/docs/topics/oauth2) allows your users to sign up and sign in to your Clerk application with their Discord account. -Adding social connection with Discord to your app with Clerk is done in a few steps - you only need to set the **Client ID**, **Client Secret** and **Authorized 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 Discord 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 **Discord**. +1. Select **Add connection**. -> [!NOTE] -> The purpose of this guide is to help you create a Discord account and a Discord 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 Discord 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 Discord account. To create one, [click here](https://discord.com/register). +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 [Discord Developers Portal](https://discord.com/developers/applications). -## Configuring Discord social connection + + ### Enable Discord as a social connection in Clerk -First, you need to register a new OAuth Discord app at the [Discord Developer Portal](https://discord.com/developers/applications). + 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 **Discord**. + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. + 1. Save the **Authorized redirect URI** somewhere secure. Keep the modal and page open. -![Creating an OAuth Discord app](/docs/images/authentication-providers/discord/79076b03d80901a41644b8956ec42b4620d9a6c4-1920x838.png) + ### Create a Discord Developer app -Set a name for your new application and click create. Now that your application has been created, from the left side panel click on **OAuth2**, this is where you also need to add your **Redirect URL.** + 1. On a separate page, go to the [Discord Developers Portal](https://discord.com/developers/applications) and sign in. + 1. In the top-right, select **New Application**. + 1. Complete the required fields and select **Create**. You'll be redirected to the **General Information** page. + 1. In the sidebar, select **OAuth2**. + 1. Under **Redirects**, select **Add Redirect**. Paste the **Authorized Redirect URI** you saved from the Clerk Dashboard. + 1. Select **Save Changes**. You may need to tap anywhere on the screen for the button to show. Keep this page open. -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 **Discord**. Toggle on **Use custom credentials** and copy **Authorized redirect URI**. Paste the value into the **Redirect** input and save the changes. + ### Set the Client ID and Client Secret in your Clerk Dashboard -Once all the above are complete, copy the **Client ID** and **Client Secret.** Go back to the Clerk Dashboard and paste them into the respective fields. + 1. In your Discord Developers Portal, copy the **Client ID** and **Client Secret**. If you don't see the **Copy** button under the **Client Secret**, select **Reset Secret** to generate a new one. + 1. Navigate back to your Clerk Dashboard where the modal should still be open and paste these values into the respective fields. + 1. Select **Add connection**. -![Obtaining the Client ID and Client secret](/docs/images/authentication-providers/discord/a3d2039c311633627cb39887f74d18d374669658-1920x841.png) + > [!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 **Discord** connection. Under **Use custom credentials**, you can paste the **Client ID** and **Client Secret** into their respective fields. -Don't forget to click **Apply** in the Clerk dashboard. Congratulations! Social connection with Discord is now configured for your instance. + ### 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 Discord account. + diff --git a/public/images/authentication-providers/discord/79076b03d80901a41644b8956ec42b4620d9a6c4-1920x838.png b/public/images/authentication-providers/discord/79076b03d80901a41644b8956ec42b4620d9a6c4-1920x838.png deleted file mode 100644 index cd3c698203..0000000000 Binary files a/public/images/authentication-providers/discord/79076b03d80901a41644b8956ec42b4620d9a6c4-1920x838.png and /dev/null differ diff --git a/public/images/authentication-providers/discord/a3d2039c311633627cb39887f74d18d374669658-1920x841.png b/public/images/authentication-providers/discord/a3d2039c311633627cb39887f74d18d374669658-1920x841.png deleted file mode 100644 index f6cc19dd65..0000000000 Binary files a/public/images/authentication-providers/discord/a3d2039c311633627cb39887f74d18d374669658-1920x841.png and /dev/null differ