Configure TikTok OAuth for Keyloom authentication - setup, scopes, and short-form video platform integration.

TikTok Provider

Enable TikTok OAuth authentication in your Keyloom application for short-form video platform integration.

Prerequisites

TikTok for Developers account and app created at TikTok for Developers
App approved for Login Kit
Keyloom handler configured at /api/auth/[...keyloom]

Setup

1. Create TikTok Developer Account

Go to TikTok for Developers
Sign up for a developer account
Complete the verification process

2. Create TikTok Application

In the TikTok Developer Portal, click "Manage Apps"
Click "Create an App"
Fill in required information:
- App Name: Your application name
- App Description: Detailed description of your app
- Category: Choose appropriate category
- Platform: Select "Web"
Submit for review

Once your app is approved, go to "Products" section
Add "Login Kit" to your app
Configure redirect URI: ${YOUR_APP_URL}/api/auth/oauth/tiktok/callback
Set up scopes (see Available Scopes below)

4. Get Credentials

From your TikTok app settings:

Client Key: Your TikTok app's Client Key
Client Secret: Your TikTok app's Client Secret

5. Environment Variables

.env.local

TIKTOK_CLIENT_ID=your_tiktok_client_key
TIKTOK_CLIENT_SECRET=your_tiktok_client_secret

6. Configure Provider

keyloom.config.ts

import { defineKeyloom } from "@keyloom/core";
import { tiktok } from "@keyloom/providers";

export default defineKeyloom({
  providers: [
    tiktok({
      clientId: process.env.TIKTOK_CLIENT_ID!,
      clientSecret: process.env.TIKTOK_CLIENT_SECRET!,
    }),
  ],
  // ... other config
});

Configuration Options

tiktok({
  clientId: string;
  clientSecret: string;
  profileOverrides?: (profile: Profile) => Record<string, any>;
})

Available Scopes

TikTok Login Kit provides the following scopes:

Basic Scopes

user.info.basic - Access to basic user information (display name, avatar)
user.info.profile - Access to user profile information
user.info.stats - Access to user statistics (follower count, etc.)

Video Scopes

video.list - Access to user's video list
video.upload - Upload videos on behalf of user

Default Scope: user.info.basic

Note: TikTok has strict approval processes for different scopes. Basic user information is typically approved, while video-related scopes require detailed justification.

User Profile

TikTok returns the following user information:

{
  id: string;           // TikTok user's open_id
  name: string | null;  // Display name
  email: null;          // Email not provided by TikTok Login Kit
  image: string | null; // Avatar URL
  // Raw TikTok data available in profile
}

Important: TikTok Login Kit does not provide email addresses for privacy reasons.

Usage Example

components/TikTokSignIn.tsx

import { useLogin } from "@keyloom/react";

export function TikTokSignIn() {
  const { login, loading } = useLogin();

  const handleTikTokLogin = async () => {
    await login({
      provider: "tiktok",
      callbackUrl: "/dashboard",
    });
  };

  return (
    <button onClick={handleTikTokLogin} disabled={loading}>
      {loading ? "Connecting..." : "Sign in with TikTok"}
    </button>
  );
}