diff --git a/docs/_partials/authentication/set-client-id-secret.mdx b/docs/_partials/authentication/set-client-id-secret.mdx new file mode 100644 index 0000000000..596fbae68d --- /dev/null +++ b/docs/_partials/authentication/set-client-id-secret.mdx @@ -0,0 +1,5 @@ +1. Navigate back to the 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 no longer open, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page in the Clerk Dashboard. Select the connection. Under **Use custom credentials**, paste the values into their respective fields. diff --git a/docs/_partials/authentication/test-your-connection.mdx b/docs/_partials/authentication/test-your-connection.mdx new file mode 100644 index 0000000000..cabd4ab7af --- /dev/null +++ b/docs/_partials/authentication/test-your-connection.mdx @@ -0,0 +1,9 @@ +The simplest way to test your connection 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 connection's credentials. diff --git a/docs/guides/force-mfa.mdx b/docs/authentication/configuration/force-mfa.mdx similarity index 100% rename from docs/guides/force-mfa.mdx rename to docs/authentication/configuration/force-mfa.mdx diff --git a/docs/authentication/enterprise-connections/easie/google.mdx b/docs/authentication/enterprise-connections/easie/google.mdx index caa6e91d22..3a51614522 100644 --- a/docs/authentication/enterprise-connections/easie/google.mdx +++ b/docs/authentication/enterprise-connections/easie/google.mdx @@ -42,7 +42,7 @@ For _development instances_, Clerk uses preconfigured shared credentials and red > [!WARNING] > If you already [configured Google as a social provider](/docs/authentication/social-connections/google), you can skip this step. EASIE SSO will automatically use the credentials you configured for your social connection. -For _production instances_, you must provide custom credentials, which involves generating your own **Client ID** and **Client Secret** using your Google Developer account. +For _production instances_, you must provide custom credentials. To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Google Cloud Console](https://console.cloud.google.com/). diff --git a/docs/authentication/enterprise-connections/easie/microsoft.mdx b/docs/authentication/enterprise-connections/easie/microsoft.mdx index e98dd01ed3..e3d50e0194 100644 --- a/docs/authentication/enterprise-connections/easie/microsoft.mdx +++ b/docs/authentication/enterprise-connections/easie/microsoft.mdx @@ -42,7 +42,7 @@ For _development instances_, Clerk uses preconfigured shared credentials and red > [!WARNING] > If you already [configured Microsoft as a social provider](/docs/authentication/social-connections/microsoft), you can skip this step. EASIE SSO will automatically use the credentials you configured for your social connection. -For _production instances_, you must provide custom credentials, which involves generating your own **Client ID** and **Client Secret** using your Microsoft Entra ID account. +For _production instances_, you must provide custom credentials. To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Microsoft Azure portal](https://portal.azure.com). diff --git a/docs/authentication/social-connections/apple.mdx b/docs/authentication/social-connections/apple.mdx index 069446e010..6ef704d4e1 100644 --- a/docs/authentication/social-connections/apple.mdx +++ b/docs/authentication/social-connections/apple.mdx @@ -117,7 +117,7 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. Under **Sign in with Apple for Email Communication**, select **Configure**. You'll be redirected to the **Configure Sign in with Apple for Email Communication** page. 1. Next to **Email Sources** at the top of the page, select the plus icon (+) to add a new **Email Source**. 1. In the **Register your email sources** modal that opens, under **Email Addresses**, add the **Email Source for Apple Private Email Relay** value that you saved from the Clerk Dashboard. It should look something like this: `bounces+00000000@clkmail.myapp.com`. - 1. Select **Next**. The modal will redirect to the **Confirm your email sources** page. + 1. Select **Next**. The modal will redirect to the **Confirm your email sources** screen. 1. Select **Register**. The modal will redirect to the **Email Source Registration Complete** screen. 1. Select **Done**. @@ -161,13 +161,7 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. Add all the corresponding fields depending on your desired flow. For the **Apple Private Key** file, open it with a text editor and copy/paste the contents. 1. Select **Add connection**. - ### Test your OAuth + ### Test your connection - 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 Apple account. + diff --git a/docs/authentication/social-connections/atlassian.mdx b/docs/authentication/social-connections/atlassian.mdx index c145d1b1ad..2eb0c6253f 100644 --- a/docs/authentication/social-connections/atlassian.mdx +++ b/docs/authentication/social-connections/atlassian.mdx @@ -1,89 +1,82 @@ --- title: Add Atlassian as a social connection -description: Learn how to set up social connection with Atlassian. +description: Learn how to allow users to sign up and sign in to your Clerk app with their Atlassian account using OAuth. --- -How to set up social connection with Atlassian + + - Use Atlassian to authenticate users with OAuth + -## Overview +Enabling OAuth with Atlassian allows your users to sign up and sign in to your Clerk app with their Atlassian account. -Adding social connection with Atlassian to your app with Clerk is done in a few steps - you will need to populate 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 Atlassian 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 **Atlassian**. +1. Select **Add connection**. -> [!NOTE] -> The purpose of this guide is to help you create an Atlassian account and an Atlassian OAuth 2.0 Integration - 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. -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). -- You need to have a Atlassian developer account. To create one, [click here](https://developer.atlassian.com/). +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Atlassian Developer console](https://developer.atlassian.com/console/myapps/). -## Configuring an Atlassian OAuth 2.0 Integration + + ### Enable Atlassian as a social connection -You can navigate to the [list of all your apps](https://developer.atlassian.com/console/myapps/) to select an existing app or create a new one: + 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 **Atlassian**. + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. + 1. Save the **Callback URL** somewhere secure. Keep this modal and page open. -![Atlassian app listing](/docs/images/authentication-providers/atlassian/37ec3daaa6d6eaa060ad7fecb112ae6d1ef46597-3456x1844.png) + ### Create an Atlassian workspace -From there, click on the desired existing app or create a new one, which will take you to the app page. + > [!TIP] + > If you already have an Atlassian workspace you'd like to connect to Clerk, select your workspace from the [Atlassian Developer console](https://developer.atlassian.com/console/myapps/) and skip to [the next step in this tutorial](#configure-your-atlassian-app). -![Atlassian OAuth 2.0 app page](/docs/images/authentication-providers/atlassian/597e9bdc5a6b521bcbf8223c04a1102683bf9231-3456x1730.png) + 1. In the [Atlassian Developer console](https://developer.atlassian.com/console/myapps/), next to **My apps**, select **Create**. Then, select **OAuth 2.0 integration**. You'll be redirected to the **Create a new OAuth 2.0 (3LO) integration** page. + 1. Fill out the necessary information. Then, select **Create**. Once the integration is created, you'll be redirected to the app's **Overview** page. -While not necessary for the integration to work, you can edit your app name, description and set a logo for it in the **Settings** tab. + ### Configure your Atlassian app -![Atlassian OAuth 2.0 settings page](/docs/images/authentication-providers/atlassian/b2762ea10eebe6f05f39aa9ed33c54ca41bc2f3d-3456x1730.png) + 1. In the left sidebar of your app's **Overview** page, select **Permissions**. Configure the OAuth 2.0 scopes to request from your users when they connect with Atlassian. At a minimum, next to **User identity API**, select **Add**. + 1. In the left sidebar, select **Authorization**. + 1. Next to **OAuth 2.0 (3LO)**, select **Add**. + 1. In the **Callback URL** field, paste the **Callback URL** you saved from the Clerk Dashboard. + 1. Select **Save changes**. + 1. In the left sidebar, select **Settings**. + 1. Under **Authentication details**, save the **Client ID** and **Secret** somewhere secure. + 1. In the left sidebar, select **Distribution**. + 1. Select **Edit**. + 1. Set the **Distribution Status** to **Sharing**. + 1. Complete the required fields. For **Does your app store personal data?**, select **Yes**, as Clerk uses the user's personal data to authenticate them. + 1. Select **Save changes**. -From the app page, click on the **Permissions** tab in the sidebar menu. + ### Set the Client ID and Secret in the Clerk Dashboard -![Atlassian OAuth 2.0 Integration permissions](/docs/images/authentication-providers/atlassian/04fa49b7d9ba58c0faf2c2b97f85b5ea17a9ebe6-3456x1730.png) + -Here, you will need to configure the OAuth 2.0 scopes that should be requested from your users when they attempt to connect with Atlassian. + ### Test your connection -At the very minimum, you will need to enable the **User identity API**, which corresponds to the `read:me` OAuth 2.0 scope. This enables Clerk to retrieve basic user profile info when creating users for your app. + > [!WARNING] + > To be able to connect, the user must have access to at least one Atlassian site (e.g. JIRA, Confluence). Currently, the user can authorize access only to a single Atlassian site. -Afterwards, you will need to set up the Callback URL so that Atlassian can redirect back to your Clerk app upon successful connection. - -This is done by navigating to the Authorization section and clicking on Add. - -![Atlassian OAuth 2.0 Authorization page](/docs/images/authentication-providers/atlassian/3d60a54bb48c03257afbf769f1f50cf45f18871c-3456x1730.png) - -In this section, you will need to paste the Redirect URI that Clerk has provided for you. - -![Atlassian OAuth 2.0 App callback URL settings](/docs/images/authentication-providers/atlassian/a6dc9bd0902359cad9c94de1bdcbd4c9112bff1d-3456x1730.png) - -After entering the callback URL, the Client ID & Client Secret will now be available in the **Settings** tab: - -![Atlassian OAuth 2.0 settings page with Client ID & Client Secret](/docs/images/authentication-providers/atlassian/fdc89459cdc6450c4dbde713e7b840d93b01c862-3456x1730.png) - -You will need to copy these values and paste: - -- The Atlassian Client ID to the **Client ID** input on Clerk -- The Atlassian Client Secret to the **Client Secret** input on Clerk - -![Client ID and Client Secret inputs for Atlassian connection](/docs/images/authentication-providers/atlassian/6ef7100945fb68a379b35a5c295a76405a2cf10e-1156x1354.png) - -If you have enabled further scopes on Atlassian, you can add them in the Clerk Atlassian configuration settings as well. This will affect the tokens that Atlassian issues to you, so that you can access the intended Atlassian resources. - -Finally, you will need to make your Atlassian app publicly accessible, since it starts out as private by default. This is done from the **Distribution** tab: - -![Atlassian OAuth 2.0 app distribution settings](/docs/images/authentication-providers/atlassian/83d5498c454f5ba0b92a76c4a1942e9a07cde48d-3456x1730.png) - -After clicking on **Edit**, you will need to provide the following information and save the form: - -- Set the distribution status to **Sharing** -- Enter your vendor name -- Enter a link to your privacy policy page -- Enter a link to yout terms page -- Add a contact page link (optional) -- Indicate that your data _does_ store data, since at the very least the user profile info is used to create users on the Clerk end - -![Atlassian OAuth2 distribution sharing form](/docs/images/authentication-providers/atlassian/07c724b9a66773c94c169cc2a199a549c45d8fdd-3456x1730.png) - -Notes: - -- To be able to connect, the user must have access to at least one Atlassian site (e.g. JIRA, Confluence) -- Currently the user can authorize access only to a single Atlassian site - -Congratulations! Social connection with Atlassian is now configured for your instance. + + diff --git a/docs/authentication/social-connections/bitbucket.mdx b/docs/authentication/social-connections/bitbucket.mdx index 4f9425d4d6..db8eb39733 100644 --- a/docs/authentication/social-connections/bitbucket.mdx +++ b/docs/authentication/social-connections/bitbucket.mdx @@ -1,61 +1,70 @@ --- title: Add Bitbucket as a social connection -description: Learn how to set up social connection with Bitbucket. +description: Learn how to allow users to sign up and sign in to your Clerk app with their Bitbucket account with OAuth. --- -How to set up social connection with Bitbucket + + - Use Bitbucket to authenticate users with OAuth + -## Overview +Enabling OAuth with [Bitbucket](https://developer.atlassian.com/cloud/bitbucket/oauth-2) allows your users to sign up and sign in to your Clerk application with their Bitbucket account. -Adding social connection with Bitbucket to your app with Clerk is done in a few steps - you will need to populate 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 Consumer Key and Consumer Secret using your Bitbucket 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 **Bitbucket**. +1. Select **Add connection**. -> [!NOTE] -> The purpose of this guide is to help you create a Bitbucket account and a Bitbucket OAuth Consumer - 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. -- You need to create a Clerk application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). -- You need to have a Bitbucket account. To create one, [click here](https://bitbucket.org/account/signup). +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Bitbucket Workspaces](https://bitbucket.org/account/workspaces/) page. -## Configuring Bitbucket social connection + + ### Enable Bitbucket as a social connection in Clerk -Firstly, you will need to have a Bitbucket workspace. + 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 **Bitbucket**. + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. + 1. Save the **Callback URL** somewhere secure. Keep the modal and page open. -You can navigate to the [list of all your workspaces](https://bitbucket.org/account/workspaces/) to select an existing workspace or create a new one: + ### Create a Bitbucket OAuth Consumer -![Bitbucket workspace listing](/docs/images/authentication-providers/bitbucket/005f4b20222a0641a443f750e24d26fd088324db-3360x1896.png) + 1. On a separate page, go to the [Bitbucket Workspaces](https://bitbucket.org/account/workspaces/) page and sign in. + 1. Under **Workspaces**, find your workspace and select **Manage**. + 1. In the sidebar, scroll down and select **OAuth consumers**. + 1. Select **Add consumer**. + 1. Complete the required fields. In **Permissions** , under **Account**, select **Email** and **Read**. + 1. Select **Save**. You'll be redirected to the **OAuth consumers** page. + 1. Select your consumer and save the **Key** and **Secret** values somewhere secure. -From there, click on the desired existing workspace or create a new one, then navigate to: + ### Set the Key and Secret in the Clerk Dashboard -**Settings** > **Oauth Consumers** + 1. Navigate back to the Clerk Dashboard where the modal should still be open. Paste the **Key** and **Secret** values that you saved into the respective fields. + 1. Select **Add connection**. -![Bitbucket OAuth Consumer list](/docs/images/authentication-providers/bitbucket/b072d3a9f269a46468e651646d08522aa253fdaf-3360x1782.png) + > [!NOTE] + > If the modal or page is no longer open, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page in the Clerk Dashboard. Select the connection. Under **Use custom credentials**, paste the values into their respective fields. -You will need to create a consumer if you don't have one already. + ### Test your connection -The first important setting for the connection to work is the **Callback URL**. Paste the **Redirect URI** from your Clerk Bitbucket settings in this field: - -![OAuth consumer creation](/docs/images/authentication-providers/bitbucket/3c3f5f49188f740839a9e0f348ffe4d34a5300c3-3360x1782.png) - -The rest of the form fields (**Name, Description, URL, Privacy Policy URL, EULA URL**) can be set to match your application settings. - -The second important setting is the selection of scopes that Clerk should request from Bitbucket upon connecting. - -![Bitbucket OAuth Consumer scopes](/docs/images/authentication-providers/bitbucket/65aee792cbde8564897d5f1110caf090789bf532-1304x942.png) - -Under **Account**, the **Email** & **Read** scopes should be enabled so that Clerk can use your basic Bitbucket account info when creating your Clerk user. - -After saving the Oauth Consumer, Bitbucket will generate a **Consumer Key** and **Consumer Secret** for you. These can be displayed by clicking on the **Consumer** entry in your OAuth Consumer list. - -You will need to copy: - -- The Bitbucket Client **Key** to the **Client ID** input on Clerk -- The Bitbucket Client **Secret** to the **Client Secret** input on Clerk - -![Client ID and Client Secret inputs for Bitbucket connection](/docs/images/authentication-providers/bitbucket/c29fd970821d0746e7637f69bf8f411695638834-1220x784.png) - -Congratulations! Social connection with Bitbucket is now configured for your instance. + + diff --git a/docs/authentication/social-connections/box.mdx b/docs/authentication/social-connections/box.mdx index deba945170..56286a8866 100644 --- a/docs/authentication/social-connections/box.mdx +++ b/docs/authentication/social-connections/box.mdx @@ -33,7 +33,7 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a ## 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 Box account. +For _production instances_, you must provide custom credentials. To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Box Developer Console](https://app.box.com/developers/console). @@ -54,25 +54,13 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. In the list of authentication methods, select **User Authentication (OAuth 2.0)**. 1. Select **Create App**. You'll be redirected to the app's **Configuration** page. 1. In the **OAuth 2.0 Redirect URIs** section, paste the **Redirect URI** value you saved from the Clerk Dashboard. - 1. In the **OAuth 2.0 Credentials** section, copy the **Client ID** and **Client Secret** somewhere secure. You'll need them to connect your Box app to your Clerk app. + 1. In the **OAuth 2.0 Credentials** section, save the **Client ID** and **Client Secret** somewhere secure. ### Set the Client ID and Client Secret in the Clerk Dashboard - 1. Navigate back to the Clerk Dashboard where the modal should still be open. Paste the **Client ID** and **Client Secret** 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 **Box** connection. Under **Use custom credentials**, you can paste the **Client ID** and **Client Secret** into their respective fields. + ### Test your connection - ### 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 Box account. + diff --git a/docs/authentication/social-connections/coinbase.mdx b/docs/authentication/social-connections/coinbase.mdx index 923735e4b7..7f127b1451 100644 --- a/docs/authentication/social-connections/coinbase.mdx +++ b/docs/authentication/social-connections/coinbase.mdx @@ -33,9 +33,9 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a ## 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 Coinbase account. +For _production instances_, you must provide custom credentials. -To make the setup process easier, it's recommended to keep two browser tabs open: one for the [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). +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Coinbase Developer Platform](https://portal.cdp.coinbase.com). ### Enable Coinbase as a social connection in Clerk @@ -51,28 +51,16 @@ To make the setup process easier, it's recommended to keep two browser tabs open > [!NOTE] > Coinbase automatically creates a default project for you named `Project 1`. Select the icon next to the project name to rename it. - 1. In your [Coinbase Developer Platform project dashboard](https://portal.cdp.coinbase.com/projects), navigate to the **API keys** tab. + 1. In your [Coinbase Developer Platform project dashboard](https://portal.cdp.coinbase.com/projects), select 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. + 1. Select **Create client**. The page will refresh and you should see the **Client ID** and **Client Secret**. Save these values somewhere secure. ### Set the Client ID and Client Secret in the Clerk Dashboard - 1. Navigate back to the 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 **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` + ### Test your connection - 1. Sign in with your Coinbase account. + diff --git a/docs/authentication/social-connections/discord.mdx b/docs/authentication/social-connections/discord.mdx index 2532860c1a..24bd200eac 100644 --- a/docs/authentication/social-connections/discord.mdx +++ b/docs/authentication/social-connections/discord.mdx @@ -33,9 +33,9 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a ## 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 Discord account. +For _production instances_, you must provide custom credentials. -To make the setup process easier, it's recommended to keep two browser tabs open: one for the [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). +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Discord Developer Portal](https://discord.com/developers/applications). ### Enable Discord as a social connection in Clerk @@ -48,31 +48,19 @@ To make the setup process easier, it's recommended to keep two browser tabs open ### Create a Discord Developer app - 1. On a separate page, go to the [Discord Developers Portal](https://discord.com/developers/applications) and sign in. + 1. On a separate page, go to the [Discord Developer 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. In the left sidebar, select **OAuth2**. 1. Under **Redirects**, select **Add Redirect**. Paste the **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. + 1. Select **Save Changes**. You may need to tap anywhere on the screen for the button to show. + 1. Save the **Client ID** and **Client Secret** somewhere secure. If you don't see the **Copy** button under the **Client Secret**, select **Reset Secret** to generate a new one. ### Set the Client ID and Client Secret in the Clerk Dashboard - 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 the 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 **Discord** connection. Under **Use custom credentials**, you can paste the **Client ID** and **Client Secret** into their respective fields. + ### Test your connection - ### 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/docs/authentication/social-connections/dropbox.mdx b/docs/authentication/social-connections/dropbox.mdx index 415e5a6183..949c11c491 100644 --- a/docs/authentication/social-connections/dropbox.mdx +++ b/docs/authentication/social-connections/dropbox.mdx @@ -1,38 +1,66 @@ --- title: Add Dropbox as a social connection -description: Learn how to set up social connection with Dropbox. +description: Learn how to allow users to sign up and sign in to your Clerk app with their Dropbox account using OAuth. --- -How to set up social connection with Dropbox + + - Use Dropbox to authenticate users with OAuth + -## Overview +Enabling OAuth with Dropbox allows your users to sign up and sign in to your Clerk application with their Dropbox account. -Adding social connection with Dropbox 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 Dropbox 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 **Dropbox**. +1. Select **Add connection**. -> [!NOTE] -> The purpose of this guide is to help you create a Dropbox account and a Dropbox 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. -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). -- You need to have a Dropbox account. To create one, [click here](https://www.dropbox.com/lp/developers). +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Dropbox App Console](https://www.dropbox.com/developers/apps). -## Configuring Dropbox social connection + + ### Enable Dropbox as a social connection -First, you need to register a new OAuth Dropbox app at the [Dropbox App Console](https://www.dropbox.com/developers/apps). + 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 **Dropbox**. + 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 this modal and page open. -![Creating a new application](/docs/images/authentication-providers/dropbox/creating-new-application.jpg) + ### Configure your Dropbox app -First you need to choose the API type, the App's type of access and to set a name for your new application. You also need to add the **OAuth Redirect URLs.** + 1. In the [Dropbox App Console](https://www.dropbox.com/developers/apps), select a project or [create a new one](https://www.dropbox.com/developers/apps/create). + 1. On your app's **Settings** page, save the **App key** and **App secret** somewhere secure. + 1. In the **Redirect URIs** input, paste the **Redirect URI** value you saved from the Clerk Dashboard and select **Add**. -In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. Select the **Add connection** button, and select **For all users**. In the **Choose provider** dropdown, select **Dropbox**. Toggle on **Use custom credentials** and copy **Redirect URI**. Paste the value into the **OAuth Redirect URIs** input and click create. + ### Set the App Key and App Secret in the 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. Navigate back to the Clerk Dashboard where the modal should still be open. Paste the **App key** and **App secret** values that you saved into the respective fields. + 1. Select **Add connection**. -![Copying values from the Dropbox dashboard](/docs/images/authentication-providers/dropbox/copying-values-from-dropbox-dashboard.jpg) + > [!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 connection. Under **Use custom credentials**, you can paste the values into their respective fields. -Finally, select **Add connection** so that the settings are applied. Congratulations! Social connection with Dropbox is now configured for your instance. + ### Test your connection + + + diff --git a/docs/authentication/social-connections/facebook.mdx b/docs/authentication/social-connections/facebook.mdx index e763e85bfb..8c2c27f282 100644 --- a/docs/authentication/social-connections/facebook.mdx +++ b/docs/authentication/social-connections/facebook.mdx @@ -1,44 +1,77 @@ --- title: Add Facebook as a social connection -description: Learn how to set up social connection with Facebook. +description: Learn how to allow users to sign up and sign in to your Clerk app with their Facebook account using OAuth. --- -How to set up social connection with Facebook - -## Overview - -Adding social connection with Facebook 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. - -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 production instances, you will need to create your own developer account with Facebook and generate your own **App ID** and **App Secret**. - -> [!NOTE] -> The purpose of this guide is to help you set up a Facebook developer account and a Facebook OAuth2.0 project - 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). - -## Before you start - -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). -- You need to have a Facebook Developer account. To create one, consult the [Register as a Facebook developer](https://developers.facebook.com/docs/development/register) page. - -## Configuring Facebook social connection - -![Creating a Facebook app](/docs/images/authentication-providers/facebook/473ca20025e0f1fa7bae18d07ee6e990e171bb42-1391x969.png) - -First, you need to create a new Facebook app and enable Facebook sign-in. Follow the official Facebook instructions on [how to create a Facebook app](https://developers.facebook.com/docs/development/create-an-app). When asked to choose an app type, make sure you select **Consumer**. To learn more about Facebook app types, check the [Facebook App Types](https://developers.facebook.com/docs/development/create-an-app/app-dashboard/app-types) page. - -![Enabling Facebook sign-in for your app](/docs/images/authentication-providers/facebook/98c66e38465c348c45718d32b4404b5fcb291896-1467x969.png) - -At the end of the app creation wizard, you will get redirected to the app dashboard. Find the **Facebook login** card and click **Set Up**. There's no need to go through the quickstart wizard - open the **Settings** dropdown menu (sidebar) and click **Basic**, as shown in the screenshot above. - -Once you have a OAuth client ID created, click on the newly created ID under **OAuth 2.0 Client IDs** and copy the **App Id** and **App Secret**. - -![Retrieving the App ID and App Secret](/docs/images/authentication-providers/facebook/33456604106d3478e0fd6b583bdde7c4f5563641-1467x969.png) - -In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. Select the **Add connection** button, and select **For all users**. In the **Choose provider** dropdown, select **Facebook**. Toggle on **Use custom credentials** and paste the values you obtained during the previous step. - -![Adding the valid OAuth Redirect URI](/docs/images/authentication-providers/facebook/c0be80ce8fed2b4d14d04fcbf56318b80295093d-1467x989.png) - -Before you close the modal, copy the **Redirect URI**. Go back to the Facebook dashboard, open the **Facebook Login** menu (sidebar) and click **Settings**. Paste the URI you copied before into the **Valid OAuth Redirect URIs** field. Hit **Save Changes**. - -Finally, select **Add connection** so that the settings are applied. Congratulations! Social connection with Facebook is now configured for your instance. + + - Use Facebook to authenticate users with OAuth + + +Enabling OAuth with Facebook allows your users to sign up and sign in to your Clerk app with their Facebook 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 select **For all users**. +1. In the **Choose provider** dropdown, select **Facebook**. +1. Select **Add connection**. + +## Configure for your production instance + +For _production instances_, you must provide custom credentials. + +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Facebook Developer](https://developers.facebook.com) page. + + + ### Enable Facebook as a social connection + + 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 **Facebook**. + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. + 1. Save the **Valid OAuth Redirect URI** somewhere secure. Keep this modal and page open. + + ### Create a Facebook app + + 1. In the top-right of the Facebook Developer page, select [**My Apps**](https://developers.facebook.com/apps). + 1. In the top-right, select **Create App**. You'll be redirected to the **Create an app** process. + 1. In the **App details** step, fill out the necessary information and select **Next**. + 1. In the **Use Cases** step, select **Authenticate and request data from users with Facebook Login** and then select **Next**. + 1. In the **Business** step, select the business portfolio to connect to your app and then select **Next**. + 1. In the **Finalize** step, select **Go to dashboard**. You'll be redirected to the app's **Dashboard** page. + 1. In the left sidebar, select **Use cases**. + 1. Next to **Authenticate and request data from users with Facebook Login**, select **Customize**. You'll be redirected to the **Permissions** tab of the **Customize use case** page. + 1. Next to **email**, select **Add**. This permission allows Clerk to read your user's primary email address. + 1. In the left sidebar, under **Facebook Login**, select **Settings**. + 1. In the **Client OAuth settings** section, in the **Valid OAuth Redirect URIs** field, paste the **Valid OAuth Redirect URI** value you saved from the Clerk Dashboard. + 1. Select **Save changes**. + 1. In the left sidebar, select **App settings** (hover over the icon to view the title or expand the menu), and then select **Basic**. + 1. Save the **App ID** and **App Secret** somewhere secure. + + ### Set the App ID and App Secret in the Clerk Dashboard + + 1. Navigate back to the Clerk Dashboard where the modal should still be open. Paste the **App ID** and **App 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 connection. Under **Use custom credentials**, you can paste the values into their respective fields. + + ### Test your connection + + + diff --git a/docs/authentication/social-connections/github.mdx b/docs/authentication/social-connections/github.mdx index 9625f48712..61296ff54e 100644 --- a/docs/authentication/social-connections/github.mdx +++ b/docs/authentication/social-connections/github.mdx @@ -28,13 +28,13 @@ Enabling OAuth with [GitHub](https://docs.github.com/en/developers/apps/building 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. Select **Add connection** and select **For all users**. 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. +For _production instances_, you must provide custom credentials. To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for [GitHub's Developer Settings](https://github.com/settings/apps). @@ -45,34 +45,21 @@ To make the setup process easier, it's recommended to keep two browser tabs open 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 **Redirect URI** somewhere secure. Keep the modal and page open. + 1. Save the **Authorization Callback URL** 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 **Redirect URI** you saved from the Clerk Dashboard. - 1. Select **Register application**. You'll be redirected to your GitHub app's **General** page. + 1. In the left sidebar of your [GitHub's Developer Settings](https://github.com/settings/apps), select **OAuth Apps**. + 1. Select **New OAuth app**. You'll be redirected to the **Register a new OAuth app** page. + 1. Complete the required fields. In **Authorization Callback URL**, paste the **Authorization Callback URL** you saved from the Clerk Dashboard. + 1. Select **Register application**. You'll be redirected to your app's **General** page. + 1. Select **Generate a new client secret**. Save the **Client ID** and **Client Secret** somewhere secure. ### Set the Client ID and Client Secret in the Clerk Dashboard - 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 the 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 connection - ### 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 GitHub account. + diff --git a/docs/authentication/social-connections/gitlab.mdx b/docs/authentication/social-connections/gitlab.mdx index e4e146d8f6..dc25d9357e 100644 --- a/docs/authentication/social-connections/gitlab.mdx +++ b/docs/authentication/social-connections/gitlab.mdx @@ -33,7 +33,7 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a ## 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 GitLab account. +For _production instances_, you must provide custom credentials. To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [GitLab](https://gitlab.com) account. @@ -52,26 +52,18 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. Select **Add new application**. 1. Enter your app name in **Name**. 1. In **Redirect URI**, paste the **Redirect URI** you saved from the Clerk Dashboard. - 1. Select the **Scopes** needed for your app. To allow users to sign up and sign in with GitLab, you must at least select `read_user`. + 1. Select the **Scopes** needed for your app. At minimum, select `read_user`. 1. Select **Save application**. You'll be redirected to your app's settings page. Save the **Application ID** and **Secret** somewhere secure. - ### Set the Client ID and Client Secret in the Clerk Dashboard + ### Set the Application ID and Secret in the Clerk Dashboard - 1. Navigate back to the Clerk Dashboard where the modal should still be open. Paste the **Application ID** and **Secret** values in the **Client ID** and **Client Secret** fields, respectively. + 1. Navigate back to the Clerk Dashboard where the modal should still be open. Paste the **Application ID** and **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 **GitLab** 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 connection. Under **Use custom credentials**, you can paste the values into their respective fields. - ### Test your OAuth + ### Test your connection - 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 GitLab account. + diff --git a/docs/authentication/social-connections/google.mdx b/docs/authentication/social-connections/google.mdx index cbf7aa5755..76a646d06c 100644 --- a/docs/authentication/social-connections/google.mdx +++ b/docs/authentication/social-connections/google.mdx @@ -17,13 +17,13 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w } ]} > - - Use Google to authenticate users with OAuth. + - Use Google to authenticate users with OAuth -Enabling OAuth with Google allows your users to sign up and sign in to your Clerk application with their Google account. +Enabling OAuth with [Google](https://developers.google.com/identity/protocols/oauth2) allows your users to sign up and sign in to your Clerk application with their Google account. > [!WARNING] -> Google sign-in [**does not** allow users to sign in via in-app browsers](https://developers.googleblog.com/en/modernizing-oauth-interactions-in-native-apps-for-better-usability-and-security/). +> Google OAuth 2.0 **does not** allow apps to use WebViews for authentication. See the dedicated [Google blog post](https://developers.googleblog.com/en/modernizing-oauth-interactions-in-native-apps-for-better-usability-and-security) for more information. If your app requires users to sign in via in-app browsers, follow the setup instructions in the [Google Help guide](https://support.google.com/faqs/answer/12284343). ## Configure for your development instance @@ -36,7 +36,7 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a ## 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 Google Developer account. +For _production instances_, you must provide custom credentials. To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Google Cloud Console](https://console.cloud.google.com/). @@ -47,51 +47,39 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. Select **Add connection** and select **For all users**. 1. In the **Choose provider** dropdown, select **Google**. 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 this modal and page open. + 1. Save the **Authorized Redirect URI** somewhere secure. Keep this modal and page open. ### Create a Google Developer project 1. Navigate to the [Google Cloud Console](https://console.cloud.google.com/). - 1. Select a project or [create a new one](https://console.cloud.google.com/projectcreate). - 1. If the **APIs & Services** page isn't already open, open the menu on the left and select **APIs & Services**. - 1. In the menu on the left, select **Credentials**. - 1. Select **Create Credentials**. Then, select **OAuth client ID.** You may need to [configure your OAuth consent screen](https://support.google.com/cloud/answer/6158849?hl=en#userconsent\&zippy=%2Cuser-consent). - 1. Select the appropriate application type for your project. Most likely, you will choose **Web application**. - 1. In the **Authorized Redirect URIs** setting, paste the **Redirect URI** value you saved from the Clerk Dashboard. - 1. Select **Create**. Keep this page open. + 1. Select a project or [create a new one](https://console.cloud.google.com/projectcreate). You'll be redirected to your project's **Dashboard** page. + 1. In the top-left, select the menu icon (**≡**) and select **APIs & Services**. Then, select **Credentials**. + 1. Next to **Credentials**, select **Create Credentials**. Then, select **OAuth client ID.** You might need to [configure your OAuth consent screen](https://support.google.com/cloud/answer/6158849#userconsent). Otherwise, you'll be redirected to the **Create OAuth client ID** page. + 1. Select the appropriate application type for your project. In most cases, it's **Web application**. + 1. In the **Authorized Redirect URIs** setting, paste the **Authorized Redirect URI** value you saved from the Clerk Dashboard. + 1. Select **Create**. A modal will open with your **Client ID** and **Client Secret**. Save these values somewhere secure. ### Set the Client ID and Client Secret in the Clerk Dashboard - Once the OAuth client is created in the Google Cloud Console, a modal will open with your **Client ID** and **Client Secret**. Save these values somewhere secure. + - Go back to the Clerk Dashboard, where the modal should still be open, and paste these values into the respective fields. Then, select **Add connection**. + ### Test your 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 **Google** 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 Google account. + > [!WARNING] - > Google sign-in [**does not** allow users to sign in via in-app browsers](https://developers.googleblog.com/en/modernizing-oauth-interactions-in-native-apps-for-better-usability-and-security/). + > Google sign-in [**does not** allow users to sign in via in-app browsers](https://developers.googleblog.com/en/modernizing-oauth-interactions-in-native-apps-for-better-usability-and-security). ### Important note about switching to production -Google OAuth apps have a publishing status that determines who can access the app. The publishing status setting can be found within the Google Cloud Platform console on the **APIs & Services > OAuth consent screen** page. You can only view the publishing status if the **User type** is set to **External**. +Google OAuth apps have a publishing status that determines who can access the app. The publishing status setting can be found in the Google Cloud Platform console on the **APIs & Services > OAuth consent screen** page. You can only view the publishing status if the **User type** is set to **External**. -By default, Google OAuth apps are set to the "Testing" [publishing status](https://support.google.com/cloud/answer/10311615#publishing-status), which is intended for internal testing before opening connections to your [intended audience](https://support.google.com/cloud/answer/10311615#user-type). It is limited to 100 test users and depending on the requested OAuth scopes, they may need to be explicitly added to your trusted user list to be able to connect. +By default, Google OAuth apps are set to the **"Testing"** [publishing status](https://support.google.com/cloud/answer/10311615#publishing-status), which is intended for internal testing before opening connections to your [intended audience](https://support.google.com/cloud/answer/10311615#user-type). It's limited to 100 test users and depending on the requested OAuth scopes, they might need to be explicitly added to your trusted user list to be able to connect. -To switch a Google OAuth app to production, **you must set the publishing status to "In production".** This involves a verification process with regard to your app name, logo and scopes requested before Google accepts the switch to production. +To switch a Google OAuth app to production, **you must set the publishing status to "In production".** This involves a verification process with regard to your app name, logo, and scopes requested before Google accepts the switch to production. -Make sure that your Clerk production app always uses a corresponding Google OAuth app that is set to the "In Production" publishing status, so that your end users do not encounter any issues using Google as a social connection. +Ensure that your Clerk production app always uses a corresponding Google OAuth app that is set to the **"In production"** publishing status, so your end users don't encounter any issues using Google as a social connection. ### Block email subaddresses @@ -106,7 +94,7 @@ To configure this setting: 1. Enable or disable **Block email subaddresses**. > [!NOTE] -> Existing Google accounts with email subaddresses will be blocked by this restriction and will not be able to sign in. +> Existing Google accounts with email subaddresses will be blocked by this restriction and won't be able to sign in. ## Google One Tap diff --git a/docs/authentication/social-connections/hubspot.mdx b/docs/authentication/social-connections/hubspot.mdx index ac325a68e7..3692daa048 100644 --- a/docs/authentication/social-connections/hubspot.mdx +++ b/docs/authentication/social-connections/hubspot.mdx @@ -1,36 +1,67 @@ --- title: Add HubSpot as a social connection -description: Learn how to setup social connection with HubSpot. +description: Learn how to allow users to sign up and sign in to your Clerk app with their HubSpot account using OAuth. --- -How to set up social connection with HubSpot + + - Use HubSpot to authenticate users with OAuth + -## Overview +Enabling OAuth with HubSpot allows your users to sign up and sign in to your Clerk application with their HubSpot account. -Adding social connection with HubSpot 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 create your own developer account with **HubSpot** and generate your own Client ID and Client secret. +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 **HubSpot**. +1. Select **Add connection**. -> [!NOTE] -> The purpose of this guide is to help you set up a HubSpot developer account and a HubSpot 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 HubSpot Developer account. -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). -- You need to have a HubSpot Developer account. To create one, [click here](https://app.hubspot.com/signup/developers/step/existing-user?_ga=2.145169076.1430980384.1628431607-741498900.1628431607). +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [HubSpot developer account](https://app.hubspot.com/signup-hubspot/developers). -## Configuring HubSpot social connection + + ### Enable HubSpot as a social connection -First, you need to create a new HubSpot app and enable OAuth support. Follow the official HubSpot [Creating an App](https://developers.hubspot.com/docs/api/creating-an-app) guide. + 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 **HubSpot**. + 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 this modal and page open. -Once your app is created, click on the **Auth** tab and copy the **App Id** and **Client secret**, as shown below. + ### Create a HubSpot Developer project -![Configuring a HubSpot app](/docs/images/authentication-providers/hubspot/02d8bf249b4a6debe85e66ea53b5f88817acdba0-1489x995.png) + 1. Navigate to the [HubSpot account selection page](https://app.hubspot.com/myaccounts-beta) and select the **developer** account you want to use. You'll be redirected to the **Developer home** page. + 1. Select **Create app**. You'll be redirected to the app's configuration settings. + 1. In the **App Info** tab, complete the form. The **Public app name** is required. + 1. Select the **Auth** tab. + 1. In the **Redirect URLs** section, paste the **Redirect URI** value you saved from the Clerk Dashboard. + 1. Select **Create app**. You'll be redirected back to the **App Info** tab. + 1. Select the **Auth** tab. + 1. Save the **Client ID** and **Client Secret** values somewhere secure. -In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. Select the **Add connection** button, and select **For all users**. In the **Choose provider** dropdown, select **HubSpot**. Toggle on **Use custom credentials** and paste the values you obtained during the previous step. + ### Set the Client ID and Client Secret in the Clerk Dashboard -Before you close the modal, copy the **Redirect URI**. Go back to the HubSpot panel and paste it into the **Redirect URL** field and click **Save**. + -Finally, select **Add connection** so that the settings are applied. Congratulations! Social connection with HubSpot is now configured for your instance. + ### Test your connection + + + diff --git a/docs/authentication/social-connections/huggingface.mdx b/docs/authentication/social-connections/huggingface.mdx index cf3e43e156..fa66c5f119 100644 --- a/docs/authentication/social-connections/huggingface.mdx +++ b/docs/authentication/social-connections/huggingface.mdx @@ -1,12 +1,12 @@ --- title: Add Hugging Face as a social connection -description: Learn how to allow users to sign in to your Clerk app with their Hugging Face account using OAuth. +description: Learn how to allow users to sign up and sign in to your Clerk app with their Hugging Face account using OAuth. --- - - Use Hugging Face to authenticate users with OAuth. + - Use Hugging Face to authenticate users with OAuth -Enabling OAuth with [Hugging Face](https://huggingface.co/) allows your users to sign in and sign up to your Clerk application with their Hugging Face account. +Enabling OAuth with [Hugging Face](https://huggingface.co/) allows your users to sign up and sign in to your Clerk application with their Hugging Face account. ## Configure for your development instance @@ -29,54 +29,42 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a To configure your development instance, follow these steps: 1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. -1. Select the **Add connection** button, and select **For all users**. +1. Select the **Add connection** button and select **For all users**. 1. In the **Choose provider** dropdown, select **Hugging Face**. 1. Select **Add connection**. ## Configure for your production instance -In _production instances_, you must provide custom credentials, which involves generating your own **Client ID** and **Client Secret** using your Hugging Face account. +In _production instances_, you must provide custom credentials. To configure your production instance, follow these steps: - ### Create a Hugging Face Connected App - - 1. Navigate to [Hugging Face](https://huggingface.co/) and sign in to your account. - 1. in the top right corner, select your avatar and select **Settings**. - 1. In the sidebar, select **Connected Apps**. - 1. Under **Developer Applications**, select **Create App**. - 1. Fill out the form as follows: - - **Application Name**: Name the application whatever you'd like. - - **Homepage URL**: Enter the homepage URL of your application. - - **Logo URL**: Enter the URL of the logo for your application. - - **Token Expiration**: Set the duration for which the token will be valid. - - **Scopes**: Select the scopes that your application requires. Ensure that **openid**, **profile**, and **email** are included. - - **Redirect URLs**: You will need to add the **Redirect URI** from Clerk. See the next step. - - ### Get your Redirect URI from Clerk + ### Enable Hugging Face as a social connection 1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. - 1. Select the **Add connection** button, and select **For all users**. + 1. Select the **Add connection** button and select **For all users**. 1. In the **Choose provider** dropdown, select **Hugging Face**. - 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. Then, copy the **Redirect URI**. - 1. Navigate back to Hugging Face and paste the **Redirect URI** into the **Redirect URLs** field. - 1. Select **Create application**. + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. + 1. Save the **Redirect URL** somewhere secure. Keep this modal and page open. + + ### Create a Hugging Face Connected App + + 1. In the top-right of [Hugging Face](https://huggingface.co/), select your avatar and select **Settings**. + 1. In the left sidebar, select **Connected Apps**. + 1. Under **Developer Applications**, select **Create App**. + 1. Complete the form. Under **Scopes**, select the scopes that your app requires. At minimum, select **openid**, **profile**, and **email**. Under **Redirect URLs**, paste the **Redirect URL** value you saved from the Clerk Dashboard. + 1. Select **Create**. The page should refresh and display the **Client ID** and **App Secret**. Save these values somewhere secure. - ### Set the Client ID and Client Secret in Clerk + ### Set the Client ID and App Secret in the Clerk Dashboard - 1. Once you have created your Hugging Face Connected App, copy the **Client ID** and **App Secret**. - 1. Navigate back to the Clerk Dashboard. - 1. In the **Client ID** and **Client Secret** field, paste the values you copied from Hugging Face. + 1. Navigate back to the Clerk Dashboard where the modal should still be open. Paste the **Client ID** and **App Secret** values that you saved into the respective fields. 1. Select **Add connection**. - ### Test your OAuth + > [!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 connection. Under **Use custom credentials**, you can paste the values into their respective fields. - 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. + ### Test your connection - 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](https://your-domain.accounts.dev/sign-in) - - For production – [https://accounts.your-domain.com/sign-in](https://accounts.your-domain.com/sign-in) - 1. On the sign-in page, you should see **Hugging Face** as an option. Use it to sign in with your Hugging Face account. + diff --git a/docs/authentication/social-connections/line.mdx b/docs/authentication/social-connections/line.mdx index 94231003fe..b9e5bb13cb 100644 --- a/docs/authentication/social-connections/line.mdx +++ b/docs/authentication/social-connections/line.mdx @@ -1,43 +1,75 @@ --- title: Add LINE as a social connection -description: Learn how to set up social connection with LINE. +description: Learn how to allow users to sign up and sign in to your Clerk app with their LINE account using OAuth. --- -How to set up social connection with LINE + + - Use LINE to authenticate users with OAuth + -## Overview +Enabling OAuth with LINE allows your users to sign up and sign in to your Clerk app with their LINE account. -Adding social connection with LINE 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. -> [!NOTE] -> Clerk preconfigured shared OAuth credentials are using **Japan** as the LINE region +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 **LINE**. +1. Select **Add connection**. -For production instances, you will need to generate your own Client ID and Client secret using your LINE account. + + Clerk's preconfigured shared OAuth credentials use **Japan** as the LINE region. + -> [!NOTE] -> The purpose of this guide is to help you create a LINE account and a LINE 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. -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). -- You need to have a LINE developer account. To create one, [click here](https://developers.line.biz/en/). +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [LINE Developers Console](https://developers.line.biz/console/). -## Configuring LINE social connection + + ### Enable LINE as a social connection -First, you need to create a new provider. Fill in a name and click **Create**. + 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 **LINE**. + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. + 1. Save the **Callback URL** somewhere secure. Keep this modal and page open. -![Creating a new provider](/docs/images/authentication-providers/line/creating-new-provider.jpg) + ### Create a LINE app -The next step is to create a new **LINE Login channel**. You will have to select the provider you created before, the region to provide your LINE service, a channel name, and description and finally select **Web app** as the **App type**. + 1. In the [LINE Developers Console](https://developers.line.biz/console/), select **Create a new provider**. A modal will open. + 1. Fill out the necessary information. Select **Create**. You'll be redirected to the app's **Channels** tab. + 1. Select **Create a LINE Login channel**. + 1. Fill out the necessary information. Select **Create**. You'll be redirected to the app's **Basic settings**. + 1. Save the **Channel ID** and **Channel secret** somewhere secure. + 1. Select the **LINE Login** tab. + 1. Under **Callback URL**, select **Edit**. Paste the **Callback URL** value you saved from the Clerk Dashboard. + 1. Select **Update**. -In the next screen, after the app has been created, you will find the **Basic settings** of the application. If you want to also make email address available for your application, you will have to apply for **Email address permission** in the bottom of your app's **Basic settings**. + ### Set the Channel ID and Channel Secret in the Clerk Dashboard -In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. Select the **Add connection** button, and select **For all users**. In the **Choose provider** dropdown, select **LINE**. Toggle on **Use custom credentials** and copy **Redirect URI**. Paste the value into the **LINE login → Callback URL** input. + 1. Navigate back to the Clerk Dashboard where the modal should still be open. Paste the **Channel ID** and **Channel Secret** values that you saved into the respective fields. + 1. Select **Add connection**. -Once all the above are complete, copy the **Channel ID** and **Channel secret.** Go back to the Clerk Dashboard and paste them into the respective fields. + > [!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 connection. Under **Use custom credentials**, you can paste the values into their respective fields. -![Pasting value into LINE dashboard](/docs/images/authentication-providers/line/pasting-value-into-line-dashboard.jpg) + ### Test your connection -Finally, select **Add connection** so that the settings are applied. Congratulations! Social connection with LINE is now configured for your instance. + + diff --git a/docs/authentication/social-connections/linear.mdx b/docs/authentication/social-connections/linear.mdx index 2f61452f76..44c066f3a0 100644 --- a/docs/authentication/social-connections/linear.mdx +++ b/docs/authentication/social-connections/linear.mdx @@ -36,7 +36,7 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a ## 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 Linear account. +For _production instances_, you must provide custom credentials. To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Linear's API settings](https://linear.app/clerk/settings/api) page. @@ -47,32 +47,20 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. Select **Add connection** and select **For all users**. 1. In the **Choose provider** dropdown, select **Linear**. 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. + 1. Save the **Callback URL** somewhere secure. Keep the modal and page open. ### Create a Linear app - 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. In the top-left of [Linear](https://linear.app/), select your workspace, then select **Settings**. + 1. In the sidebar, under **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 see the **Client ID** and **Client Secret** at the top. Save both values somewhere secure. ### Set the Client ID and Client Secret in the Clerk Dashboard - 1. Navigate back to the 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. + ### Test your connection - ### 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 Linear account. + diff --git a/docs/authentication/social-connections/linkedin-oidc.mdx b/docs/authentication/social-connections/linkedin-oidc.mdx index bd36d75b05..99bb05d339 100644 --- a/docs/authentication/social-connections/linkedin-oidc.mdx +++ b/docs/authentication/social-connections/linkedin-oidc.mdx @@ -1,12 +1,12 @@ --- title: Add LinkedIn Open ID Connect (OIDC) as a social connection -description: Learn how to allow users to sign into your Clerk app with their LinkedIn Open ID Connect account using OAuth. +description: Learn how to allow users to sign up and sign in to your Clerk app with their LinkedIn Open ID Connect (OIDC) account. --- - - Use LinkedIn OIDC to authenticate users with OAuth. + - Use LinkedIn OIDC to authenticate users with OAuth +Enabling OpenID Connect (OIDC) with [LinkedIn](https://learn.microsoft.com/en-us/linkedin/shared/authentication/authentication) allows your users to sign up and sign in to your Clerk application with their LinkedIn account. + ## Configure for your development instance For _development instances_, Clerk uses preconfigured shared OAuth credentials and redirect URIs — no other configuration is needed. @@ -27,7 +29,7 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a To configure your development instance, follow these steps: 1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. -1. Select the **Add connection** button, and select **For all users**. +1. Select the **Add connection** button and select **For all users**. 1. In the **Choose provider** dropdown, select **LinkedIn**. 1. Select **Add connection**. @@ -35,62 +37,48 @@ To configure your development instance, follow these 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: +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [LinkedIn Developer Portal](https://developer.linkedin.com/). - ### Create a LinkedIn application + ### Enable LinkedIn as a social connection - > [!TIP] - > If you already have a LinkedIn app you'd like to connect to Clerk, select your app from the [LinkedIn Developer Portal](https://developer.linkedin.com/) and skip to [the next step in this tutorial](#get-your-client-id-and-client-secret). - - 1. On the homepage of the [LinkedIn Developer Portal](https://developer.linkedin.com/), select **Create app**. You'll be taken to the **Create an app** form. - 1. Fill out the form as follows: - 1. Under _App name_, name the application whatever you'd like. "Clerk Demo App", for example. - 1. Under **LinkedIn Page**, paste the URL of the LinkedIn page you'd like to associate with the application. - 1. Under **App logo**, upload an image to represent the application. - 1. Under **Legal agreement**, select the checkbox to agree to LinkedIn's API Terms of Use. - 1. Finally, select **Create app**. + 1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. + 1. Select the **Add connection** button, and select **For all users**. + 1. In the **Choose provider** dropdown, select **LinkedIn**. + 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 this modal and page open. - ### Get your Client ID and Client Secret + ### Create a LinkedIn application - Once your LinkedIn app is created, you'll be taken to the app's dashboard. + > [!TIP] + > If you already have a LinkedIn app you'd like to connect to Clerk, select your app from the [**My apps**](https://www.linkedin.com/developers/apps?appStatus=active) page in the LinkedIn Developer Portal and proceed to the [next step](#get-your-client-id-and-client-secret) in this tutorial. + 1. On the homepage of the [LinkedIn Developer Portal](https://developer.linkedin.com/), select **Create app**. You'll be redirected to the **Create an app** form. + 1. Fill out the necessary information. Then, select **Create app**. You'll be redirected to the app's **Products** page. 1. Select the **Auth** tab. - 1. Under **Application credentials**, you'll find your **Client ID** and **Primary Client Secret**. Copy these values and save them somewhere secure, as they are required to connect your LinkedIn app to your Clerk app. - 1. Keep this page open, as you'll need to come back to it in a moment. - - ### Connect your LinkedIn app and get your redirect URI + 1. Under **Application credentials**, save the **Client ID** and **Primary Client Secret** somewhere secure. + 1. Under the **OAuth 2.0 settings** section, next to **Authorized redirect URLs for your app**, select the **Edit** icon. + 1. Select **Add redirect URL** and paste the **Redirect URL** you copied from the Clerk Dashboard. + 1. Select **Update**. - 1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. - 1. Select the **Add connection** button, and select **For all users**. - 1. In the **Choose provider** dropdown, select **LinkedIn**. - 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. Then: - 1. Under **Client ID**, add the value you copied from **Client ID** in the LinkedIn dashboard. - 1. Under **Client Secret**, add the value you copied from **Primary Client Secret** in the LinkedIn dashboard. - 1. Copy the **Redirect URI**. You need it to configure your LinkedIn app. - 1. Select **Add connection**. + ### Set the Client ID and Primary Client Secret in the Clerk Dashboard - ### Set the Redirect URI for your LinkedIn application + 1. Navigate back to the Clerk Dashboard where the modal should still be open. Paste the **Client ID** and **Primary Client Secret** values that you saved into the respective fields. + 1. Select **Add connection**. - 1. Navigate back to the LinkedIn Developer Portal and go to the **Auth** tab. - 1. Under the **OAuth 2.0 settings** section, next to **Authorized redirect URLs for your app**, select the **Edit** icon. - 1. Select **Add redirect URL** and add the **Redirect URI** you copied from the Clerk Dashboard. + > [!NOTE] + > If the modal or page is no longer open, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page in the Clerk Dashboard. Select the connection. Under **Use custom credentials**, paste the values into their respective fields. ### Enable OpenID Connect in your LinkedIn application 1. Select the **Products** tab. - 1. Next to **Sign In with LinkedIn using OpenID Connect**, select **Request access**. + 1. Next to **Sign In with LinkedIn using OpenID Connect**, select **Request access**. A modal will open. + 1. Follow the instructions and select **Request access**. > [!NOTE] - > If you need to ensure the longevity of the user's access token without the need for re-authentication, make sure to obtain approval as a [Marketing Developer Platform (MDP) partner](https://learn.microsoft.com/en-us/linkedin/marketing/quick-start?view=li-lms-2023-10#step-1-apply-for-api-access). This is not required if you don't directly interact with the LinkedIn API using the access token. - - ### Test your OAuth + > If you need to ensure the longevity of the user's access token without requiring re-authentication, consider getting approval as a [Marketing Developer Platform (MDP) partner](https://learn.microsoft.com/en-us/linkedin/marketing/quick-start?view=li-lms-2023-10#step-1-apply-for-api-access). This isn't necessary if you don't directly interact with the LinkedIn API using the access token. - 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. + ### Test your connection - 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](https://your-domain.accounts.dev/sign-in) - - For production – [https://accounts.your-domain.com/sign-in](https://accounts.your-domain.com/sign-in) - 1. On the sign-in page, you should see **Continue with LinkedIn** as an option. Use it to sign in with your LinkedIn account. + diff --git a/docs/authentication/social-connections/microsoft.mdx b/docs/authentication/social-connections/microsoft.mdx index a76ccb904b..02a5ddff4d 100644 --- a/docs/authentication/social-connections/microsoft.mdx +++ b/docs/authentication/social-connections/microsoft.mdx @@ -17,8 +17,8 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w } ]} > - - Use Microsoft Azure Entra ID to authenticate users with OAuth. - - Protect your app from [the nOAuth exploit](https://www.descope.com/blog/post/noauth). + - Use Microsoft Azure Entra ID to authenticate users with OAuth + - Protect your app from [the nOAuth exploit](https://www.descope.com/blog/post/noauth) Enabling OAuth with Microsoft Azure Entra ID (formerly [Active Directory](https://learn.microsoft.com/en-us/entra/fundamentals/new-name)) allows your users to sign up and sign in to your Clerk app with their Microsoft account. @@ -34,35 +34,43 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a ## 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 Microsoft Entra ID account. +For _production instances_, you must provide custom credentials. To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Microsoft Azure portal](https://portal.azure.com). + ### Enable Microsoft as a social connection + + 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 **Microsoft**. + 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 this modal and page open. + ### Create a Microsoft Entra ID app > [!TIP] > If you already have a Microsoft Entra ID app you'd like to connect to Clerk, select your app from the [Microsoft Azure portal](https://portal.azure.com/#home) and skip to [the next step in this tutorial](#get-your-client-id-and-client-secret). - 1. On the homepage of the [Microsoft 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. On the homepage of the [Microsoft 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)**. If you don't see this option, select **More services**. You'll be redirected to the [All Services](https://portal.azure.com/#allservices) page. 1. In the sidebar, open the **Manage** dropdown and select **[App registrations](https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/RegisteredApps)**. 1. Select **New Registration**. You'll be redirected to the **Register an application** page. 1. Complete the form as follows: 1. Under **Name**, enter your app name. 1. Under **Supported account types**, select **Accounts in any organizational directory (Any Microsoft Entra ID tenant – Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)**. - 1. Under **Redirect URI (Optional)**, select **Web**. - 1. Select **Register** to submit the form. - - ### Get your client ID and client secret + 1. Under **Redirect URI (Optional)**, select **Web** as the platform and enter the **Redirect URI** you saved from the Clerk Dashboard. + 1. Select **Register** to submit the form. You'll be redirected to the **Overview** page of your new app. Keep this page open. - Once your Microsoft Entra ID app is created, or once you select your app from the Microsoft Azure portal, you'll be redirected to its **Overview**. + ### Get your Client ID and Client Secret - 1. From your app's overview, save the **Application (client) ID** somewhere secure. You'll need it to connect your Microsoft Entra ID app to your Clerk app. - 1. Under **Client credentials**, select **Add a certificate or secret** to generate a Client Secret. You'll be redirected to the **Certificate & secrets** page. - 1. Select **New client secret**. In the modal that opens, enter a description and set an expiration time for your secret. + 1. From your app's **Overview** page, save the **Application (client) ID** somewhere secure. + 1. In the sidebar, select **Certificates & secrets**. + 1. Select **New client secret**. + 1. In the modal that opens, enter 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. Save the new client secret's **Value** somewhere secure. You'll add this and your client ID to your Clerk app later. Keep this page open. + 1. Select **Add**. + 1. Save the **Value** somewhere secure. You'll add this secret and your client ID to your Clerk app later. ### Connect your Entra ID app and get your redirect URI @@ -87,17 +95,13 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. Under **Implicit grant and hybrid flows**, check both **Access tokens** and **ID tokens**. 1. Select **Configure** to save the changes. - ### 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. + ### Set the Client ID and Client Secret in the Clerk Dashboard - 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` + ### Test your connection - 1. Sign in with your Microsoft account. + ### Secure your app against the nOAuth vulnerability diff --git a/docs/authentication/social-connections/notion.mdx b/docs/authentication/social-connections/notion.mdx index f9c3c15e3f..9bbc9c61d9 100644 --- a/docs/authentication/social-connections/notion.mdx +++ b/docs/authentication/social-connections/notion.mdx @@ -1,40 +1,64 @@ --- title: Add Notion as a social connection -description: Learn how to set up social connection with Notion. +description: Learn how to allow users to sign up and sign in to your Clerk app with their Notion account using OAuth. --- -How to set up social connection with Notion + + - Use Notion to authenticate users with OAuth + -## Overview +Enabling OAuth with Notion allows your users to sign up and sign in to your Clerk app with their Notion account. -Adding social connection with Notion 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 LinkedIn 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 **Notion**. +1. Select **Add connection**. -> [!NOTE] -> The purpose of this guide is to help you create a Notion developer account and a Notion 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. -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). -- You need to have a Notion developer account. To create one, [click here](https://developers.notion.com/). +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Notion Developer](https://developers.notion.com) page. -## Configuring Notion social connection + + ### Enable Notion as a social connection -First, you need to create a new OAuth Notion app. + 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 **Notion**. + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. + 1. Save the **Authorization URL** somewhere secure. Keep this modal and page open. -![Creating a new integration](/docs/images/authentication-providers/notion/creating-a-new-integration.jpg) + ### Create a Notion app -You need to set a name, a logo, and associate a Notion workspace with it. Make sure you are also requesting the user email address along with the other information and click **Submit**. + 1. In the top-right of the [Notion Developer](https://developers.notion.com) home page, select **View my integrations**. You'll be redirected to the **Integrations** page. + 1. Select **New integration**. + 1. Fill out the necessary information. In the **Type** dropdown, select **Public**. Under **Authorization URL**, paste the **Authorization URL** value you saved from the Clerk Dashboard and then select it. + 1. Select **Save**. The **Integration successfully created** modal will open. Select **Configure integration settings**. You'll be redirected to the app's **Configuration** page. + 1. Save the **OAuth Client ID** and **OAuth Client Secret** somewhere secure. -![Configuring integration](/docs/images/authentication-providers/notion/configuring-integration.jpg) + ### Set the Client ID and Client Secret in the Clerk Dashboard -In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. Select the **Add connection** button, and select **For all users**. In the **Choose provider** dropdown, select **Notion**. Toggle on **Use custom credentials** and copy **Redirect URI**. Paste the value into the **Redirect URIs**, as shown below, after changing the integration type to **Public**. Fill any other information required from Notion and click Submit. + -![Copying values from the Notion dashboard](/docs/images/authentication-providers/notion/copying-values-from-notion-dashboard.jpg) + ### Test your connection -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. - -Finally, select **Add connection** so that the settings are applied. Congratulations! Social connection with Notion is now configured for your instance. + + diff --git a/docs/authentication/social-connections/overview.mdx b/docs/authentication/social-connections/overview.mdx index d97041a66e..25c8f9b882 100644 --- a/docs/authentication/social-connections/overview.mdx +++ b/docs/authentication/social-connections/overview.mdx @@ -6,33 +6,33 @@ description: Browse the wide range of social providers that Clerk provides to ea Clerk provides a wide range of social providers to ease your user's sign-up and sign-in processes. - - [Google](/docs/authentication/social-connections/google) - - Add Google as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/google.svg) + - [Apple](/docs/authentication/social-connections/apple) + - Add Apple as an authentication provider for your Clerk app. + - {} --- - - [Facebook](/docs/authentication/social-connections/facebook) - - Add Facebook as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/facebook.svg) + - [Atlassian](/docs/authentication/social-connections/atlassian) + - Add Atlassian as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/atlassian.svg) --- - - [Twitter](/docs/authentication/social-connections/twitter) - - Add Twitter as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/twitter.svg) + - [Bitbucket](/docs/authentication/social-connections/bitbucket) + - Add Bitbucket as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/bitbucket.svg) --- - - [X/Twitter v2](/docs/authentication/social-connections/twitter) - - Add X (Twitter v2) as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/x-twitter.svg) + - [Box](/docs/authentication/social-connections/box) + - Add Box as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/box.svg) --- - - [TikTok](/docs/authentication/social-connections/tiktok) - - Add TikTok as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/tiktok.svg) + - [Coinbase](/docs/authentication/social-connections/coinbase) + - Add Coinbase as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/coinbase.svg) --- @@ -42,9 +42,15 @@ Clerk provides a wide range of social providers to ease your user's sign-up and --- - - [Twitch](/docs/authentication/social-connections/twitch) - - Add Twitch as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/twitch.svg) + - [Dropbox](/docs/authentication/social-connections/dropbox) + - Add Dropbox as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/dropbox.svg) + + --- + + - [Facebook](/docs/authentication/social-connections/facebook) + - Add Facebook as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/facebook.svg) --- @@ -60,9 +66,9 @@ Clerk provides a wide range of social providers to ease your user's sign-up and --- - - [LinkedIn ](/docs/authentication/social-connections/linkedin-oidc) - - Add LinkedIn as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/linkedin.svg) + - [Google](/docs/authentication/social-connections/google) + - Add Google as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/google.svg) --- @@ -72,21 +78,27 @@ Clerk provides a wide range of social providers to ease your user's sign-up and --- - - [Atlassian](/docs/authentication/social-connections/atlassian) - - Add Atlassian as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/atlassian.svg) + - [Hugging Face](/docs/authentication/social-connections/huggingface) + - Add Hugging Face as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/huggingface.svg) --- - - [Bitbucket](/docs/authentication/social-connections/bitbucket) - - Add Bitbucket as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/bitbucket.svg) + - [LINE](/docs/authentication/social-connections/line) + - Add LINE as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/line.svg) --- - - [Dropbox](/docs/authentication/social-connections/dropbox) - - Add Dropbox as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/dropbox.svg) + - [Linear](/docs/authentication/social-connections/linear) + - Add Linear as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/linear.svg) + + --- + + - [LinkedIn ](/docs/authentication/social-connections/linkedin-oidc) + - Add LinkedIn as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/linkedin.svg) --- @@ -102,21 +114,9 @@ Clerk provides a wide range of social providers to ease your user's sign-up and --- - - [Apple](/docs/authentication/social-connections/apple) - - Add Apple as an authentication provider for your Clerk app. - - {} - - --- - - - [LINE](/docs/authentication/social-connections/line) - - Add LINE as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/line.svg) - - --- - - - [Coinbase](/docs/authentication/social-connections/coinbase) - - Add Coinbase as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/coinbase.svg) + - [Slack](/docs/authentication/social-connections/slack) + - Add Slack as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/slack.svg) --- @@ -126,35 +126,33 @@ Clerk provides a wide range of social providers to ease your user's sign-up and --- - - [Box](/docs/authentication/social-connections/box) - - Add Box as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/box.svg) + - [TikTok](/docs/authentication/social-connections/tiktok) + - Add TikTok as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/tiktok.svg) --- - /> - - - [Xero](/docs/authentication/social-connections/xero) - - Add Xero as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/xero.svg) + - [Twitch](/docs/authentication/social-connections/twitch) + - Add Twitch as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/twitch.svg) --- - - [Slack](/docs/authentication/social-connections/slack) - - Add Slack as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/slack.svg) + - [Twitter](/docs/authentication/social-connections/twitter) + - Add Twitter as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/twitter.svg) --- - - [Linear](/docs/authentication/social-connections/linear) - - Add Linear as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/linear.svg) + - [X/Twitter v2](/docs/authentication/social-connections/twitter) + - Add X (Twitter v2) as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/x-twitter.svg) --- - - [Hugging Face](/docs/authentication/social-connections/huggingface) - - Add Hugging Face as an authentication provider for your Clerk app. - - ![](/docs/images/logos/auth_providers/huggingface.svg) + - [Xero](/docs/authentication/social-connections/xero) + - Add Xero as an authentication provider for your Clerk app. + - ![](/docs/images/logos/auth_providers/xero.svg) Don't see the provider you're looking for? You can [configure a custom OIDC-compatible provider](/docs/authentication/social-connections/custom-provider) or [request a new one](https://feedback.clerk.com/roadmap/f9045ac8-0c8e-4f30-b84f-8d551b0767b9?_gl=1*1ywoqdy*_gcl_au*OTUwODgxMjg2LjE3MTI1OTEwNzMuMTczNjk0NTcxMC4xNzE1MTk4MTEyLjE3MTUxOTgxMTI.). diff --git a/docs/authentication/social-connections/slack.mdx b/docs/authentication/social-connections/slack.mdx index 2b57974f30..25e188a500 100644 --- a/docs/authentication/social-connections/slack.mdx +++ b/docs/authentication/social-connections/slack.mdx @@ -33,7 +33,7 @@ For _development instances_, Clerk uses preconfigured shared OAuth credentials a ## 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 Slack account. +For _production instances_, you must provide custom credentials. To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Slack's API Platform](https://api.slack.com/). @@ -44,33 +44,21 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. Select **Add connection** and select **For all users**. 1. In the **Choose provider** dropdown, select **Slack**. 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. + 1. Save the **Redirect URL** somewhere secure. Keep the modal and page open. ### Create a Slack app - 1. In the Slack API Platform, navigate to the [**Your Apps**](https://api.slack.com/apps) page and select **Create an App**. - 1. A modal will open. Depending on your app needs, select either **From a manifest** for **From scratch**. For more information on which to choose, refer to [Slack's doc on manifests](https://api.slack.com/reference/manifests). + 1. In the Slack API Platform, navigate to the [**Your Apps**](https://api.slack.com/apps) page and select **Create New App**. + 1. The **Create an app** modal will open. Depending on your app needs, select either **From a manifest** or **From scratch**. For more information on which to choose, refer to [Slack's doc on manifests](https://api.slack.com/reference/manifests). 1. After following the respective steps for either option, you'll be redirected to the **App Credentials** page. Save the **Client ID** and **Client Secret** somewhere secure. Keep this page open. 1. In the sidebar, navigate to the **OAuth & Permissions** page. - 1. Scroll down to the **Redirect URLs** section and paste the **Redirect URI** you saved from the Clerk Dashboard. Select **Add**, then select **Save URLs**. + 1. Scroll down to the **Redirect URLs** section and select **Add New Redirect URL**. Paste the **Redirect URL** you saved from the Clerk Dashboard. Select **Add**, then select **Save URLs**. ### Set the Client ID and Client Secret in the Clerk Dashboard - 1. Navigate back to the 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 **Slack** connection. Under **Use custom credentials**, you can paste the **Client ID** and **Client Secret** into their respective fields. + ### Test your connection - ### 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 Slack account. + diff --git a/docs/authentication/social-connections/spotify.mdx b/docs/authentication/social-connections/spotify.mdx index 93023f25ab..8d767a32a5 100644 --- a/docs/authentication/social-connections/spotify.mdx +++ b/docs/authentication/social-connections/spotify.mdx @@ -36,33 +36,19 @@ To make the setup process easier, it's recommended to keep two browser tabs open 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. - ## Create your app in Spotify + ## Create a Spotify app - 1. On a separate page, go to the [Spotify Developer Dashboard](https://developer.spotify.com/) and sign in. - 1. In the top-right, select your profile button and select [**Dashboard**](https://developer.spotify.com/dashboard). - 1. Select [**Create app**](https://developer.spotify.com/dashboard/create). - 1. Complete the required fields. For **Redirect URIs**, add the **Redirect URI** that you saved from Clerk Dashboard. - 1. Select **Save**. - 1. On your app page, select **Settings**. Keep this page open. + 1. In the top-right of the [Spotify Developer Dashboard](https://developer.spotify.com/), select **Create app**. + 1. Complete the required fields. For **Redirect URIs**, paste the **Redirect URI** that you saved from Clerk Dashboard. + 1. Select **Save**. You'll be redirected to your app's **All Stats** page. + 1. Select **Settings**. + 1. Save the **Client ID** and **Client secret** somewhere secure. To get the **Client secret**, select **View client secret**. ## Set the Client ID and Client Secret in the Clerk Dashboard - 1. In the Spotify app's settings page, save the **Client ID** and **Client secret** somewhere secure. To reveal the **Client secret**, you must select **View client secret**. - 1. Navigate back to the 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 **Spotify** connection. Under **Use custom credentials**, you can paste the **Client ID** and **Client Secret** into their respective fields. + ## Test your connection - ### 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 Spotify account. + diff --git a/docs/authentication/social-connections/tiktok.mdx b/docs/authentication/social-connections/tiktok.mdx index bce2d59d5d..cc01736c72 100644 --- a/docs/authentication/social-connections/tiktok.mdx +++ b/docs/authentication/social-connections/tiktok.mdx @@ -17,7 +17,7 @@ description: Learn how to allow users to sign up and sign in to your Clerk app w } ]} > - - Use TikTok ID to authenticate users with OAuth. + - Use TikTok ID to authenticate users with OAuth Enabling OAuth with [TikTok](https://developers.tiktok.com/doc/login-kit-manage-user-access-tokens) allows your users to sign up and sign in to your Clerk app with their TikTok account. @@ -51,33 +51,21 @@ To make the setup process easier, it's recommended to keep two browser tabs open 1. In the top-right, select [**Developer Portal**](https://developers.tiktok.com/apps), then select **Manage apps**. You'll be redirected to the **Manage apps** page. 1. Select **Connect an app**. Complete the form then select **Confirm**. You'll be redirected to your **App details** page. 1. In the **Basic information** section, complete the form. - 1. Select the **Verify URL properties** under any of the URL fields to verify your app URL. A modal will open. + 1. Select **Verify URL properties** under any of the URL fields to verify your app URL. A modal will open. 1. Select **Verify properties**. For the property type, select either **Domain** to verify ownership of the enter website, including subdomains, or **URL prefix** to verify ownership of a specific part of the website (e.g., `example.com/shop/`). See [the TikTok guide](https://developers.tiktok.com/doc/getting-started-create-an-app#verify_url_ownership) for more information. 1. Enter your website and select **Verify**. 1. Follow the instructions in the modal to verify your domain with your host provider. After entering the necessary information in your hosting provider's DNS settings, select **Verified**. Once your property is verified, select **Ok**. - 1. Select **Submit for review**. Keep this page open. + 1. Select **Submit for review**. + 1. On the **App details** page, select the icons next to the **Client key** and **Client secret** to reveal them. Save these values somewhere secure. > [!NOTE] > Your app needs to be reviewed by TikTok before the registration completes. This process may take a few days. ### Set the Client ID and Client Secret in the Clerk Dashboard - 1. In your TikTok app's **App details** page, select the icons next to the **Client key** and **Client secret** to reveal them. Copy these values. - 1. Navigate back to the 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 **TikTok** 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` + ### Test your connection - 1. Sign in with your TikTok account. + diff --git a/docs/authentication/social-connections/twitch.mdx b/docs/authentication/social-connections/twitch.mdx index c55d23cf14..5590edb674 100644 --- a/docs/authentication/social-connections/twitch.mdx +++ b/docs/authentication/social-connections/twitch.mdx @@ -1,40 +1,76 @@ --- title: Add Twitch as a social connection -description: Learn how to set up social connection with Twitch. +description: Learn how to allow users to sign up and sign in to your Clerk app with their Twitch account with OAuth. --- -How to set up social connection with Twitch + + - Use Twitch to authenticate users with OAuth + -## Overview +Enabling OAuth with [Twitch](https://dev.twitch.tv/docs/api/reference#oauth-client-credentials-flow) allows your users to sign up and sign in to your Clerk application with their Twitch account. -Adding social connection with Twitch 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. +You must have Two-Factor Authentication (2FA) enabled on your Twitch account to setup OAuth. To enable 2FA: -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. +1. In the top-right of the [Twitch Developer console](https://dev.twitch.tv/console), select your avatar and select **Account Settings**. +1. Select the **Security & Privacy** tab. +1. Under **Security**, select **Set Up Two-Factor Authentication**. +1. Select **Enable 2FA**. A modal will open. +1. Enter your phone number and select **Continue**. +1. Enter the code sent to your phone and select **Continue**. +1. If you want to use an authenticator app, follow the instructions on the screen. Otherwise, select **Skip & Use SMS**. +1. Select **Done**. -For production instances, you will need to generate your own Client ID and Client secret using your Twitch account. +## Configure for your development instance -> [!NOTE] -> The purpose of this guide is to help you create a Twitch account and a Twitch 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). +For _development instances_, Clerk uses preconfigured shared OAuth credentials and redirect URIs—no other configuration is needed. -## Before you start +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 **Twitch**. +1. Select **Add connection**. -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). -- You need to have a Twitch account. To create one, [click here](https://www.twitch.tv/). +## Configure for your production instance -## Configuring Twitch social connection +For _production instances_, you must provide custom credentials. -First, you need to register a new OAuth Twitch app at the [Twitch Developers Console](https://dev.twitch.tv/console). +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Twitch Developer Console](https://dev.twitch.tv/console). -![Twitch Developers Console](/docs/images/authentication-providers/twitch/60b259e594ef1713f40f59cd433880811915915b-1912x511.png) + + ### Enable Twitch as a social connection in Clerk -![Creating an OAuth Twitch app](/docs/images/authentication-providers/twitch/b23861d81906f6e2feedd314c520dc3b0d744d70-1891x757.png) + 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 **Twitch**. + 1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. + 1. Save the **OAuth Redirect URL** somewhere secure. Keep the modal and page open. -Set a name and a category for your new application. You also need to add the **OAuth Redirect URLs.** + ### Create a Twitch Developer app -In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. Select the **Add connection** button, and select **For all users**. In the **Choose provider** dropdown, select **Twitch**. Toggle on **Use custom credentials** and copy **Redirect URI**. Paste the value into the **OAuth Redirect URLs** input and click create. + 1. In the left sidebar of the [Twitch Developer Console](https://dev.twitch.tv/console), select **Applications**. + 1. Select **Register Your Application**. You'll be redirected to the [**Register Your Application**](https://dev.twitch.tv/console/apps/create) page. + 1. Complete the required fields. Under **OAuth Redirect URLs**, paste the **OAuth Redirect URL** you saved from the Clerk Dashboard. + 1. Select **Create**. You'll be redirected to the **Developer Applications** page where you can see your new application listed. + 1. Select **Manage** next to the application you created. You'll be redirected to your app's settings page. + 1. Select **New Secret**. Save the **Client Secret** and **Client ID** somewhere secure. -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. + ### Set the Client ID and Client Secret in the Clerk Dashboard -![Obtaining the Client ID and Client secret](/docs/images/authentication-providers/twitch/b13fd18936b6cfd4012784fbb044cd7a27afb5c1-1270x729.png) + -Finally, select **Add connection** so that the settings are applied. Congratulations! Social connection with Twitch is now configured for your instance. + ### Test your connection + + + diff --git a/docs/authentication/social-connections/x-twitter.mdx b/docs/authentication/social-connections/x-twitter.mdx index 4610f5a6d9..db4a32873e 100644 --- a/docs/authentication/social-connections/x-twitter.mdx +++ b/docs/authentication/social-connections/x-twitter.mdx @@ -1,43 +1,39 @@ --- title: Add X/Twitter v2 as a social connection -description: Learn how to set up a social connection with X/Twitter v2 in your Clerk application. +description: Learn how to allow users to sign up and sign in to your Clerk app with their X/Twitter account using OAuth. --- - - Create an X/Twitter application - - Enable X/Twitter as a social connection - - Set Clerk's **Redirect URI** in your X/Twitter application - - Set X/Twitter's **Client ID** and **Client Secret** in the Clerk Dashboard + - Use X/Twitter v2 to authenticate users with OAuth -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. +Enabling OAuth with [X/Twitter](https://developer.twitter.com/en/docs/x/overview) allows your users to sign up and sign in to your Clerk app with their X/Twitter account. -> [!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. +Clerk doesn't currently support preconfigured shared OAuth credentials for X/Twitter on development instances. You must 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. - - ## Create an X/Twitter application +## Configure for your production instance - If you don't have an existing X/Twitter application you've set up for social connection, you need to register a new one at the [X/Twitter Developer Portal](https://developer.twitter.com/en/portal/dashboard). Note that the process requires approval from X/Twitter before your new application can be used. +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [X/Twitter Developer Portal](https://developer.twitter.com/en/portal/dashboard). - To create a new X/Twitter application: +> [!WARNING] +> X/Twitter v2 doesn't currently provide users' email addresses. Users must manually enter their email address when they return to your application after authenticating with X/Twitter. - 1. Navigate to the X/Twitter Developer Portal and go to [**Projects & Apps**](https://developer.twitter.com/en/portal/projects-and-apps). - 1. Select **+ Add App**. After entering a name, you will be presented with your app's credentials. However, for setting up the X/Twitter v2 social connection with Clerk, **you won't need these credentials**. This is because you will be utilizing the OAuth 2.0 flow, which relies on different authentication details. +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [X/Twitter Developer Portal](https://developer.twitter.com/en/portal/dashboard). + ## Enable X/Twitter as a social connection To enable X/Twitter as a social connection for your Clerk application: @@ -45,33 +41,29 @@ Clerk does not currently support preconfigured shared OAuth credentials for X/Tw 1. In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. 1. Select the **Add connection** button, and select **For all users**. 1. In the **Choose provider** dropdown, select **X/Twitter**. - 1. Toggle on **Use custom credentials** and copy **Redirect URI**. Keep this modal and page open. - - ## Set the Redirect URI in your X/Twitter application + 1. Save the **Redirect URI** somewhere secure. Keep the modal and page open. - 1. Navigate back to the X/Twitter Developer portal. - 1. On the application settings screen, scroll down to the **User authentication settings** section and select **Set up**. You'll be presented with the **User authentication settings** page. - 1. Under **App permissions**, you can choose the permissions you want to request from the user. For this tutorial, select the **Read** permission. - 1. Under **Type of App**, select **Web App, Automated App or Bot**. - 1. Under **App info**, in the **Callback URI / Redirect URL** input, paste the **Redirect URI** value you copied from the Clerk Dashboard. - 1. Fill any other required fields, such as the **Website URL**, and select **Save**. + ## Create an X/Twitter application - ## Set the Client ID and Client Secret in the Clerk Dashboard + When signing up for a new X/Twitter Developer account, you'll be required to describe your app's use cases. After completing this step, you'll be redirected to the **Dashboard** page. Under **Projects**, you'll see an automatically generated app with a randomly generated string as its name. - After setting up your X/Twitter application, you should be able to copy your **Client ID** and **Client Secret**. + If you want to create a new X/Twitter application, follow these steps: - Go back to the Clerk Dashboard, where the modal should still be open, and paste these values into the respective fields. + 1. In the X/Twitter Developer Portal, under [**Projects**](https://developer.twitter.com/en/portal/projects-and-apps), select **Add App**. You'll be redirected to the **App name** tab. If you have a **Free** account, you can only have one app at a time, so you'll need to delete the existing app before being able to create a new one. + 1. Enter your application name and select **Next**. You'll be redirected to the **Keys & Tokens** tab where your app's credentials are displayed. However, these credentials aren't needed to set up the X/Twitter social connection with Clerk, as the setup uses the OAuth 2.0 flow, which relies on different credentials. + 1. Select **App settings**. You'll be redirected to your app's **Settings** tab. + 1. Under **User authentication settings**, next to **User authentication not set up**, select **Set up**. You'll be redirected to the **User authentication settings** page. + 1. Under **App permissions**, choose the permissions you want to request from your user. At minimum, select the **Read** permission. + 1. Under **Type of App**, select **Web App, Automated App or Bot**. + 1. Under **App info**, in the **Callback URI / Redirect URL** field, paste the **Callback URI / Redirect URL** value you copied from the Clerk Dashboard. + 1. Complete any other required fields, such as the **Website URL**. + 1. Select **Save**. You'll be redirected to a page that shows your app's **Client ID** and **Client Secret**. Save these values somewhere secure. - > [!NOTE] - > If the modal or page is not still open, in the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. Next to **X/Twitter**, select the settings icon. Under **Use custom credentials**, you can paste the **Client ID** and **Client Secret** into their respective fields. + ## Set the Client ID and Client Secret in the Clerk Dashboard - ## 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. + ## Test your connection - 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](https://your-domain.accounts.dev/sign-in) - - For production – [https://accounts.your-domain.com/sign-in](https://accounts.your-domain.com/sign-in) - 1. On the sign-in page, you should see **X/Twitter** as an option. Use it to sign in with your X/Twitter account. + diff --git a/docs/authentication/social-connections/xero.mdx b/docs/authentication/social-connections/xero.mdx index 1a4f3fd0e1..e4c0da35fe 100644 --- a/docs/authentication/social-connections/xero.mdx +++ b/docs/authentication/social-connections/xero.mdx @@ -1,36 +1,64 @@ --- title: Add Xero as a social connection -description: Learn how to set up social connection with Xero. +description: Learn how to allow users to sign up and sign in to your Clerk app with their Xero account using OAuth. --- -How to set up social connection with Xero + + - Use Xero to authenticate users with OAuth + -## Overview +Enabling OAuth with Xero allows your users to sign up and sign in to your Clerk app with their Xero account. -Adding social connection with Xero 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 Xero 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 **Xero**. +1. Select **Add connection**. -> [!NOTE] -> The purpose of this guide is to help you create a Xero developer account and a Xero 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. -- You need to create a Clerk Application in the [Clerk Dashboard](https://dashboard.clerk.com/). For more information, see the [setup guide](/docs/quickstarts/setup-clerk). -- You need to have a Xero developer account. To create one, [click here](https://developer.xero.com/). +To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [Xero Developer](https://developer.xero.com) page. -## Configuring Xero social connection + + ### Enable Xero as a social connection -First, you need to create a new OAuth2 Xero app. Click New App and fill all the required information such as the App Name, your company URL, the redirect URL, choose Web App as integration type, and then click **Create app**. + 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 **Xero**. + 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 this modal and page open. -![Creating a new application](/docs/images/authentication-providers/xero/creating-new-application.jpg) + ### Create a Xero app -In the Clerk Dashboard, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page. Select the **Add connection** button, and select **For all users**. In the **Choose provider** dropdown, select **Xero**. Toggle on **Use custom credentials** and copy **Redirect URI**. Make sure the value matches the **Redirect URIs**, as shown below. + 1. In the top-right of the [Xero Developer](https://developer.xero.com/app/manage/) home page, select **New app**. The **Add a new app** modal will open. + 1. Fill out the necessary information. In the **Redirect URI** field, paste the **Redirect URI** value you saved from the Clerk Dashboard. + 1. Select **Create app**. You'll be redirected to the app's **App details** page. + 1. In the left sidebar, select **Configuration**. + 1. Select **Generate a secret**. Save the **Client ID** and **Client Secret** somewhere secure. -![Copying values from the Xero dashboard](/docs/images/authentication-providers/xero/copying-values-from-xero-dashboard.jpg) + ### Set the Client ID and Client Secret in the 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. + -Finally, select **Add connection** so that the settings are applied. Congratulations! Social connection with Xero is now configured for your instance. + ### Test your connection + + + diff --git a/docs/backend-requests/handling/nodejs.mdx b/docs/backend-requests/handling/nodejs.mdx index 4c1e504b8c..4f6a9b9ad4 100644 --- a/docs/backend-requests/handling/nodejs.mdx +++ b/docs/backend-requests/handling/nodejs.mdx @@ -195,10 +195,32 @@ These options can be used with both [`ClerkExpressWithAuth`](#clerk-express-with - `string` The URL to redirect to when the user is not authenticated. + + --- + + - `isSatellite` + - `boolean | (url: URL) => boolean` + + When using Clerk's satellite feature, this should be enabled for secondary domains. + + --- + + - `domain` + - `string | (url: URL) => boolean` + + The domain used for satellites to inform Clerk where this application is deployed. + + --- + + - `proxyUrl` + - `string` + + If using a proxy, specify the URL of the proxy. -{/* | `strict` | `boolean` | When set to `true`, the middleware will raise an error when an unauthenticated request is made. When set to `false`, the middleware will return an empty auth object. | */} +{/* + - `strict` + - `boolean` -\| `isSatellite` | `boolean \| (url: URL) => boolean` | When using Clerk's satellite feature, this should be enabled for secondary domains. | -\| `domain` | `string \| (url: URL) => boolean` | The domain used for satellites to inform Clerk where this application is deployed. | -\| `proxyUrl` | `string` | If using a proxy, specify the URL of the proxy. | + When set to `true`, the middleware will raise an error when an unauthenticated request is made. When set to `false`, the middleware will return an empty auth object. +*/} diff --git a/docs/components/organization/organization-list.mdx b/docs/components/organization/organization-list.mdx index d73107c689..5b6ea9ec5b 100644 --- a/docs/components/organization/organization-list.mdx +++ b/docs/components/organization/organization-list.mdx @@ -245,7 +245,7 @@ clerk.unmountOrganizationList(orgListDiv) ## Force organizations -If you would like to prohibit people from using their personal accounts and force them to be part of an organization, the `hidePersonal` property forces your user to join or create an organization in order to continue. For more information on how to hide Personal Accounts and force organizations, see the [dedicated guide](/docs/guides/force-organizations). +If you would like to prohibit people from using their personal accounts and force them to be part of an organization, the `hidePersonal` property forces your user to join or create an organization in order to continue. For more information on how to hide Personal Accounts and force organizations, see the [dedicated guide](/docs/organizations/force-organizations). ```tsx {{ filename: 'organization-portal.tsx' }} export default function OrganizationListPage() { diff --git a/docs/components/organization/organization-switcher.mdx b/docs/components/organization/organization-switcher.mdx index bd274f8e4c..4db64119d2 100644 --- a/docs/components/organization/organization-switcher.mdx +++ b/docs/components/organization/organization-switcher.mdx @@ -9,7 +9,7 @@ The `` component allows a user to switch between their a This component will show notifications to the user if they have organization [invitations](/docs/organizations/overview#organization-invitations) or [suggestions](/docs/organizations/overview#suggestions). Admins will be able to see notifications for [requests](/docs/organizations/overview#membership-requests) to join an organization. -If you would like to learn how to hide a user's personal account in order to enforce an organization-centric application, see the [dedicated guide](/docs/guides/force-organizations). +If you would like to learn how to hide a user's personal account in order to enforce an organization-centric application, see the [dedicated guide](/docs/organizations/force-organizations). ## `` properties diff --git a/docs/customization/user-profile.mdx b/docs/customization/user-profile.mdx index 1fc4d377b3..bbb923b9a0 100644 --- a/docs/customization/user-profile.mdx +++ b/docs/customization/user-profile.mdx @@ -48,7 +48,7 @@ To add a custom page to the `` component, use the `` component is rendered at `/user`, then the custom page will be accessed at `/user/{url}` when using [path routing](/docs/guides/routing). + The path segment that will be used to navigate to the custom page. For example, if the `` component is rendered at `/user`, then the custom page will be accessed at `/user/{url}` when using [path routing](/docs/how-clerk-works/routing). --- diff --git a/docs/deployments/overview.mdx b/docs/deployments/overview.mdx index 1fe1f00ecc..ba0d894ca8 100644 --- a/docs/deployments/overview.mdx +++ b/docs/deployments/overview.mdx @@ -59,6 +59,32 @@ When you set a root domain for your production deployment, Clerk's authenticatio To share sessions and authentication across two different domains with the same Clerk application, see the [Authentication across different domains guide](/docs/advanced-usage/satellite-domains). +## Configure `authorizedParties` for secure request authorization + +For enhanced security, it's highly recommended to explicitly set the `authorizedParties` option when authorizing requests. This option acts as an allowlist of origins to verify against, protecting your application from subdomain cookie leaking attacks. Without this setting, if an app on another subdomain of the same root domain as your Clerk app is compromised, that app could potentially generate valid sessions for your Clerk app. + +The `authorizedParties` value should include a list of domains allowed to make requests to your application. Omitting this setting can expose your application to [CSRF attacks](https://owasp.org/www-community/attacks/csrf). + +### Examples + +The following examples show how to set `authorizedParties` with different Clerk helpers. + +#### Set `authorizedParties` with `clerkMiddleware()` + +```typescript +clerkMiddleware({ + authorizedParties: ['https://example.com'], +}) +``` + +#### Set `authorizedParties` with `authenticateRequest()` + +```typescript +clerkClient.authenticateRequest(req, { + authorizedParties: ['https://example.com'], +}) +``` + ## Deploy certificates The Clerk Dashboard home page will tell you what steps are still required to deploy your production instance. Once you have completed all of the necessary steps, a **Deploy certificates** button will appear. Selecting this button will deploy your production instance. diff --git a/docs/guides/image-optimization/imageurl-image-optimization.mdx b/docs/guides/image-optimization.mdx similarity index 100% rename from docs/guides/image-optimization/imageurl-image-optimization.mdx rename to docs/guides/image-optimization.mdx diff --git a/docs/guides/architecture-scenarios.mdx b/docs/guides/multi-tenant-architecture.mdx similarity index 97% rename from docs/guides/architecture-scenarios.mdx rename to docs/guides/multi-tenant-architecture.mdx index 68cb423248..a942f3392d 100644 --- a/docs/guides/architecture-scenarios.mdx +++ b/docs/guides/multi-tenant-architecture.mdx @@ -1,6 +1,6 @@ --- -title: Architecture scenarios -description: This guide outlines a number of the common architecture scenarios for building applications with Clerk, their characteristics, and limitations. +title: Multi-tenant architecture +description: This guide outlines a number of the common architecture scenarios for building B2B, B2C, and Platform applications with Clerk, their characteristics, and limitations. --- There are several ways to model how users and organizations fit into your application. The 3 scenarios that will be covered in this guide are: diff --git a/docs/guides/overview.mdx b/docs/guides/overview.mdx index 89c0454610..d4d25500bc 100644 --- a/docs/guides/overview.mdx +++ b/docs/guides/overview.mdx @@ -3,4 +3,4 @@ title: Clerk guides description: Guides covering how to build or work with parts of Clerk --- -Clerk offers a variety of guides to help you build and work with Clerk. These guides cover a broad range of topics, from understanding key concepts like [routing](/docs/guides/routing) to practical code examples, such as [adding a custom onboarding flow to your sign-up process](/docs/guides/add-onboarding-flow). +Clerk offers a variety of guides to help you build and work with Clerk. These guides cover a broad range of topics, from understanding key concepts like [routing](/docs/how-clerk-works/routing) to practical code examples, such as [adding a custom onboarding flow to your sign-up process](/docs/references/nextjs/add-onboarding-flow). diff --git a/docs/guides/routing.mdx b/docs/how-clerk-works/routing.mdx similarity index 100% rename from docs/guides/routing.mdx rename to docs/how-clerk-works/routing.mdx diff --git a/docs/manifest.json b/docs/manifest.json index 464ffb2dac..ddee60a42e 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -109,72 +109,6 @@ ] ] }, - { - "title": "Guides", - "collapse": true, - "icon": "book", - "items": [ - [ - { - "title": "Overview", - "href": "/docs/guides/overview" - }, - { - "title": "Add custom onboarding to your authentication flow", - "href": "/docs/guides/add-onboarding-flow" - }, - { - "title": "Set up a waitlist", - "href": "/docs/guides/waitlist" - }, - { - "title": "Architecture scenarios", - "href": "/docs/guides/architecture-scenarios" - }, - { - "title": "Add reverification for sensitive actions", - "tag": "(Beta)", - "href": "/docs/guides/reverification" - }, - { - "title": "Routing in Clerk", - "href": "/docs/guides/routing" - }, - { - "title": "Custom redirects", - "href": "/docs/guides/custom-redirects" - }, - { - "title": "Transferring ownership of your app", - "href": "/docs/guides/transferring-your-app" - }, - { - "title": "Use image optimization to improve app performance", - "href": "/docs/guides/image-optimization/imageurl-image-optimization" - }, - { - "title": "Implement basic Role Based Access Control with metadata", - "href": "/docs/guides/basic-rbac" - }, - { - "title": "Hide Personal Accounts and force organizations", - "href": "/docs/guides/force-organizations" - }, - { - "title": "Migrating to Clerk from Auth.js", - "href": "/docs/guides/authjs-migration" - }, - { - "title": "Override Clerk interfaces with custom types", - "href": "/docs/guides/custom-types" - }, - { - "title": "Force multi-factor authentication (MFA) for all users", - "href": "/docs/guides/force-mfa" - } - ] - ] - }, { "title": "UI Components", "collapse": true, @@ -403,6 +337,10 @@ { "title": "Legal compliance", "href": "/docs/authentication/configuration/legal-compliance" + }, + { + "title": "Force multi-factor authentication (MFA) for all users", + "href": "/docs/authentication/configuration/force-mfa" } ] ] @@ -428,112 +366,108 @@ "href": "/docs/authentication/social-connections/custom-provider" }, { - "title": "Google", - "href": "/docs/authentication/social-connections/google" + "title": "Apple", + "href": "/docs/authentication/social-connections/apple" + }, + { + "title": "Atlassian", + "href": "/docs/authentication/social-connections/atlassian" + }, + { + "title": "Bitbucket", + "href": "/docs/authentication/social-connections/bitbucket" + }, + { + "title": "Box", + "href": "/docs/authentication/social-connections/box" + }, + { + "title": "Coinbase", + "href": "/docs/authentication/social-connections/coinbase" + }, + { + "title": "Discord", + "href": "/docs/authentication/social-connections/discord" + }, + { + "title": "Dropbox", + "href": "/docs/authentication/social-connections/dropbox" }, { "title": "Facebook", "href": "/docs/authentication/social-connections/facebook" }, + { + "title": "GitHub", + "href": "/docs/authentication/social-connections/github" + }, + { + "title": "GitLab", + "href": "/docs/authentication/social-connections/gitlab" + }, + { + "title": "Google", + "href": "/docs/authentication/social-connections/google" + }, + { + "title": "HubSpot", + "href": "/docs/authentication/social-connections/hubspot" + }, + { + "title": "Hugging Face", + "href": "/docs/authentication/social-connections/huggingface" + }, + { + "title": "Line", + "href": "/docs/authentication/social-connections/line" + }, + { + "title": "Linear", + "href": "/docs/authentication/social-connections/linear" + }, + { + "title": "LinkedIn", + "href": "/docs/authentication/social-connections/linkedin-oidc" + }, + { + "title": "LinkedIn (Deprecated)", + "href": "/docs/authentication/social-connections/linkedin" + }, { "title": "Microsoft", "href": "/docs/authentication/social-connections/microsoft" }, { - "title": "See all", - "collapse": true, - "items": [ - [ - { - "title": "Apple", - "href": "/docs/authentication/social-connections/apple" - }, - { - "title": "Atlassian", - "href": "/docs/authentication/social-connections/atlassian" - }, - { - "title": "Bitbucket", - "href": "/docs/authentication/social-connections/bitbucket" - }, - { - "title": "Box", - "href": "/docs/authentication/social-connections/box" - }, - { - "title": "Coinbase", - "href": "/docs/authentication/social-connections/coinbase" - }, - { - "title": "Discord", - "href": "/docs/authentication/social-connections/discord" - }, - { - "title": "Dropbox", - "href": "/docs/authentication/social-connections/dropbox" - }, - { - "title": "GitHub", - "href": "/docs/authentication/social-connections/github" - }, - { - "title": "GitLab", - "href": "/docs/authentication/social-connections/gitlab" - }, - { - "title": "HubSpot", - "href": "/docs/authentication/social-connections/hubspot" - }, - { - "title": "Hugging Face", - "href": "/docs/authentication/social-connections/huggingface" - }, - { - "title": "Line", - "href": "/docs/authentication/social-connections/line" - }, - { - "title": "Linear", - "href": "/docs/authentication/social-connections/linear" - }, - { - "title": "LinkedIn (Deprecated)", - "href": "/docs/authentication/social-connections/linkedin" - }, - { - "title": "LinkedIn", - "href": "/docs/authentication/social-connections/linkedin-oidc" - }, - { - "title": "Notion", - "href": "/docs/authentication/social-connections/notion" - }, - { - "title": "Slack", - "href": "/docs/authentication/social-connections/slack" - }, - { - "title": "Spotify", - "href": "/docs/authentication/social-connections/spotify" - }, - { - "title": "TikTok", - "href": "/docs/authentication/social-connections/tiktok" - }, - { - "title": "Twitter v1 (deprecated)", - "href": "/docs/authentication/social-connections/twitter" - }, - { - "title": "X/Twitter v2", - "href": "/docs/authentication/social-connections/x-twitter" - }, - { - "title": "Xero", - "href": "/docs/authentication/social-connections/xero" - } - ] - ] + "title": "Notion", + "href": "/docs/authentication/social-connections/notion" + }, + { + "title": "Slack", + "href": "/docs/authentication/social-connections/slack" + }, + { + "title": "Spotify", + "href": "/docs/authentication/social-connections/spotify" + }, + { + "title": "TikTok", + "href": "/docs/authentication/social-connections/tiktok" + }, + { + "title": "Twitch", + "href": "/docs/authentication/social-connections/twitch" + }, + { + "title": "Twitter v1 (Deprecated)", + "href": "/docs/authentication/social-connections/twitter" + }, + { + "title": "X/Twitter v2", + "href": "/docs/authentication/social-connections/x-twitter" + }, + { + "title": "Xero", + "href": "/docs/authentication/social-connections/xero" } ] ] @@ -723,6 +657,10 @@ { "title": "Create organizations on behalf of users", "href": "/docs/organizations/create-orgs-for-users" + }, + { + "title": "Hide personal accounts and force organizations", + "href": "/docs/organizations/force-organizations" } ] ] @@ -894,6 +832,10 @@ } ] ] + }, + { + "title": "Transfer ownership", + "href": "/docs/guides/transferring-your-app" } ] ] @@ -1065,6 +1007,10 @@ } ] ] + }, + { + "title": "Redirect URLs", + "href": "/docs/guides/custom-redirects" } ] ] @@ -1075,6 +1021,14 @@ "title": "Development", "items": [ [ + { + "title": "Multi-tenant architecture", + "href": "/docs/guides/multi-tenant-architecture" + }, + { + "title": "Override Clerk interfaces", + "href": "/docs/guides/custom-types" + }, { "title": "Testing", "collapse": true, @@ -1498,6 +1452,15 @@ } ] ] + }, + { + "title": "Reverification", + "tag": "(Beta)", + "href": "/docs/guides/reverification" + }, + { + "title": "Image Optimization", + "href": "/docs/guides/image-optimization" } ] ] @@ -1524,6 +1487,10 @@ { "title": "Tokens & signatures", "href": "/docs/how-clerk-works/tokens-signatures" + }, + { + "title": "Routing", + "href": "/docs/how-clerk-works/routing" } ] ] @@ -1823,16 +1790,32 @@ "href": "/docs/references/nextjs/read-session-data" }, { - "title": "Add custom sign up and sign in pages", + "title": "Add custom sign-up and sign-in pages", "href": "/docs/references/nextjs/custom-signup-signin-pages" }, { - "title": "Integrate Clerk into your app with tRPC", - "href": "/docs/references/nextjs/trpc" + "title": "Add custom onboarding", + "href": "/docs/references/nextjs/add-onboarding-flow" }, { - "title": "Next.js rendering modes and Clerk", + "title": "Set up a waitlist", + "href": "/docs/references/nextjs/waitlist" + }, + { + "title": "Role Based Access Control", + "href": "/docs/references/nextjs/basic-rbac" + }, + { + "title": "Rendering modes", "href": "/docs/references/nextjs/rendering-modes" + }, + { + "title": "Migrate from Auth.js", + "href": "/docs/references/nextjs/authjs-migration" + }, + { + "title": "tRPC", + "href": "/docs/references/nextjs/trpc" } ] ] @@ -2200,23 +2183,23 @@ "href": "/docs/references/javascript/types/overview" }, { - "title": "ClerkAPIError", + "title": "`ClerkAPIError`", "href": "/docs/references/javascript/types/clerk-api-error" }, { - "title": "ClerkPaginatedResponse", + "title": "`ClerkPaginatedResponse`", "href": "/docs/references/javascript/types/clerk-paginated-response" }, { - "title": "CustomPage", + "title": "`CustomPage`", "href": "/docs/references/javascript/types/custom-page" }, { - "title": "EmailLinkError", + "title": "`EmailLinkError`", "href": "/docs/references/javascript/types/email-link-error" }, { - "title": "DeletedObject", + "title": "`DeletedObject`", "href": "/docs/references/javascript/types/deleted-object" }, { @@ -2228,51 +2211,51 @@ "href": "/docs/references/javascript/types/oauth" }, { - "title": "PasskeyResource", + "title": "`PasskeyResource`", "href": "/docs/references/javascript/types/passkey-resource" }, { - "title": "PublicUserData", + "title": "`PublicUserData`", "href": "/docs/references/javascript/types/public-user-data" }, { - "title": "SessionStatus", + "title": "`SessionStatus`", "href": "/docs/references/javascript/types/session-status" }, { - "title": "SessionVerification", + "title": "`SessionVerification`", "href": "/docs/references/javascript/types/session-verification" }, { - "title": "SignInFirstFactor", + "title": "`SignInFirstFactor`", "href": "/docs/references/javascript/types/sign-in-first-factor" }, { - "title": "SignInSecondFactor", + "title": "`SignInSecondFactor`", "href": "/docs/references/javascript/types/sign-in-second-factor" }, { - "title": "SignInRedirectOptions", + "title": "`SignInRedirectOptions`", "href": "/docs/references/javascript/types/sign-in-redirect-options" }, { - "title": "SignUpRedirectOptions", + "title": "`SignUpRedirectOptions`", "href": "/docs/references/javascript/types/sign-up-redirect-options" }, { - "title": "SignInInitialValues", + "title": "`SignInInitialValues`", "href": "/docs/references/javascript/types/sign-in-initial-values" }, { - "title": "SignUpInitialValues", + "title": "`SignUpInitialValues`", "href": "/docs/references/javascript/types/sign-up-initial-values" }, { - "title": "RedirectOptions", + "title": "`RedirectOptions`", "href": "/docs/references/javascript/types/redirect-options" }, { - "title": "Verification", + "title": "`Verification`", "href": "/docs/references/javascript/types/verification" } ] diff --git a/docs/organizations/create-orgs-for-users.mdx b/docs/organizations/create-orgs-for-users.mdx index f66fe1c439..2d5406a8e7 100644 --- a/docs/organizations/create-orgs-for-users.mdx +++ b/docs/organizations/create-orgs-for-users.mdx @@ -13,7 +13,7 @@ If this aligns with your use case, this guide will walk you through architecting ## Recommended: require users to create orgs during onboarding -The recommended approach is to implement an [onboarding flow](/docs/guides/add-onboarding-flow) in which it's required to create an organization before the user is able to access the app. You can use tools like the [`` component](/docs/components/organization/create-organization) to allow the user to create and name their own organization, or you can use the [Backend API](/docs/reference/backend-api/tag/Organizations#operation/CreateOrganization){{ target: '_blank' }} or a backend SDK, such as the [JS Backend SDK](/docs/references/backend/organization/create-organization), to create an organization on the user's behalf. +The recommended approach is to implement an [onboarding flow](/docs/references/nextjs/add-onboarding-flow) in which it's required to create an organization before the user is able to access the app. You can use tools like the [`` component](/docs/components/organization/create-organization) to allow the user to create and name their own organization, or you can use the [Backend API](/docs/reference/backend-api/tag/Organizations#operation/CreateOrganization){{ target: '_blank' }} or a backend SDK, such as the [JS Backend SDK](/docs/references/backend/organization/create-organization), to create an organization on the user's behalf. If you'd like to have the onboarding flow include inviting users via email, use the [invitation feature](/docs/users/invitations). The flow would look like this: diff --git a/docs/guides/force-organizations.mdx b/docs/organizations/force-organizations.mdx similarity index 100% rename from docs/guides/force-organizations.mdx rename to docs/organizations/force-organizations.mdx diff --git a/docs/organizations/org-slugs-in-urls.mdx b/docs/organizations/org-slugs-in-urls.mdx index fefae307f5..a6e76c4160 100644 --- a/docs/organizations/org-slugs-in-urls.mdx +++ b/docs/organizations/org-slugs-in-urls.mdx @@ -134,7 +134,7 @@ This guide shows you how to add organization slugs to your app's URLs, configure ## Configure `clerkMiddleware()` to set the active organization > [!TIP] - > If your app doesn't use `clerkMiddleware()`, or you prefer to manually set the active organization, use the [`setActive()`](/docs/references/javascript/clerk/session-methods) method to control the active organization on the client-side. See [this guide](/docs/guides/force-organizations#set-an-active-organization-based-on-the-url) to learn how to manually activate a specific organization based on the URL. + > If your app doesn't use `clerkMiddleware()`, or you prefer to manually set the active organization, use the [`setActive()`](/docs/references/javascript/clerk/session-methods) method to control the active organization on the client-side. See [this guide](/docs/organizations/force-organizations#set-an-active-organization-based-on-the-url) to learn how to manually activate a specific organization based on the URL. With [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware), you can use the [`organizationSyncOptions`](/docs/references/nextjs/clerk-middleware#organization-sync-options) property to declare URL patterns that determine whether a specific organization or user's personal account should be activated. diff --git a/docs/organizations/overview.mdx b/docs/organizations/overview.mdx index b750105d26..7688852310 100644 --- a/docs/organizations/overview.mdx +++ b/docs/organizations/overview.mdx @@ -76,7 +76,7 @@ The easiest way to allow users to set an organization as active is to use the [` You can also use the `setActive()` method, which is available on the [`Clerk`](/docs/references/javascript/clerk/session-methods#set-active) object and is returned by the [`useOrganizationList()`](/docs/references/react/use-organization-list) hook. -If you would like to hide personal workspaces and require users to always have an organization set as active, see the [Force organizations](/docs/guides/force-organizations) guide. +If you would like to hide personal workspaces and require users to always have an organization set as active, see the [Force organizations](/docs/organizations/force-organizations) guide. ## Create an organization diff --git a/docs/organizations/verify-user-permissions.mdx b/docs/organizations/verify-user-permissions.mdx index 58241c1453..98738cd6b2 100644 --- a/docs/organizations/verify-user-permissions.mdx +++ b/docs/organizations/verify-user-permissions.mdx @@ -4,7 +4,7 @@ description: A collection of utility functions and components in order to allow --- > [!IMPORTANT] -> The following authorization checks are predicated on a user having an active organization. Without this, they will likely always evaluate to false by default. Learn more about [active organizations](/docs/organizations/overview#active-organization). If you would like to perform authorization checks without using Clerk's organizations feature, see [the Role Based Access Control (RBAC) guide](/docs/guides/basic-rbac). +> The following authorization checks are predicated on a user having an active organization. Without this, they will likely always evaluate to false by default. Learn more about [active organizations](/docs/organizations/overview#active-organization). If you would like to perform authorization checks without using Clerk's organizations feature, see [the Role Based Access Control (RBAC) guide](/docs/references/nextjs/basic-rbac). In general, you should always verify whether or not a user is authorized to access sensitive information, important content, or exclusive features. The most secure way to implement authorization is by checking the active user's [role or permissions](/docs/organizations/roles-permissions#permissions). diff --git a/docs/quickstarts/nuxt.mdx b/docs/quickstarts/nuxt.mdx index e6b63c257b..20b9492807 100644 --- a/docs/quickstarts/nuxt.mdx +++ b/docs/quickstarts/nuxt.mdx @@ -9,7 +9,6 @@ description: Add authentication and user management to your Nuxt app with Clerk. { title: "Nuxt Quickstart Repo", link: "https://github.com/clerk/clerk-nuxt-quickstart", - icon: "clerk" } ]} beforeYouStart={[ diff --git a/docs/references/backend/invitations/create-invitation.mdx b/docs/references/backend/invitations/create-invitation.mdx index 32f8d30385..19158fb6f2 100644 --- a/docs/references/backend/invitations/create-invitation.mdx +++ b/docs/references/backend/invitations/create-invitation.mdx @@ -26,7 +26,7 @@ function createInvitation(params: CreateParams): Promise - `redirectUrl?` - `string` - The URL to redirect the user to when they visit the invitation link. + The URL where the user is redirected upon visiting the invitation link, where they can accept the invitation. Required if you have implemented a [custom flow for handling application invitations](/docs/custom-flows/invitations). --- diff --git a/docs/references/backend/types/backend-organization-membership.mdx b/docs/references/backend/types/backend-organization-membership.mdx index d18d84bbd2..484f2162af 100644 --- a/docs/references/backend/types/backend-organization-membership.mdx +++ b/docs/references/backend/types/backend-organization-membership.mdx @@ -90,7 +90,7 @@ The Backend `OrganizationMembership` object is similar to the [`OrganizationMemb - `imageUrl` - `string` - Holds the default avatar or user's uploaded profile image. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization/imageurl-image-optimization). + Holds the default avatar or user's uploaded profile image. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization). --- diff --git a/docs/references/backend/types/backend-organization.mdx b/docs/references/backend/types/backend-organization.mdx index 1cbb6b6e94..6ec72510fd 100644 --- a/docs/references/backend/types/backend-organization.mdx +++ b/docs/references/backend/types/backend-organization.mdx @@ -53,7 +53,7 @@ The Backend `Organization` object is similar to the [`Organization`](/docs/refer - `imageUrl` - `string` - Holds the organization's logo. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization/imageurl-image-optimization). + Holds the organization's logo. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization). --- diff --git a/docs/references/backend/types/backend-session.mdx b/docs/references/backend/types/backend-session.mdx index b353539a0d..b43da2c721 100644 --- a/docs/references/backend/types/backend-session.mdx +++ b/docs/references/backend/types/backend-session.mdx @@ -43,6 +43,27 @@ The Backend `Session` object is similar to the [`Session`](/docs/references/java --- + - `lastActiveOrganizationId` + - `string | undefined` + + The last active organization identifier + + --- + + - `actor` + - `ActJWTClaim | null` + + The last active organization identifier + + --- + + - `latestActivity` + - `SessionActivity` + + An object that provides additional information about this session, focused around user activity data. + + --- + - `expireAt` - `number` diff --git a/docs/references/javascript/organization/organization.mdx b/docs/references/javascript/organization/organization.mdx index 24b8b112aa..18775dc614 100644 --- a/docs/references/javascript/organization/organization.mdx +++ b/docs/references/javascript/organization/organization.mdx @@ -37,7 +37,7 @@ The following examples assume: - `imageUrl` - `string` - Holds the organization logo or default logo. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization/imageurl-image-optimization). + Holds the organization logo or default logo. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization). --- diff --git a/docs/references/javascript/types/public-user-data.mdx b/docs/references/javascript/types/public-user-data.mdx index 1fdc27940c..113dad4345 100644 --- a/docs/references/javascript/types/public-user-data.mdx +++ b/docs/references/javascript/types/public-user-data.mdx @@ -25,7 +25,7 @@ Information about the user that's publicly available. - `imageUrl` - `string` - Holds the default avatar or user's uploaded profile image. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization/imageurl-image-optimization). + Holds the default avatar or user's uploaded profile image. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization). --- diff --git a/docs/references/javascript/user/user.mdx b/docs/references/javascript/user/user.mdx index f687aee1e7..b0701d48df 100644 --- a/docs/references/javascript/user/user.mdx +++ b/docs/references/javascript/user/user.mdx @@ -59,7 +59,7 @@ The ClerkJS SDK provides some helper [methods](#methods) on the `User` object to - `imageUrl` - `string` - Holds the default avatar or user's uploaded profile image. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization/imageurl-image-optimization). + Holds the default avatar or user's uploaded profile image. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization). --- diff --git a/docs/guides/add-onboarding-flow.mdx b/docs/references/nextjs/add-onboarding-flow.mdx similarity index 100% rename from docs/guides/add-onboarding-flow.mdx rename to docs/references/nextjs/add-onboarding-flow.mdx diff --git a/docs/guides/authjs-migration.mdx b/docs/references/nextjs/authjs-migration.mdx similarity index 100% rename from docs/guides/authjs-migration.mdx rename to docs/references/nextjs/authjs-migration.mdx diff --git a/docs/guides/basic-rbac.mdx b/docs/references/nextjs/basic-rbac.mdx similarity index 100% rename from docs/guides/basic-rbac.mdx rename to docs/references/nextjs/basic-rbac.mdx diff --git a/docs/guides/waitlist.mdx b/docs/references/nextjs/waitlist.mdx similarity index 100% rename from docs/guides/waitlist.mdx rename to docs/references/nextjs/waitlist.mdx diff --git a/docs/references/react/use-auth.mdx b/docs/references/react/use-auth.mdx index f63c648a5f..1110dc5b95 100644 --- a/docs/references/react/use-auth.mdx +++ b/docs/references/react/use-auth.mdx @@ -62,6 +62,8 @@ The `useAuth()` hook provides access to the current user's authentication state A function that signs out the current user. Returns a promise that resolves when complete. See the [reference doc](/docs/references/javascript/clerk/clerk#sign-out). + --- + - `getToken()` - `(options?: GetTokenOptions) => Promise` diff --git a/docs/references/sdk/backend-only.mdx b/docs/references/sdk/backend-only.mdx index e8c13906bf..c61b15e72a 100644 --- a/docs/references/sdk/backend-only.mdx +++ b/docs/references/sdk/backend-only.mdx @@ -80,7 +80,9 @@ You can manually create a wrapper library around the [BAPI OpenAPI](https://cler return async (context, next) => { const clerkClient = options.clerkClient || defaultClerkClient - const requestState = await clerkClient.authenticateRequest(context.req) + const requestState = await clerkClient.authenticateRequest(context.req, { + authorizedParties: ['https://example.com'], + }) context.set('clerkAuth', requestState.toAuth()) context.set('clerk', clerkClient) diff --git a/docs/references/sdk/fullstack.mdx b/docs/references/sdk/fullstack.mdx index de63c85293..be5f16f5a0 100644 --- a/docs/references/sdk/fullstack.mdx +++ b/docs/references/sdk/fullstack.mdx @@ -42,7 +42,9 @@ In addition to these instructions, you'll need to go through the following steps return async (context, next) => { const clerkClient = options.clerkClient || defaultClerkClient - const requestState = await clerkClient.authenticateRequest(context.req) + const requestState = await clerkClient.authenticateRequest(context.req, { + authorizedParties: ['https://example.com'], + }) if (requestState.headers) { // This adds observability headers to the res diff --git a/docs/upgrade-guides/core-2/chrome-extension.mdx b/docs/upgrade-guides/core-2/chrome-extension.mdx index d45ab27cfc..ba4a5d536c 100644 --- a/docs/upgrade-guides/core-2/chrome-extension.mdx +++ b/docs/upgrade-guides/core-2/chrome-extension.mdx @@ -173,7 +173,7 @@ If you would like to have your JWT return all of the user's organizations, you c ### Path routing is now the default -On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` can be set to `'hash' | 'path' | 'virtual'` and describes the routing strategy that should be used. `path` defines where the component is mounted when `routing="path"` is used. [Learn more about Clerk routing](/docs/guides/routing). +On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` can be set to `'hash' | 'path' | 'virtual'` and describes the routing strategy that should be used. `path` defines where the component is mounted when `routing="path"` is used. [Learn more about Clerk routing](/docs/how-clerk-works/routing). In Core 2, the **default** `routing` strategy has become `'path'`. Unless you change the `routing` prop, you'll need to define the `path` prop. The affected components are: diff --git a/docs/upgrade-guides/core-2/expo.mdx b/docs/upgrade-guides/core-2/expo.mdx index 7ef78da4f5..5dd30c55d5 100644 --- a/docs/upgrade-guides/core-2/expo.mdx +++ b/docs/upgrade-guides/core-2/expo.mdx @@ -153,7 +153,7 @@ If you would like to have your JWT return all of the user's organizations, you c ### Path routing is now the default -On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` can be set to `'hash' | 'path' | 'virtual'` and describes the routing strategy that should be used. `path` defines where the component is mounted when `routing="path"` is used. [Learn more about Clerk routing](/docs/guides/routing). +On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` can be set to `'hash' | 'path' | 'virtual'` and describes the routing strategy that should be used. `path` defines where the component is mounted when `routing="path"` is used. [Learn more about Clerk routing](/docs/how-clerk-works/routing). In Core 2, the **default** `routing` strategy has become `'path'`. Unless you change the `routing` prop, you'll need to define the `path` prop. The affected components are: diff --git a/docs/upgrade-guides/core-2/javascript.mdx b/docs/upgrade-guides/core-2/javascript.mdx index ca4a6aa485..4d58b324ed 100644 --- a/docs/upgrade-guides/core-2/javascript.mdx +++ b/docs/upgrade-guides/core-2/javascript.mdx @@ -162,7 +162,7 @@ If you would like to have your JWT return all of the user's organizations, you c ### Path routing is now the default -On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` can be set to `'hash' | 'path' | 'virtual'` and describes the routing strategy that should be used. `path` defines where the component is mounted when `routing="path"` is used. [Learn more about Clerk routing](/docs/guides/routing). +On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` can be set to `'hash' | 'path' | 'virtual'` and describes the routing strategy that should be used. `path` defines where the component is mounted when `routing="path"` is used. [Learn more about Clerk routing](/docs/how-clerk-works/routing). In Core 2, the **default** `routing` strategy has become `'path'`. Unless you change the `routing` prop, you'll need to define the `path` prop. The affected components are: diff --git a/docs/upgrade-guides/core-2/nextjs.mdx b/docs/upgrade-guides/core-2/nextjs.mdx index f666a62f43..0833a4d7c4 100644 --- a/docs/upgrade-guides/core-2/nextjs.mdx +++ b/docs/upgrade-guides/core-2/nextjs.mdx @@ -550,7 +550,7 @@ If you would like to have your JWT return all of the user's organizations, you c ### Path routing is now the default -On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` describes the routing strategy that should be used and can be set to `'hash' | 'path' | 'virtual'`. `path` defines where the component is mounted when `routing='path'` is used. [Learn more about Clerk routing](/docs/guides/routing). +On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` describes the routing strategy that should be used and can be set to `'hash' | 'path' | 'virtual'`. `path` defines where the component is mounted when `routing='path'` is used. [Learn more about Clerk routing](/docs/how-clerk-works/routing). In Core 2, the **default** `routing` strategy has become `'path'` for the Next.js SDK. Of course, you can still use `routing='hash'` or `routing='virtual'`. diff --git a/docs/upgrade-guides/core-2/react.mdx b/docs/upgrade-guides/core-2/react.mdx index 7ae6d2ed9d..b9c7786efc 100644 --- a/docs/upgrade-guides/core-2/react.mdx +++ b/docs/upgrade-guides/core-2/react.mdx @@ -190,7 +190,7 @@ If you would like to have your JWT return all of the user's organizations, you c ### Path routing is now the default -On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` can be set to `'hash' | 'path' | 'virtual'` and describes the routing strategy that should be used. `path` defines where the component is mounted when `routing="path"` is used. [Learn more about Clerk routing](/docs/guides/routing). +On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` can be set to `'hash' | 'path' | 'virtual'` and describes the routing strategy that should be used. `path` defines where the component is mounted when `routing="path"` is used. [Learn more about Clerk routing](/docs/how-clerk-works/routing). In Core 2, the **default** `routing` strategy has become `'path'`. Unless you change the `routing` prop, you'll need to define the `path` prop. The affected components are: diff --git a/docs/upgrade-guides/core-2/remix.mdx b/docs/upgrade-guides/core-2/remix.mdx index 71748c6d73..97f0f14728 100644 --- a/docs/upgrade-guides/core-2/remix.mdx +++ b/docs/upgrade-guides/core-2/remix.mdx @@ -196,7 +196,7 @@ If you would like to have your JWT return all of the user's organizations, you c ### Path routing is now the default -On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` describes the routing strategy that should be used and can be set to `'hash' | 'path' | 'virtual'`. `path` defines where the component is mounted when `routing='path'` is used. [Learn more about Clerk routing](/docs/guides/routing). +On components like [``](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` describes the routing strategy that should be used and can be set to `'hash' | 'path' | 'virtual'`. `path` defines where the component is mounted when `routing='path'` is used. [Learn more about Clerk routing](/docs/how-clerk-works/routing). In Core 2, the **default** `routing` strategy has become `'path'` for the Remix SDK. Of course, you can still use `routing='hash'` or `routing='virtual'`. diff --git a/docs/users/metadata.mdx b/docs/users/metadata.mdx index 211bce1488..a5e244047f 100644 --- a/docs/users/metadata.mdx +++ b/docs/users/metadata.mdx @@ -287,7 +287,7 @@ On the backend, it's available on the [Backend `User`](/docs/references/backend/ Unsafe metadata can be both read and set from the frontend and the backend. It's called "unsafe" metadata because it can be modified directly from the frontend, which means malicious users could potentially tamper with these values. -Unsafe metadata is the only metadata property that can be set during sign-up, so a common use case is to use it in [custom onboarding flows](/docs/guides/add-onboarding-flow). Custom data collected during the onboarding (sign-up) flow can be stored in the [`SignUp`](/docs/references/javascript/sign-up/sign-up) object. After a successful sign-up, `SignUp.unsafeMetadata` is copied to the `User` object as `User.unsafeMetadata`. From that point on, the unsafe metadata is accessible as a direct attribute of the `User` object. +Unsafe metadata is the only metadata property that can be set during sign-up, so a common use case is to use it in [custom onboarding flows](/docs/references/nextjs/add-onboarding-flow). Custom data collected during the onboarding (sign-up) flow can be stored in the [`SignUp`](/docs/references/javascript/sign-up/sign-up) object. After a successful sign-up, `SignUp.unsafeMetadata` is copied to the `User` object as `User.unsafeMetadata`. From that point on, the unsafe metadata is accessible as a direct attribute of the `User` object. ### Set unsafe metadata diff --git a/docs/webhooks/overview.mdx b/docs/webhooks/overview.mdx index c05d79305b..a2c4cd3455 100644 --- a/docs/webhooks/overview.mdx +++ b/docs/webhooks/overview.mdx @@ -7,7 +7,7 @@ A webhook is an _event-driven_ method of communication between applications. Unlike typical APIs where you would need to poll for data very frequently to get it "real-time", webhooks only send data when there is an event to trigger the webhook. This makes webhooks seem "real-time", but it's important to note that they are asynchronous. -For example, if you are onboarding a new user, you can't rely on the webhook delivery as part of that flow. Typically the delivery will happen quickly, but it's not guaranteed to be delivered immediately or at all. Webhooks are best used for things like sending a notification or updating a database, but not for synchronous flows where you need to know the webhook was delivered before moving on to the next step. If you need a synchronous flow, see the [onboarding guide](/docs/guides/add-onboarding-flow) for an example. +For example, if you are onboarding a new user, you can't rely on the webhook delivery as part of that flow. Typically the delivery will happen quickly, but it's not guaranteed to be delivered immediately or at all. Webhooks are best used for things like sending a notification or updating a database, but not for synchronous flows where you need to know the webhook was delivered before moving on to the next step. If you need a synchronous flow, see the [onboarding guide](/docs/references/nextjs/add-onboarding-flow) for an example. ## Clerk webhooks diff --git a/public/images/authentication-providers/atlassian/04fa49b7d9ba58c0faf2c2b97f85b5ea17a9ebe6-3456x1730.png b/public/images/authentication-providers/atlassian/04fa49b7d9ba58c0faf2c2b97f85b5ea17a9ebe6-3456x1730.png deleted file mode 100644 index 6d6a85d0b2..0000000000 Binary files a/public/images/authentication-providers/atlassian/04fa49b7d9ba58c0faf2c2b97f85b5ea17a9ebe6-3456x1730.png and /dev/null differ diff --git a/public/images/authentication-providers/atlassian/07c724b9a66773c94c169cc2a199a549c45d8fdd-3456x1730.png b/public/images/authentication-providers/atlassian/07c724b9a66773c94c169cc2a199a549c45d8fdd-3456x1730.png deleted file mode 100644 index 0fa5771261..0000000000 Binary files a/public/images/authentication-providers/atlassian/07c724b9a66773c94c169cc2a199a549c45d8fdd-3456x1730.png and /dev/null differ diff --git a/public/images/authentication-providers/atlassian/37ec3daaa6d6eaa060ad7fecb112ae6d1ef46597-3456x1844.png b/public/images/authentication-providers/atlassian/37ec3daaa6d6eaa060ad7fecb112ae6d1ef46597-3456x1844.png deleted file mode 100644 index 884f1841a0..0000000000 Binary files a/public/images/authentication-providers/atlassian/37ec3daaa6d6eaa060ad7fecb112ae6d1ef46597-3456x1844.png and /dev/null differ diff --git a/public/images/authentication-providers/atlassian/3d60a54bb48c03257afbf769f1f50cf45f18871c-3456x1730.png b/public/images/authentication-providers/atlassian/3d60a54bb48c03257afbf769f1f50cf45f18871c-3456x1730.png deleted file mode 100644 index 112b753589..0000000000 Binary files a/public/images/authentication-providers/atlassian/3d60a54bb48c03257afbf769f1f50cf45f18871c-3456x1730.png and /dev/null differ diff --git a/public/images/authentication-providers/atlassian/597e9bdc5a6b521bcbf8223c04a1102683bf9231-3456x1730.png b/public/images/authentication-providers/atlassian/597e9bdc5a6b521bcbf8223c04a1102683bf9231-3456x1730.png deleted file mode 100644 index 0b759e6647..0000000000 Binary files a/public/images/authentication-providers/atlassian/597e9bdc5a6b521bcbf8223c04a1102683bf9231-3456x1730.png and /dev/null differ diff --git a/public/images/authentication-providers/atlassian/6ef7100945fb68a379b35a5c295a76405a2cf10e-1156x1354.png b/public/images/authentication-providers/atlassian/6ef7100945fb68a379b35a5c295a76405a2cf10e-1156x1354.png deleted file mode 100644 index e437122b82..0000000000 Binary files a/public/images/authentication-providers/atlassian/6ef7100945fb68a379b35a5c295a76405a2cf10e-1156x1354.png and /dev/null differ diff --git a/public/images/authentication-providers/atlassian/83d5498c454f5ba0b92a76c4a1942e9a07cde48d-3456x1730.png b/public/images/authentication-providers/atlassian/83d5498c454f5ba0b92a76c4a1942e9a07cde48d-3456x1730.png deleted file mode 100644 index 2909950b82..0000000000 Binary files a/public/images/authentication-providers/atlassian/83d5498c454f5ba0b92a76c4a1942e9a07cde48d-3456x1730.png and /dev/null differ diff --git a/public/images/authentication-providers/atlassian/a6dc9bd0902359cad9c94de1bdcbd4c9112bff1d-3456x1730.png b/public/images/authentication-providers/atlassian/a6dc9bd0902359cad9c94de1bdcbd4c9112bff1d-3456x1730.png deleted file mode 100644 index 80373e82d3..0000000000 Binary files a/public/images/authentication-providers/atlassian/a6dc9bd0902359cad9c94de1bdcbd4c9112bff1d-3456x1730.png and /dev/null differ diff --git a/public/images/authentication-providers/atlassian/b2762ea10eebe6f05f39aa9ed33c54ca41bc2f3d-3456x1730.png b/public/images/authentication-providers/atlassian/b2762ea10eebe6f05f39aa9ed33c54ca41bc2f3d-3456x1730.png deleted file mode 100644 index 66d8aa4910..0000000000 Binary files a/public/images/authentication-providers/atlassian/b2762ea10eebe6f05f39aa9ed33c54ca41bc2f3d-3456x1730.png and /dev/null differ diff --git a/public/images/authentication-providers/atlassian/fdc89459cdc6450c4dbde713e7b840d93b01c862-3456x1730.png b/public/images/authentication-providers/atlassian/fdc89459cdc6450c4dbde713e7b840d93b01c862-3456x1730.png deleted file mode 100644 index 5e676ecd03..0000000000 Binary files a/public/images/authentication-providers/atlassian/fdc89459cdc6450c4dbde713e7b840d93b01c862-3456x1730.png and /dev/null differ diff --git a/public/images/authentication-providers/bitbucket/005f4b20222a0641a443f750e24d26fd088324db-3360x1896.png b/public/images/authentication-providers/bitbucket/005f4b20222a0641a443f750e24d26fd088324db-3360x1896.png deleted file mode 100644 index 20581a106c..0000000000 Binary files a/public/images/authentication-providers/bitbucket/005f4b20222a0641a443f750e24d26fd088324db-3360x1896.png and /dev/null differ diff --git a/public/images/authentication-providers/bitbucket/3c3f5f49188f740839a9e0f348ffe4d34a5300c3-3360x1782.png b/public/images/authentication-providers/bitbucket/3c3f5f49188f740839a9e0f348ffe4d34a5300c3-3360x1782.png deleted file mode 100644 index 1fe780da79..0000000000 Binary files a/public/images/authentication-providers/bitbucket/3c3f5f49188f740839a9e0f348ffe4d34a5300c3-3360x1782.png and /dev/null differ diff --git a/public/images/authentication-providers/bitbucket/65aee792cbde8564897d5f1110caf090789bf532-1304x942.png b/public/images/authentication-providers/bitbucket/65aee792cbde8564897d5f1110caf090789bf532-1304x942.png deleted file mode 100644 index 6b183e9106..0000000000 Binary files a/public/images/authentication-providers/bitbucket/65aee792cbde8564897d5f1110caf090789bf532-1304x942.png and /dev/null differ diff --git a/public/images/authentication-providers/bitbucket/b072d3a9f269a46468e651646d08522aa253fdaf-3360x1782.png b/public/images/authentication-providers/bitbucket/b072d3a9f269a46468e651646d08522aa253fdaf-3360x1782.png deleted file mode 100644 index d1b9e57af9..0000000000 Binary files a/public/images/authentication-providers/bitbucket/b072d3a9f269a46468e651646d08522aa253fdaf-3360x1782.png and /dev/null differ diff --git a/public/images/authentication-providers/bitbucket/c29fd970821d0746e7637f69bf8f411695638834-1220x784.png b/public/images/authentication-providers/bitbucket/c29fd970821d0746e7637f69bf8f411695638834-1220x784.png deleted file mode 100644 index f6b66f1644..0000000000 Binary files a/public/images/authentication-providers/bitbucket/c29fd970821d0746e7637f69bf8f411695638834-1220x784.png and /dev/null differ diff --git a/public/images/authentication-providers/dropbox/copying-values-from-dropbox-dashboard.jpg b/public/images/authentication-providers/dropbox/copying-values-from-dropbox-dashboard.jpg deleted file mode 100644 index 9c23ddfe7c..0000000000 Binary files a/public/images/authentication-providers/dropbox/copying-values-from-dropbox-dashboard.jpg and /dev/null differ diff --git a/public/images/authentication-providers/dropbox/creating-new-application.jpg b/public/images/authentication-providers/dropbox/creating-new-application.jpg deleted file mode 100644 index b9c0e12ca2..0000000000 Binary files a/public/images/authentication-providers/dropbox/creating-new-application.jpg and /dev/null differ diff --git a/public/images/authentication-providers/facebook/33456604106d3478e0fd6b583bdde7c4f5563641-1467x969.png b/public/images/authentication-providers/facebook/33456604106d3478e0fd6b583bdde7c4f5563641-1467x969.png deleted file mode 100644 index ae8547259c..0000000000 Binary files a/public/images/authentication-providers/facebook/33456604106d3478e0fd6b583bdde7c4f5563641-1467x969.png and /dev/null differ diff --git a/public/images/authentication-providers/facebook/473ca20025e0f1fa7bae18d07ee6e990e171bb42-1391x969.png b/public/images/authentication-providers/facebook/473ca20025e0f1fa7bae18d07ee6e990e171bb42-1391x969.png deleted file mode 100644 index f8b248c552..0000000000 Binary files a/public/images/authentication-providers/facebook/473ca20025e0f1fa7bae18d07ee6e990e171bb42-1391x969.png and /dev/null differ diff --git a/public/images/authentication-providers/facebook/98c66e38465c348c45718d32b4404b5fcb291896-1467x969.png b/public/images/authentication-providers/facebook/98c66e38465c348c45718d32b4404b5fcb291896-1467x969.png deleted file mode 100644 index fafbfad277..0000000000 Binary files a/public/images/authentication-providers/facebook/98c66e38465c348c45718d32b4404b5fcb291896-1467x969.png and /dev/null differ diff --git a/public/images/authentication-providers/facebook/c0be80ce8fed2b4d14d04fcbf56318b80295093d-1467x989.png b/public/images/authentication-providers/facebook/c0be80ce8fed2b4d14d04fcbf56318b80295093d-1467x989.png deleted file mode 100644 index 5fcba9a876..0000000000 Binary files a/public/images/authentication-providers/facebook/c0be80ce8fed2b4d14d04fcbf56318b80295093d-1467x989.png and /dev/null differ diff --git a/public/images/authentication-providers/hubspot/02d8bf249b4a6debe85e66ea53b5f88817acdba0-1489x995.png b/public/images/authentication-providers/hubspot/02d8bf249b4a6debe85e66ea53b5f88817acdba0-1489x995.png deleted file mode 100644 index bed3406753..0000000000 Binary files a/public/images/authentication-providers/hubspot/02d8bf249b4a6debe85e66ea53b5f88817acdba0-1489x995.png and /dev/null differ diff --git a/public/images/authentication-providers/line/creating-new-provider.jpg b/public/images/authentication-providers/line/creating-new-provider.jpg deleted file mode 100644 index 646dc76d59..0000000000 Binary files a/public/images/authentication-providers/line/creating-new-provider.jpg and /dev/null differ diff --git a/public/images/authentication-providers/line/pasting-value-into-line-dashboard.jpg b/public/images/authentication-providers/line/pasting-value-into-line-dashboard.jpg deleted file mode 100644 index 09f805352d..0000000000 Binary files a/public/images/authentication-providers/line/pasting-value-into-line-dashboard.jpg and /dev/null differ diff --git a/public/images/authentication-providers/notion/configuring-integration.jpg b/public/images/authentication-providers/notion/configuring-integration.jpg deleted file mode 100644 index 7994628590..0000000000 Binary files a/public/images/authentication-providers/notion/configuring-integration.jpg and /dev/null differ diff --git a/public/images/authentication-providers/notion/copying-values-from-notion-dashboard.jpg b/public/images/authentication-providers/notion/copying-values-from-notion-dashboard.jpg deleted file mode 100644 index 0fa687cd57..0000000000 Binary files a/public/images/authentication-providers/notion/copying-values-from-notion-dashboard.jpg and /dev/null differ diff --git a/public/images/authentication-providers/notion/creating-a-new-integration.jpg b/public/images/authentication-providers/notion/creating-a-new-integration.jpg deleted file mode 100644 index d24632f9b5..0000000000 Binary files a/public/images/authentication-providers/notion/creating-a-new-integration.jpg and /dev/null differ diff --git a/public/images/authentication-providers/xero/copying-values-from-xero-dashboard.jpg b/public/images/authentication-providers/xero/copying-values-from-xero-dashboard.jpg deleted file mode 100644 index 6e035c7e2c..0000000000 Binary files a/public/images/authentication-providers/xero/copying-values-from-xero-dashboard.jpg and /dev/null differ diff --git a/public/images/authentication-providers/xero/creating-new-application.jpg b/public/images/authentication-providers/xero/creating-new-application.jpg deleted file mode 100644 index 01d997753a..0000000000 Binary files a/public/images/authentication-providers/xero/creating-new-application.jpg and /dev/null differ diff --git a/styleguides/SSO.STYLEGUIDE.MD b/styleguides/SSO.STYLEGUIDE.MD index 24bd4998dd..d7f7061968 100644 --- a/styleguides/SSO.STYLEGUIDE.MD +++ b/styleguides/SSO.STYLEGUIDE.MD @@ -29,26 +29,40 @@ These are the guidelines we use to write our SSO guides. ## 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 account. + For _production instances_, you must provide custom credentials. To make the setup process easier, it's recommended to keep two browser tabs open: one for the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [](SSO_PROVIDER_URL). ``` - Use `` to lay out the steps -- The `Test your OAuth` section should be included in the `` and formatted as follows: +- For the "Set the Client ID and Client Secret in the Clerk Dashboard" step, it can be formatted in one of two ways: - ```mdx - ## Test your OAuth + 1. With a partial. Use this method if the provider uses "Client ID" and "Client Secret" for their terminology. + + ```mdx + ### Set the Client ID and Client Secret in the Clerk Dashboard + + + ``` + + 1. With a full step. Use this method if the provider uses a different terminology, such as "Key" instead of "Client ID". Note how the title of the section and the copy of the first step depends on the terminology. - 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. + ```mdx + ### Set the Key and Client Secret in the Clerk Dashboard - 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: + 1. Navigate back to the Clerk Dashboard where the modal should still be open. Paste the **Key** and **Client Secret** values that you saved into the respective fields. + 1. Select **Add connection**. - - **For development** – `https://your-domain.accounts.dev/sign-in` - - **For production** – `https://accounts.your-domain.com/sign-in` + > [!NOTE] + > If the modal or page is no longer open, navigate to the [**SSO connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page in the Clerk Dashboard. Select the connection. Under **Use custom credentials**, paste the values into their respective fields. + ``` + +- The `Test your connection` section should be included in the `` and formatted as follows: + + ```mdx + ### Test your connection - 1. Sign in with your account. + ``` ## No screenshots: writing copy that references the UI