From 526181cedb42c05eff83267c9ef0e1f8d43f6c04 Mon Sep 17 00:00:00 2001 From: vi Date: Fri, 4 Oct 2024 17:48:31 +0200 Subject: [PATCH 01/14] change title --- docs/authentication/social-connections/github.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index 0517806505..d9fd793902 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -1,5 +1,5 @@ --- -title: GitHub +title: Add GitHub as a social connection description: Learn how to set up social connection with GitHub. --- From 6416a97aeedcb59d4c74db035a1bf49c5b011904 Mon Sep 17 00:00:00 2001 From: vi Date: Fri, 4 Oct 2024 21:40:45 +0200 Subject: [PATCH 02/14] draft --- .../social-connections/github.mdx | 69 ++++++++++++++----- 1 file changed, 52 insertions(+), 17 deletions(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index d9fd793902..915c759913 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -3,34 +3,69 @@ title: Add GitHub as a social connection description: Learn how to set up social connection with GitHub. --- -How to set up social connection with GitHub + + - Configure for your development instance + - Configure for your production instance + -## Overview +Enabling OAuth with [**GitHub**](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app) allows your users to sign in and sign up for your Clerk application with their GitHub account. -Adding social connection with GitHub 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 GitHub account. +1. Select **Add connection** and choose **For all users**. +1. In the **Choose provider** dropdown, search for **GitHub**, then select **GitHub** from the list. +1. Select **Add connection**. -> [!NOTE] -> The purpose of this guide is to help you create a GitHub account and a GitHub 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 GitHub account. This guide walks you through this process. -- 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 GitHub account. To create one, [click here](https://github.com/signup). +To make the setup process easier, we recommend keeping two browser tabs open: one for your [**Clerk Dashboard**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [**GitHub Developers**](https://GitHub.com/developers/applications) page. -## Configuring GitHub social connection + + ### Enable GitHub as a social connection in Clerk -First, you need to register a new OAuth GitHub app. Follow the official GitHub instructions on [how to create an OAuth app](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app). + 1. In your Clerk Dashboard, go to **User & Authentication > [SSO Connections](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections)**. + 1. Select **Add connection** and choose **For all users**. + 1. In the **Choose provider** dropdown, search for **GitHub**, then select **GitHub** from the list. + 1. The configuration options will appear below. Enable **Use custom credentials**. Keep the modal and page open throughout the guide. -![Registering an OAuth GitHub app](/docs/images/authentication-providers/github/ff83ad81ca491cf17e5a755376fae9c88148ce7c-1395x799.png) + ### Set the Client ID and Client Secret in your Clerk Dashboard -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 **GitHub**. Toggle on **Use custom credentials** and copy **Authorized redirect URI**. Go back to the GitHub panel, paste the value into the **Authorization callback URL** field and complete the registration. + 1. On a separate page, go to [**GitHub's Developer Settings**](https://github.com/settings/apps) by selecting your profile photo in the top-right navigation, then choose **Settings**. In the sidebar, select **Developer settings**. + 1. In the sidebar, select **OAuth Apps** then select [**New OAuth app**](https://github.com/settings/applications/new). + 1. After being redirected to the **Register a new OAuth app** form, enter your **Application name** and **Homepage URL**. Keep the page open for the next step. + 1. Navigate back to your **Clerk Dashboard**. In the **Add connection for all users** modal under the **Configure GitHub**, copy the **Authorized redirect URI**. + 1. Navigate back to **GitHub** and paste the string in **Authorization callback URL**. + 1. Select **Register application**. + 1. After your application is created successfully, select your **Client ID**. + 1. Navigate back to your **Clerk Dashboard**. Paste the string in **Client ID**. + 1. Navigate back to **GitHub**. Select **Generate a new client secret**. Copy the **Client secret**. + 1. Navigate back to your **Clerk Dashboard**. Paste the string in **Client secret**. + 1. Select **Add connection**. -Once registration is complete, you'll get redirected to project's admin panel. Click the **Generate a new client secret** button to get your new client secret. Then, copy the **Client ID** and **Client secret.** Go back to the Clerk Dashboard and paste them into the respective fields. + ### Test your OAuth -![Obtaining the Client ID and Client secret](/docs/images/authentication-providers/github/3b1f58462fab3cc238c1a59994d1e2eb98f46b73-1489x964.png) + The simplest way to test your OAuth setup is by visiting your Clerk application's [Account Portal](/docs/customization/account-portal/overview), which is available out-of-the-box for all Clerk applications. -Finally, select **Add connection** so that the settings are applied. Congratulations! Social connection with GitHub is now configured for your instance. + 1. In the navigation sidebar of your **Clerk Dashboard**, select [**Account Portal**](https://dashboard.clerk.com/last-active?path=account-portal). + 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. On the sign-in page, you should see **GitHub** as an option. Use it to sign in with your GitHub account. + From 04e7bcb67f85b4d87374b31471155e6a9c3aabc1 Mon Sep 17 00:00:00 2001 From: vi Date: Wed, 9 Oct 2024 18:32:10 +0200 Subject: [PATCH 03/14] update --- .../social-connections/github.mdx | 50 ++++++++++--------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index 915c759913..265c4151de 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -1,12 +1,13 @@ --- title: Add GitHub as a social connection -description: Learn how to set up social connection with GitHub. +description: Use GitHub to authenticate users with OAuth. + --- -Enabling OAuth with [**GitHub**](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app) allows your users to sign in and sign up for your Clerk application with their GitHub account. +Enabling OAuth with [GitHub](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app) allows your users to sign up and sign in to your Clerk app with their GitHub account. ## Configure for your development instance For _development instances_, Clerk uses preconfigured shared OAuth credentials and redirect URIs—no other configuration is needed. +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 choose **For all users**. -1. In the **Choose provider** dropdown, search for **GitHub**, then select **GitHub** from the list. +1. In the **Choose provider** dropdown, select **GitHub**. 1. Select **Add connection**. ## Configure for your production instance -For _production instances_, you must provide custom credentials which involves generating your own **Client ID** and **Client Secret** using your GitHub account. This guide walks you through this process. +For _production instances_, you must provide custom credentials which involves generating your own **Client ID** and **Client Secret** using your GitHub account. -To make the setup process easier, we recommend keeping two browser tabs open: one for your [**Clerk Dashboard**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [**GitHub Developers**](https://GitHub.com/developers/applications) page. +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 [GitHub Developers](https://GitHub.com/developers/applications) page. ### Enable GitHub as a social connection in Clerk - 1. In your Clerk Dashboard, go to **User & Authentication > [SSO Connections](https://dashboard.clerk.com/last-active?path=user-authentication/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. Select **Add connection** and choose **For all users**. - 1. In the **Choose provider** dropdown, search for **GitHub**, then select **GitHub** from the list. - 1. The configuration options will appear below. Enable **Use custom credentials**. Keep the modal and page open throughout the guide. + 1. In the **Choose provider** dropdown, select **GitHub**. + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. Keep the modal and page open. ### Set the Client ID and Client Secret in your Clerk Dashboard - 1. On a separate page, go to [**GitHub's Developer Settings**](https://github.com/settings/apps) by selecting your profile photo in the top-right navigation, then choose **Settings**. In the sidebar, select **Developer settings**. - 1. In the sidebar, select **OAuth Apps** then select [**New OAuth app**](https://github.com/settings/applications/new). - 1. After being redirected to the **Register a new OAuth app** form, enter your **Application name** and **Homepage URL**. Keep the page open for the next step. - 1. Navigate back to your **Clerk Dashboard**. In the **Add connection for all users** modal under the **Configure GitHub**, copy the **Authorized redirect URI**. - 1. Navigate back to **GitHub** and paste the string in **Authorization callback URL**. - 1. Select **Register application**. - 1. After your application is created successfully, select your **Client ID**. - 1. Navigate back to your **Clerk Dashboard**. Paste the string in **Client ID**. - 1. Navigate back to **GitHub**. Select **Generate a new client secret**. Copy the **Client secret**. - 1. Navigate back to your **Clerk Dashboard**. Paste the string in **Client secret**. + 1. Go to [GitHub's Developer Settings](https://github.com/settings/apps) by selecting your profile photo in the top-right navigation, then choose **Settings**. In the sidebar, select **Developer settings**. + 1. In the sidebar, select **OAuth Apps** then select [**New OAuth app**](https://github.com/settings/applications/new). You'll be redirected to the **Register a new OAuth app** form. + 1. Enter your **Application name** and **Homepage URL**. Keep the page open for the next step. + 1. Navigate back to your Clerk Dashboard. In the **Add connection for all users** modal under the **Configure GitHub**, copy the **Authorized redirect URI**. + 1. Navigate back to GitHub and paste the string in **Authorization callback URL**. + 1. Select **Register application**. You'll be redirected to your app's **General** page. + 1. Select **Generate a new client secret**. Save your **Client ID** and **Client secret** somewhere secure. + 1. Navigate back to your Clerk Dashboard. Paste these values into the respective fields. 1. Select **Add connection**. ### Test your OAuth - The simplest way to test your OAuth setup is by visiting your Clerk application's [Account Portal](/docs/customization/account-portal/overview), which is available out-of-the-box for all Clerk applications. + The simplest way to test your OAuth is to visit your Clerk application's [Account Portal](/docs/customization/account-portal/overview), which is available for all Clerk applications out-of-the-box. - 1. In the navigation sidebar of your **Clerk Dashboard**, select [**Account Portal**](https://dashboard.clerk.com/last-active?path=account-portal). + 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. On the sign-in page, you should see **GitHub** as an option. Use it to sign in with your GitHub account. + + - **For development** – `https://your-domain.accounts.dev/sign-in` + - **For production** – `https://accounts.your-domain.com/sign-in` + + 1. Sign in with your GitHub account. From 650aa9ecb9108ef12c030d792f862d7779c0a4f9 Mon Sep 17 00:00:00 2001 From: victoria Date: Wed, 9 Oct 2024 18:36:00 +0200 Subject: [PATCH 04/14] Update docs/authentication/social-connections/github.mdx --- docs/authentication/social-connections/github.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index 265c4151de..3195a3bffd 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -61,7 +61,7 @@ To make the setup process easier, it's recommended to keep two browser tabs open ### Test your OAuth - The simplest way to test your OAuth is to visit your Clerk application's [Account Portal](/docs/customization/account-portal/overview), which is available for all Clerk applications out-of-the-box. + 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: From 4e949044c6e365d15fed0ed952d4f223029ff3a4 Mon Sep 17 00:00:00 2001 From: victoria Date: Wed, 9 Oct 2024 18:36:44 +0200 Subject: [PATCH 05/14] Update docs/authentication/social-connections/github.mdx --- docs/authentication/social-connections/github.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index 3195a3bffd..0a29770e57 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -18,8 +18,7 @@ description: Use GitHub to authenticate users with OAuth. }, ]} > - - Configure for your development instance - - Configure for your production instance + - Use GitHub to authenticate users with OAuth Enabling OAuth with [GitHub](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app) allows your users to sign up and sign in to your Clerk app with their GitHub account. From 09382cdd50cec739b79d0e9dd685e31fb47ee50b Mon Sep 17 00:00:00 2001 From: victoria Date: Thu, 10 Oct 2024 17:06:20 +0200 Subject: [PATCH 06/14] Update docs/authentication/social-connections/github.mdx Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> --- docs/authentication/social-connections/github.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index 0a29770e57..75f787b24a 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -1,6 +1,6 @@ --- title: Add GitHub as a social connection -description: Use GitHub to authenticate users with OAuth. +description: Learn how to allow users to sign up and sign in to your Clerk app with their GitHub account using OAuth. --- From 3e71d72e4ac8fb8de053e8d2ab6a827cdd8b1868 Mon Sep 17 00:00:00 2001 From: victoria Date: Thu, 10 Oct 2024 17:06:40 +0200 Subject: [PATCH 07/14] Update docs/authentication/social-connections/github.mdx Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> --- docs/authentication/social-connections/github.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index 75f787b24a..9ee2d8cc6c 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -44,7 +44,8 @@ To make the setup process easier, it's recommended to keep two browser tabs open 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 choose **For all users**. 1. In the **Choose provider** dropdown, select **GitHub**. - 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. Keep the modal and page open. + 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. ### Set the Client ID and Client Secret in your Clerk Dashboard From 32ff4f57057dd330743387201204f62286c29621 Mon Sep 17 00:00:00 2001 From: victoria Date: Thu, 10 Oct 2024 17:07:46 +0200 Subject: [PATCH 08/14] Update docs/authentication/social-connections/github.mdx Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> --- docs/authentication/social-connections/github.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index 9ee2d8cc6c..e269137422 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -50,7 +50,7 @@ To make the setup process easier, it's recommended to keep two browser tabs open ### Set the Client ID and Client Secret in your Clerk Dashboard 1. Go to [GitHub's Developer Settings](https://github.com/settings/apps) by selecting your profile photo in the top-right navigation, then choose **Settings**. In the sidebar, select **Developer settings**. - 1. In the sidebar, select **OAuth Apps** then select [**New OAuth app**](https://github.com/settings/applications/new). You'll be redirected to the **Register a new OAuth app** form. + 1. In the sidebar, select **OAuth Apps**, then select [**New OAuth app**](https://github.com/settings/applications/new). You'll be redirected to the **Register a new OAuth app** form. 1. Enter your **Application name** and **Homepage URL**. Keep the page open for the next step. 1. Navigate back to your Clerk Dashboard. In the **Add connection for all users** modal under the **Configure GitHub**, copy the **Authorized redirect URI**. 1. Navigate back to GitHub and paste the string in **Authorization callback URL**. From 67e0de7f4fc84a210971241fdc0ec10c32d86812 Mon Sep 17 00:00:00 2001 From: victoria Date: Thu, 10 Oct 2024 17:40:12 +0200 Subject: [PATCH 09/14] Update docs/authentication/social-connections/github.mdx Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> --- docs/authentication/social-connections/github.mdx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index e269137422..ac9c340f76 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -51,14 +51,15 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. Go to [GitHub's Developer Settings](https://github.com/settings/apps) by selecting your profile photo in the top-right navigation, then choose **Settings**. In the sidebar, select **Developer settings**. 1. In the sidebar, select **OAuth Apps**, then select [**New OAuth app**](https://github.com/settings/applications/new). You'll be redirected to the **Register a new OAuth app** form. - 1. Enter your **Application name** and **Homepage URL**. Keep the page open for the next step. - 1. Navigate back to your Clerk Dashboard. In the **Add connection for all users** modal under the **Configure GitHub**, copy the **Authorized redirect URI**. - 1. Navigate back to GitHub and paste the string in **Authorization callback URL**. - 1. Select **Register application**. You'll be redirected to your app's **General** page. + 1. Complete the form. Under **Authorization callback URL**, paste the **Authorized redirect URI** value you saved from the Clerk Dashboard. + 1. Once you're finished completing the form, select **Register application**. You'll be redirected to your app's **General** page. 1. Select **Generate a new client secret**. Save your **Client ID** and **Client secret** somewhere secure. - 1. Navigate back to your Clerk Dashboard. Paste these values into the respective fields. + 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**. + > [!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 **GitHub** 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. From 514da1c5dd2f9248a58047cb6ef90d8c4ed13500 Mon Sep 17 00:00:00 2001 From: victoria Date: Thu, 10 Oct 2024 17:40:17 +0200 Subject: [PATCH 10/14] Update docs/authentication/social-connections/github.mdx Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> --- docs/authentication/social-connections/github.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index ac9c340f76..7880f14edf 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -49,7 +49,7 @@ To make the setup process easier, it's recommended to keep two browser tabs open ### Set the Client ID and Client Secret in your Clerk Dashboard - 1. Go to [GitHub's Developer Settings](https://github.com/settings/apps) by selecting your profile photo in the top-right navigation, then choose **Settings**. In the sidebar, select **Developer settings**. + 1. On a separate page, go to [GitHub's Developer Settings](https://github.com/settings/apps). 1. In the sidebar, select **OAuth Apps**, then select [**New OAuth app**](https://github.com/settings/applications/new). You'll be redirected to the **Register a new OAuth app** form. 1. Complete the form. Under **Authorization callback URL**, paste the **Authorized redirect URI** value you saved from the Clerk Dashboard. 1. Once you're finished completing the form, select **Register application**. You'll be redirected to your app's **General** page. From 8b98b76bc05c41eefb2ac2a6e18c0c8bbbda9940 Mon Sep 17 00:00:00 2001 From: vi Date: Thu, 10 Oct 2024 19:33:27 +0200 Subject: [PATCH 11/14] update --- .../social-connections/github.mdx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index 7880f14edf..d295546660 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -39,26 +39,29 @@ For _production instances_, you must provide custom credentials which involves g 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 [GitHub Developers](https://GitHub.com/developers/applications) page. + ### Create a GitHub app + + 1. On a separate page, go to [GitHub's Developer Settings](https://github.com/settings/apps). + 1. In the sidebar, select **OAuth Apps**, then select [**New OAuth app**](https://github.com/settings/applications/new). You'll be redirected to the **Register a new OAuth app** form. Keep this page open. + ### Enable GitHub as a social connection in Clerk 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 choose **For all users**. 1. In the **Choose provider** dropdown, select **GitHub**. 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. + 1. Copy the **Authorized redirect URI**. + 1. Navigate back to your GitHub app's page. In **Authorization callback URL**, paste the **Authorized redirect URI** value you copied. + 1. Select **Register application**. You'll be redirected to your GitHub app's **General** page. + 1. Select **Generate a new client secret**. Save your **Client ID** and **Client secret** somewhere secure. Keep the modal and page open. ### Set the Client ID and Client Secret in your Clerk Dashboard - 1. On a separate page, go to [GitHub's Developer Settings](https://github.com/settings/apps). - 1. In the sidebar, select **OAuth Apps**, then select [**New OAuth app**](https://github.com/settings/applications/new). You'll be redirected to the **Register a new OAuth app** form. - 1. Complete the form. Under **Authorization callback URL**, paste the **Authorized redirect URI** value you saved from the Clerk Dashboard. - 1. Once you're finished completing the form, select **Register application**. You'll be redirected to your app's **General** page. - 1. Select **Generate a new client secret**. Save your **Client ID** and **Client secret** somewhere secure. 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**. > [!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 **GitHub** 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 GitHub connection. Under **Use custom credentials**, you can paste the **Client ID** and **Client Secret** into their respective fields. ### Test your OAuth From 0e32e6b5a923093dcb4f511360bc4faa47d82b45 Mon Sep 17 00:00:00 2001 From: vi Date: Thu, 10 Oct 2024 23:34:33 +0200 Subject: [PATCH 12/14] fix --- .../social-connections/github.mdx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index d295546660..5eb33ad987 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -39,24 +39,26 @@ For _production instances_, you must provide custom credentials which involves g 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 [GitHub Developers](https://GitHub.com/developers/applications) page. - ### Create a GitHub app - - 1. On a separate page, go to [GitHub's Developer Settings](https://github.com/settings/apps). - 1. In the sidebar, select **OAuth Apps**, then select [**New OAuth app**](https://github.com/settings/applications/new). You'll be redirected to the **Register a new OAuth app** form. Keep this page open. - ### Enable GitHub as a social connection in Clerk 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 choose **For all users**. 1. In the **Choose provider** dropdown, select **GitHub**. 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. - 1. Copy the **Authorized redirect URI**. - 1. Navigate back to your GitHub app's page. In **Authorization callback URL**, paste the **Authorized redirect URI** value you copied. + 1. Save the **Authorized redirect URI** somewhere secure. Keep the modal and page open. + + ### Create a GitHub app + + 1. On a separate page, go to [GitHub's Developer Settings](https://github.com/settings/apps). + 1. In the sidebar, select **OAuth Apps**, then select [**New OAuth app**](https://github.com/settings/applications/new). You'll be redirected to the **Register a new OAuth app** form. + 1. Enter your **Application name** and **Homepage URL**. + 1. In **Authorization callback URL**, paste the **Authorized Redirect URI** you saved from the Clerk Dashboard. 1. Select **Register application**. You'll be redirected to your GitHub app's **General** page. - 1. Select **Generate a new client secret**. Save your **Client ID** and **Client secret** somewhere secure. Keep the modal and page open. + 1. Select **Generate a new client secret**. ### Set the Client ID and Client Secret in your Clerk Dashboard + 1. In the GitHub app's **General** page, save your **Client ID** and **Client secret** somewhere secure. 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**. From 982490598347b7617d46df02285a8c6bfce91475 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Fri, 11 Oct 2024 16:19:38 -0400 Subject: [PATCH 13/14] Update docs/authentication/social-connections/github.mdx --- docs/authentication/social-connections/github.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index 5eb33ad987..e42f537bc5 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -58,7 +58,7 @@ To make the setup process easier, it's recommended to keep two browser tabs open ### Set the Client ID and Client Secret in your Clerk Dashboard - 1. In the GitHub app's **General** page, save your **Client ID** and **Client secret** somewhere secure. + 1. In the GitHub app's **General** page, select **Generate a new client secret**. Save your **Client ID** and **Client secret** somewhere secure. 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**. From 4a2e32e1768cc899e34ab6869e16ba1477fb72ec Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Fri, 11 Oct 2024 16:19:55 -0400 Subject: [PATCH 14/14] Update docs/authentication/social-connections/github.mdx --- docs/authentication/social-connections/github.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index e42f537bc5..d553bc1419 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -54,7 +54,6 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. Enter your **Application name** and **Homepage URL**. 1. In **Authorization callback URL**, paste the **Authorized Redirect URI** you saved from the Clerk Dashboard. 1. Select **Register application**. You'll be redirected to your GitHub app's **General** page. - 1. Select **Generate a new client secret**. ### Set the Client ID and Client Secret in your Clerk Dashboard