Provider – TikTok

TikTok Sample

Table of contents

How to enable TikTok login in WordPress

1. Create a TikTok App

To be able to log in via TikTok you must create a TikTok app first.

  1. Navigate to https://developers.tiktok.com/
  2. Log in to your TikTok developer account or register one if you don’t have any!
  3. On the top right corner click on Manage apps then click on the Connect an app option.
  4. Find the Configuration section and upload an image as App icon, then enter an App name, a Description and choose a value for Category.
  5. For Platform you should enable the Configure for Web option then enter the URL of your website into the Website URL field.
  6. Click on the Save changes button.
  7. Click on +Add products on the left hand menu then add the Login Kit product, and press the Done button.
  8. At the left hand menu click on the Login Kit option under Products.
  9. Enter your Terms of Service and Privacy Policy URLs.
  10. Enter your domain name into the Redirect domain field. (The domain name shouldn’t contain the https/http protocol or the path!).
  11. Scroll up and click on the Save changes button.
  12. Currently your App is in Staging status, meaning that you don’t have access to the credentials which are necessary for the TikTok integration. In order to gain access, click on the Submit for review on the top right corner.
  13. A modal will appear where you should enter a text, that describes what you are going to do with the App. In this particular case, you will use it to offer TikTok login option for your visitors.
  14. Press the Submit button.
  15. Wait until your App gets approved. This can take a couple of days. If you scroll up to the top of the page you will be able to inspect the Status below the App details section. If you want to learn more about the App review process, you can find more information in the official documentation.
  16. Once the Status says Live in production, you will be able to reveal the Client Key and Client Secret by clicking on the eye icon next to these fields. You will need these credentials for the provider configuration.

2. App setup

Once your TikTok app is ready you’ll need to copy and paste the Client Key and Client Secret to the TikTok provider’s Settings tab.

3. Verifying

Once your Client Key and Client Secret has been added you need to verify the setup first. This verification helps you identify possible problems with the app.

Settings

TikTok Settings

Client Key

The Client Key of your TikTok app. You can find it at under your App’s App info section.

API Secret

The Client Secret of your TikTok app. You can find it at under your App’s App info section.

TikTok Other Settings

Username prefix on Register

Whenever a new user registers with their TikTok account they can get a custom prefix so you can easily identify them.

Fallback username prefix on register

Whenever a new user registers with their TikTok account and we can not generate a valid username from the first name or last name, a random username will be generated. With this option they can get a custom prefix so you can easily identify them.

Terms and conditions

This option can only be seen, if Terms and conditions is set to Show in Global Settings → Privacy tab. Here you can set custom Terms and Conditions for users who register with TikTok. For more information please read our GDPR documentation.

Profile image size

The avatar will be stored with the selected size.

Sync data

By default Nextend Social Login stores the first name, last name, email, avatar url and access token if it is possible, however some additional information can also be retrieved and stored.
When an option is checked, that field will be stored in a meta key with the specified name.

TikTok Sync Data

Sync fields

It determines when the synchronization shall happen.

  • Register: whenever a new user registers with a provider, their data will be retrieved and stored.
  • Login: whenever user logs in with a provider, their data will be retrieved and stored.
  • Link: whenever user links and existing WordPress account with a provider, their data will be retrieved and stored.

Design Guidelines

According to the TikTok Design Guidelines, the button need to comply with some requirements. At the buttons tab of the TikTok provider there are predefined skins, which comply with those requirements, but depending on the background color you might need to choose a different skin.
The Light skin has an outline so it is suitable for both dark and light backgrounds, however the Dark skin should be used only for light backgrounds.
TikTok Button skins

Common error messages returned by TikTok during verification

Verify Settings popup displays the TikTok for Developers page

The URL of the Popup will look something like this: https://open-api.tiktok.com/platform/oauth/undefined


The “Redirect domain” that you added to your App is not correct. Check the Getting Started section of the TikTok provider and make sure you added the suggested URLs to your App!

Verify Settings popup displays a broken authorization screen

The Authorization screen displays no icons, no texts and the buttons have no labels either.


The problem is that, the entered Client Key field is not correct for your app or maybe the app with the corresponding Client Key was deleted. Go to the TikTok Developers page and open your App, and make sure the Client Key that you copied is the same as the one that you entered into Nextend Social Login!

”error_code”:10013

Error: {“data”:{“captcha”:””,”desc_url”:””,”description”:””,”error_code”:10013},”message”:”error”}


The Client Secret you copied from the TikTok app is invalid. Make sure the correct one was copied!

Limitations

TikTok registers accounts without email address

The TikTok API can not return email address or phone number. For this reason we are not able to get these details, so we need to register the new accounts with no email address.
If you want to avoid the accounts with no email address, then you should set the Ask E-mail on registration to “When email is not provided or empty”. This way whenever a user registers with TikTok, Nextend Social Login will display an input field where the user will need to enter an email address manually before the registration.