(/authentication/social-connections/tiktok) update guide

docs/authentication/social-connections/oauth.mdx

@@ -99,10 +99,10 @@ export async function GET() {
 
   const clerkResponse = await clerkClient().users.getUserOauthAccessToken(userId, provider)
 
-  const accessToken = clerkResponse[0].token || '';
-  
+  const accessToken = clerkResponse[0].token || ''
+
   if (!accessToken) {
-      return NextResponse.json({ message: 'Access token not found' }, { status: 401 })
+    return NextResponse.json({ message: 'Access token not found' }, { status: 401 })
   }
 
   // Fetch the user data from the Notion API

docs/authentication/social-connections/tiktok.mdx

@@ -1,47 +1,84 @@
 ---
 title: Add TikTok as a social connection
-description: Learn how to set up social connection with TikTok.
+description: Learn how to allow users to sign up and sign in to your Clerk app with their TikTok account using OAuth.
 ---
 
-How to set up social connection with TikTok
+<TutorialHero
+  beforeYouStart={[
+    {
+      title: "A Clerk app is required.",
+      link: "/docs/quickstarts/setup-clerk",
+      icon: "clerk",
+    },
+    {
+      title: "A TikTok Developer account is required.",
+      link: "https://developers.tiktok.com",
+      icon: "user-circle",
+    }
+  ]}
+>
+  - Use TikTok ID to authenticate users with OAuth.
+</TutorialHero>
 
-## Overview
+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.
 
-Adding social connection with TikTok to your app with Clerk is done in a few steps - you only need to set the **Client ID**, **Client Secret** and **Authorized redirect URI** in your instance settings.
+## Configure for your development instance
 
-To make the development flow as smooth as possible, Clerk uses  preconfigured shared OAuth credentials and redirect URIs for development instances - no other configuration is needed.
+Due to TikTok's requirement to verify URL ownership for all redirect URLs, **TikTok cannot be used with shared credentials in development environments.** This is because individual users can't verify ownership of the Clerk development URL (`accounts.dev`).
 
-For production instances, you will need to create your own developer account with **TikTok** and generate your own Client ID and Client secret.
+However, TikTok can still be used in development environments if you create a sandbox app and configure custom credentials. In this case, there is no need to verify redirect URLs in the [sandbox environment](https://developers.tiktok.com/blog/introducing-sandbox). Instead, you can invite users who are allowed to sign in.
 
-> [!NOTE]
-> The purpose of this guide is to help you set up a TikTok developer account  and a TikTok 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).
+It is recommended to test this integration in a staging or preview environment, as shared credentials require URL verification to function properly.
 
-## Before you start
+## Configure for your production instance
 
-- You need to create a Clerk Application in your [Clerk Dashboard](https://dashboard.clerk.com/). For more information, check out our [Set up your application guide](/docs/quickstarts/setup-clerk).
-- You need to have a TikTok Developer account. To create one, visit the [TikTok for developers](https://developers.tiktok.com/) page and click on Login ➜ Sign Up
+To make the setup process easier, it's recommended to keep two browser tabs open: one for your [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) and one for your [TikTok Developer Portal](https://developers.tiktok.com/).
 
-## Configuring TikTok social connection
+<Steps>
+  ### Enable TikTok as a social connection in Clerk
 
-First, you need to create a new TikTok app. Go to the [TikTok for developers](https://developers.tiktok.com/) page, login with your developer account and create a new app by clicking on the **My Apps** ➜ **Connect a new app** and following the on screen wizard.
+  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 **TikTok**.
+  1. Ensure that both **Enable for sign-up and sign-in** and **Use custom credentials** are toggled on. Keep the modal and page open.
 
-![Creating a new TikTok app](/docs/images/authentication-providers/tiktok/9a5749a9bf3f282c54af2a2b539ba372e4706574-1489x964.png)
+  ### Create your app in TikTok
 
-Add an icon and a name for your new project and hit **Start**.
+  > [!TIP]
+  > If you're creating an app as an organization rather than as an individual developer, you must first [create an organization](https://developers.tiktok.com/organizations). For guidance on which option to choose, refer to [TikTok's guide on working with organizations](https://developers.tiktok.com/doc/working-with-organizations/)**.**
 
-You'll get redirected to the app creation form. Notice that you need to fill the **Callback URL** and **Redirect domain** fields.
+  1. On a separate page, go to the [TikTok Developer Portal](https://developers.tiktok.com/) and sign in.
+  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. Under **Platforms**, select your platform then paste your app URL.
+  1. Select the **Verify URL properties** under any of the URL fields to verify your app URL. A modal will open.
+  1. Select **Verify properties**. For 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](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.
 
-Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections). In the top navigation, select **Configure**. Then in the sidebar, select **SSO Connections**. Select the **Add connection** button, and select **For all users**. In the **Choose provider** dropdown, select **TikTok**. Toggle on **Use custom credentials** and copy **Authorized redirect URI**.
+  > [!NOTE]
+  > Your app needs to be reviewed by TikTok before the registration completes. This process may take a few days.
 
-![Filling in the Callback URL and Redirect Domain fields](/docs/images/authentication-providers/tiktok/135491407e1afeea187644e4450fb77bb659d907-1489x964.png)
+  ### Set the Client ID and Client Secret in your Clerk Dashboard
 
-Go back to the TikTok panel, paste the value into the **Callback URL** field. Copy the `clerk.[your-domain].com` part of the URL and paste it in the **Redirect domain** field. Hit **Apply** to compete the registration.
+  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 your Clerk Dashboard where the modal should still be open and paste these values into the respective fields.
+  1. Select **Add connection**.
 
-> [!NOTE]
-> Your app needs to be reviewed by TikTok before the registration completes. Note that this might take a couple of days.
+  > [!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.
 
-Once your app is approved, simply copy the **Client Key** and **Client Secret** from the TikTok panel, go back to the Clerk dashboard, open the **Manage credentials** modal for the TikTok provider, and paste them into the respective fields.
+  ### Test your OAuth
 
-![Obtaining the Client Key and Client Secret](/docs/images/authentication-providers/tiktok/12885db4568578459fb4b9beab31838c929cf9d5-1382x833.png)
+  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.
 
-Finally, select **Add connection** so that the settings are applied. Congratulations! Social connection with TikTok is now configured for your instance.
+  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 TikTok account.
+</Steps>