TikTok OAuth Provider

Descope allows you to create custom Social Login (OAuth) providers within the Authentication Methods page. This allows you to add any Social OAuth authentication within your application. This guide specifically covers the step by step configuration of a custom TikTok OAuth provider.

Creating the TikTok Application

Before creating the custom OAuth provider within the Descope console, you must create and configure an application within your TikTok developer account.

You can follow the TikTok App Guide for details on creating your application. While creating your app within TikTok, you must configure the redirect URI and what APIs you will be using.

The configured redirect URI should be https://api.descope.com/v1/oauth/callback for a US project, https://api.euc1.descope.com/v1/oauth/callback for a EU project - unless you have a customized domain. If you have a customized domain, you will use your CNAME as configured within Project Settings. Example: auth.example.com would utilize the redirect URI of https://auth.example.com/v1/oauth/callback.

Creating Descope Custom Provider

Within the Customize Authentication Methods page, click the blue + Add custom provider in the top right corner. You can then give the provider the name of your choice, for this example, we will set the Provider Name to TikTok. You can configure the logo which will be shown on the Social Auth button in your flow by selecting the edit button on the logo. You can also configure the Provider Description.

Configure Account Settings

Within the account settings section of your provider, you will configure the following items:

Client ID: This is the Client key of the application created within TikTok. TikTok uses a non standard format, so will need to use custom parameter keys in the connection settings.
Client Secret: This is the Client secret of the application created within TikTok
Scopes: These are the configured scopes granted to Descope for the user within TikTok. Scopes provides users using third-party apps the confidence that only the information they choose to share will be shared. The minimum needed scope for Descope to be able to capture the user's email and basic account details from TikTok is user.info.basic.

Configure Connection Settings

Within the account settings section of your provider, you will configure the following items:

Authorization Endpoint: The endpoint to request authorization from the user. For TikTok, this endpoint is https://www.tiktok.com/v2/auth/authorize/.
Add an authorization parameter key client_key and paste the value from the account setting's Client key.
Token Endpoint: The endpoint to exchange the authorization code for an access token. For TikTok this endpoint is https://open.tiktokapis.com/v2/oauth/token/.
Add a token parameter key client_key and paste the value from the account setting's Client key.
User Info Endpoint: The endpoint to get user details for attribute mapping. For TikTok, this endpoint is https://open.tiktokapis.com/v2/user/info/?fields=union_id,display_name,avatar_url. To query more fields, append the field name to this url. Read more about scopes and fields.

Configure User Attribute Mapping

Given the user.info.basic scope, Descope can capture any items from the user info endpoint response. Per the below example, we have mapped the following:

data.user.union_id -> Login ID (mandatory)
data.user.display_name -> Display Name (optional)
data.user.avatar_url -> Picture (optional)

Configure Advanced Settings

There are a few advanced options that can be configured within the custom provider in descope.

Optionally, you can choose to Manage tokens from provider if you want Descope to store the provider's access token in an encrypted state for later use.
Optionally, you can configure the Callback Domain which is only applicable if you have more than one CNAME associated with your application. If you have only one CNAME configured, it will default to your customized CNAME. Example: auth.example.com
Optionally, you can configure the Redirect URL which is the location to send the user upon successful OAuth authentication. If redirect URL is specified in the SDK/API call, it will override this value.
Optionally, you can choose Merge user accounts based on returned email address from provider, when selected, if an email is returned from this provider, it will automatically qualify as a login ID of the user; if the user already has an account with that email - the two accounts will be merged into one.

Utilize within Descope Flow

We will now cover how to utilize the custom provider within a flow.

Within your Descope flow, update your login screen, adding the TikTok button.

If your flow does not currently have the Sign Up or In / OAuth action, click on the blue + symbol in the top left, add a Sign Up or In / OAuth action.

Connect the Flow Actions

Now that you have configured the Sign Up or In action, connect the action to the Socials section of the login screen then to the next applicable step within your flow. Note that TikTok does not store whether the email has been verified. It is suggested to check if the email is verified via a condition, then verify the email for the user.

Test your Flow

You can now test your flow within your application, the flow builder via clicking run, or within Descope Explorer.

Utilize within Descope SDK

When utilizing your TikTok custom provider within the Descope SDKs, you will pass the provider as TikTok which is the name of the provider which you configured. Note that this is case sensitive to how you configured here.

Was this helpful?

On this page