Skip to main content
TikTok for DevelopersTikTok for Developers

Docs

Login Kit for Web

Overview

This guide details how to enable authentication from your web app to TikTok. After successfully completing authentication with TikTok, developers should be able to obtain an access_token for the TikTok user.

Prerequisites

Please obtain a client key and secret from the developer portal on https://developers.tiktok.com under "Manage apps".

Integration Guide

1. Implement Frontend Code

Get started by connecting your frontend login button to the server endpoint. Example below in HTML.

<a href='{SERVER_ENDPOINT_OAUTH}'>Continue with TikTok</a>

2. Implement Server Code to Handle Authorization Grant Flow

The server code will need to be responsible for the following:

  • Ensuring that the client secret and refresh token are stored securely.
  • Ensuring that the security for each user is protected by preventing request forgery attacks.
  • Handling the refresh flow before access token expiry.
  • Managing the access token request flow for each user.

2.1 Redirect Request to TikTok's Authorization Server

Create an anti-forgery state token

You must prevent request forgery attacks to protect the security of your users. The first step before making the redirect request to TikTok's authorization server is to create a unique session token to maintain the state between the request and callback.

You later match this unique session token with the authentication response to verify that the user is making the request and not a malicious attacker.

One of the simple approaches to a state token is a random generated alphanumeric string constructed using a random-number generator.

const csrfState = Math.random().toString(36).substring(2);

Initial Redirect to TikTok's Authorization Page

To make the initial redirect request to TikTok's authorization server, the following query parameters below need to be added to the Authorization Page URL.

Parameter

Type

Description

client_key

string

The unique identification key provisioned to the partner.

scope

string

A comma separated (,) string of authorization scope(s). These scope(s) are assigned to your application on developer portal. They handle what content your application can and cannot access. If a scope is toggleable, the user can deny access to one scope while granting access to others.

redirect_uri

string

The redirect URI that you requested for your application.

state

string

The state is used to maintain the state of your request and callback. This value will be included when redirecting the user back to the client. Please do check if the state returned in callback matches what you sent earlier to prevent cross-site request forgery.

response_type

string

Value should always be set as code.


Redirect your users to the authorization page URL and supply the necessary query parameters. It's important to note that the page can only be accessed through HTTPS.

Type

Description

URL

https://www.tiktok.com/auth/authorize/

Query Parameters

client_key=<client_key>&response_type=code&scope=<scope>&redirect_uri=<redirect_uri>&state=<state>


Example using Node, Express, JavaScript:

const express = require('express');
const app = express();
const fetch = require('node-fetch');
const cookieParser = require('cookie-parser');
const cors = require('cors');

app.use(cookieParser());
app.use(cors());
app.listen(process.env.PORT || 5000).

const CLIENT_KEY = 'abc' // this value can be found in app's developer portal

app.get('/oauth', (req, res) => {
    const csrfState = Math.random().toString(36).substring(2);
    res.cookie('csrfState', csrfState, { maxAge: 60000 });

    let url = 'https://www.tiktok.com/auth/authorize/';

    url += '?client_key={CLIENT_KEY}';
    url += '&scope=user.info.basic,video.list';
    url += '&response_type=code';
    url += '&redirect_uri={SERVER_ENDPOINT_REDIRECT}';
    url += '&state=' + csrfState;

    res.redirect(url);
})

2.2 TikTok Prompts User to Login or Signup

The authorization page takes the user to TikTok website if the user is not logged in. We prompt them to login or signup for TikTok.

2.3 TikTok Prompts User for Consent

After logging in or signing up, an authorization page asks the user for consent to allow your application to access your requested permissions.

2.4 Manage Authorization Response

If the user authorizes access, the user will be redirected to the redirect_uri with the following query parameters appended:

Parameter

Type

Description

code

string

Authorization code that is used in getting an access token.

scopes

string

A comma separated (,) string of authorization scope(s), which the user has granted.

state

string

A unique, non-guessable string when making the initial authorization request. This value allows you to prevent CSRF attacks by confirming that the value coming from the response matches the one you sent.

error

string

If this field is set, it means that the current user is not eligible for using third-party login/authorization. The partner is responsible for handling the error gracefully.

2.5 Manage Access Token

Using the code appended to your redirect_uri, you can obtain an access_token for the user, which completes the Login with TikTok flow.

See Manage User Access Tokens for related endpoints.