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 Spotify 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 TikTik
. 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 theClient 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 theClient secret
of the application created within TikTokScopes
: 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 Spotify isuser.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 ishttps://www.tiktok.com/v2/auth/authorize/
.- Add an authorization parameter key
client_key
and paste the value from the account setting'sClient key
. Token Endpoint
: The endpoint to exchange the authorization code for an access token. For TikTok this endpoint ishttps://open.tiktokapis.com/v2/oauth/token/
.- Add a token parameter key
client_key
and paste the value from the account setting'sClient key
. User Info Endpoint
: The endpoint to get user details for attribute mapping. For TikTok, this endpoint ishttps://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.
Update the Login screen
Within your Descope flow, update your login screen, adding the TikTok button.
Add OAuth Sign Up or In Action
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 Spotify 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.