From 5239e6400f11e94ed0533eca506a942441f7c0ef Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Fri, 4 Oct 2024 13:58:56 -0400 Subject: [PATCH] Update Microsoft OAuth guide; align copy about development vs production instances in other guides (#1588) Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> --- .../social-connections/apple.mdx | 5 ++-- .../social-connections/huggingface.mdx | 8 ++++-- .../social-connections/linkedin-oidc.mdx | 8 ++++-- .../social-connections/microsoft.mdx | 26 ++++++++++++------- .../social-connections/spotify.mdx | 2 +- .../social-connections/x-twitter.mdx | 2 +- 6 files changed, 34 insertions(+), 17 deletions(-) diff --git a/docs/authentication/social-connections/apple.mdx b/docs/authentication/social-connections/apple.mdx index 48a04f08f3..e7f69e4475 100644 --- a/docs/authentication/social-connections/apple.mdx +++ b/docs/authentication/social-connections/apple.mdx @@ -24,8 +24,9 @@ Enabling OAuth via [Sign in with Apple](https://developer.apple.com/sign-in-with ## 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_. -For **web based flows**, no other configuration is needed. For **native sign-in flows**, you must provide your app's [Bundle ID](https://developer.apple.com/documentation/appstoreconnectapi/bundle_ids). +For _development instances_, Clerk uses preconfigured shared OAuth credentials and redirect URIs. For **web based flows**, no other configuration is needed. For **native sign-in flows**, you must provide your app's [Bundle ID](https://developer.apple.com/documentation/appstoreconnectapi/bundle_ids). + +To configure your development instance, follow these steps: 1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections). 1. In the top navigation, select **Configure**. Then in the sidebar, select **SSO Connections**. diff --git a/docs/authentication/social-connections/huggingface.mdx b/docs/authentication/social-connections/huggingface.mdx index 9216e7ca0a..503a892fe9 100644 --- a/docs/authentication/social-connections/huggingface.mdx +++ b/docs/authentication/social-connections/huggingface.mdx @@ -24,7 +24,9 @@ Enabling OAuth with [Hugging Face](https://huggingface.co/) allows your users to ## 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. + +To configure your development instance, follow these steps: 1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections). 1. In the top navigation, select **Configure**. Then in the sidebar, select **SSO Connections**. @@ -34,7 +36,9 @@ To make the development flow as smooth as possible, Clerk uses preconfigured sha ## Configure for your production instance -In _production instances_, you must provide custom credentials, which includes generating your own **Client ID** and **Client Secret** using your Hugging Face account. This tutorial will walk you through that process in just a few steps. +In _production instances_, you must provide custom credentials, which involves generating your own **Client ID** and **Client Secret** using your Hugging Face account. + +To configure your production instance, follow these steps: ### Create a Hugging Face Connected App diff --git a/docs/authentication/social-connections/linkedin-oidc.mdx b/docs/authentication/social-connections/linkedin-oidc.mdx index e623dde43f..9b544bddd2 100644 --- a/docs/authentication/social-connections/linkedin-oidc.mdx +++ b/docs/authentication/social-connections/linkedin-oidc.mdx @@ -22,7 +22,9 @@ description: Learn how to allow users to sign into your Clerk app with their Lin ## 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. + +To configure your development instance, follow these steps: 1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections). 1. In the top navigation, select **Configure**. Then in the sidebar, select **SSO Connections**. @@ -32,7 +34,9 @@ To make the development flow as smooth as possible, Clerk uses preconfigured sha ## Configure for your production instance -In _production instances_, you must provide custom credentials, which includes generating your own **Client ID** and **Client Secret** using your LinkedIn Developer account. Don't worry, this tutorial will walk you through that process in just a few steps. +In _production instances_, you must provide custom credentials, which involves generating your own **Client ID** and **Client Secret** using your LinkedIn Developer account. + +To configure your production instance, follow these steps: ### Create a LinkedIn application diff --git a/docs/authentication/social-connections/microsoft.mdx b/docs/authentication/social-connections/microsoft.mdx index e564ba448d..1993b7be31 100644 --- a/docs/authentication/social-connections/microsoft.mdx +++ b/docs/authentication/social-connections/microsoft.mdx @@ -25,7 +25,9 @@ Enabling OAuth with Microsoft Azure Entra ID (formerly [Active Directory](https: ## 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. + +To configure your development instance, follow these steps: 1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections). 1. In the top navigation, select **Configure**. Then in the sidebar, select **SSO Connections**. @@ -35,7 +37,9 @@ To make the development flow as smooth as possible, Clerk uses preconfigured sha ## Configure for your production instance -In _production instances_, you must provide custom credentials, which includes generating your own **Client ID** and **Client Secret** using your Microsoft Entra ID dashboard account. Don't worry, this tutorial will walk you through that process in just a few steps. +In _production instances_, you must provide custom credentials, which involves generating your own **Client ID** and **Client Secret** using your Microsoft Entra ID dashboard account. + +To configure your production instance, follow these steps: ### Create a Microsoft Entra ID app @@ -43,8 +47,8 @@ In _production instances_, you must provide custom credentials, which includes g > [!TIP] > If you already have a Microsoft Entra ID app you'd like to connect to Clerk, select your app from the [Microsoft Entra ID dashboard](https://portal.azure.com/#home) and skip to [the next step in this tutorial](#get-your-client-id-and-client-secret). - 1. Under the **Azure services** section on the homepage of [the Azure portal](https://portal.azure.com/#home), select **[Microsoft Entra ID](https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/Overview)**. - 1. In the sidebar, select **[App registrations](https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/RegisteredApps)**. + 1. On the homepage of [the Azure portal](https://portal.azure.com/#home), in the **Azure services** section, select **[Microsoft Entra ID](https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/Overview)**. + 1. In the sidebar, under **Manage**, select **[App registrations](https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/RegisteredApps)**. 1. Select **New Registration**. You'll be taken to the **Register an application** page. 1. Fill out the form as follows: 1. Under **Name**, name the app whatever you'd like. "Clerk Demo App", for example. @@ -56,12 +60,13 @@ In _production instances_, you must provide custom credentials, which includes g Once your Microsoft Entra ID app is created, or once you select your app from the Microsoft Entra ID dashboard, you'll be taken to its **Overview**. - 1. From your app's overview, copy the **Application (client) ID** and save it somewhere secure. It's required connecting your Microsoft Entra ID app to your Clerk app. + 1. From your app's overview, copy the **Application (client) ID** and save it somewhere secure. It's required for connecting your Microsoft Entra ID app to your Clerk app. 1. On this same page, under **Client credentials**, select **Add a certificate or secret** to generate a Client Secret. You'll be taken to the **Certificate & secrets** page. 1. Select the **New client secret** button. In the modal that opens, add a description and set an expiration time for your secret. > [!IMPORTANT] > When your secret expires, your social connection will stop working until you generate a new client secret and add it to your Clerk app. 1. Copy your new client secret's **Value** and save it somewhere secure. You'll add it to your Clerk application later, alongside your client ID. + 1. Leave this tab open. ### Connect your Entra ID app and get your redirect URI @@ -80,9 +85,12 @@ In _production instances_, you must provide custom credentials, which includes g To connect your Clerk app to your Microsoft app, you must set the **Authorized redirect URI** in your Microsoft Entra ID dashboard. 1. Return to the tab where your Microsoft Entra ID dashboard is open. - 1. In the sidebar, select **Authentication**, then select **Add a platform**. - 1. Select **Single-page application**. - 1. In the **Redirect URIs** field of the modal that appears, add your Clerk application's authorized redirect URI. Do the same in the **Front-channel logout URL** field. + 1. In the sidebar, under **Manage**,select **Authentication**. + 1. Select **Add a platform**. + 1. Select **Web**. + 1. In the **Redirect URIs** field and the **Front-channel logout URL** field, add the **Authorized redirect URI** you copied in the previous step. + 1. Under **Implicit grant and hybrid flows**, check both **Access tokens** and **ID tokens**. + 1. Select **Configure** to save the changes. ### Test your OAuth @@ -92,7 +100,7 @@ In _production instances_, you must provide custom credentials, which includes g 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 **Continue with Microsoft** as an option. Use it to sign in with your Microsoft account. + 1. On the sign-in page, you should see **Microsoft** as an option. Use it to sign in with your Microsoft account. ### Secure your app against the nOAuth vulnerability diff --git a/docs/authentication/social-connections/spotify.mdx b/docs/authentication/social-connections/spotify.mdx index d44ea50bf8..e27397af65 100644 --- a/docs/authentication/social-connections/spotify.mdx +++ b/docs/authentication/social-connections/spotify.mdx @@ -7,7 +7,7 @@ Learn how to set up a social connection with Spotify in your Clerk application. ## Overview -**Clerk does not currently support preconfigured shared OAuth credentials for Spotify on development instances.** You will have to provide custom credentials for both development _and_ production instances, which includes generating your own Client ID and Client Secret using your Spotify Developer account. Don't worry, this guide will walk you through that process in just a few simple steps. +**Clerk does not currently support preconfigured shared OAuth credentials for Spotify on development instances.** You will have to provide custom credentials for both development _and_ production instances, which involves generating your own Client ID and Client Secret using your Spotify Developer account. Don't worry, this guide will walk you through that process in just a few simple steps. > [!CAUTION] > [Spotify](https://developer.spotify.com/documentation/web-api/concepts/quota-modes) requires users to be added to the Spotify application's allowlist in order to allow them to connect to your Clerk application with Spotify OAuth. Each user who attempts to use your Clerk app in **development** with Spotify as their authentication method will need to be added to your app's allowlist before they can use it. _Your users may be able to log into your development Clerk app without having been allowlisted in Spotify. However, API requests with an access token associated to that user and Spotify app will receive a 403 status code error._ diff --git a/docs/authentication/social-connections/x-twitter.mdx b/docs/authentication/social-connections/x-twitter.mdx index 7730c5f0c2..a7c0f331e0 100644 --- a/docs/authentication/social-connections/x-twitter.mdx +++ b/docs/authentication/social-connections/x-twitter.mdx @@ -25,7 +25,7 @@ description: Learn how to set up a social connection with X/Twitter v2 in your C ## Overview -Clerk does not currently support preconfigured shared OAuth credentials for X/Twitter on development instances. This means you will have to provide custom credentials for both development _and_ production instances, which includes generating your own **Client ID** and **Client Secret** using your X/Twitter Developer account. This tutorial will walk you through that process in just a few simple steps. +Clerk does not currently support preconfigured shared OAuth credentials for X/Twitter on development instances. This means you will have to provide custom credentials for both development _and_ production instances, which involves generating your own **Client ID** and **Client Secret** using your X/Twitter Developer account. This tutorial will walk you through that process in just a few simple steps. > [!WARNING] > X/Twitter v2 is currently not providing email addresses of users. The user will have to fill in their email address manually when they return to your application after authenticating with X/Twitter.