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.
- Navigate to https://developers.tiktok.com/
- Log in to your TikTok developer account or register one if you don’t have any!
- On the top right corner click on Manage apps then click on the Connect an app option.
- Find the Configuration section and upload an image as App icon, then enter an App name, a Description and choose a value for Category.
- For Platform you should enable the Configure for Web option then enter the URL of your website into the Website URL field.
- Click on the Save changes button.
- Click on +Add products on the left hand menu then add the Login Kit product, and press the Done button.
- At the left hand menu click on the Login Kit option under Products.
- Enter your domain name into the Redirect domain field. (The domain name shouldn’t contain the https/http protocol or the path!).
- Scroll up and click on the Save changes button.
- 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.
- 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.
- Press the Submit button.
- 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.
- 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.
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.
The Client Key of your TikTok app. You can find it at under your App’s App info section.
The Client Secret of your TikTok app. You can find it at under your App’s App info section.
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.
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.
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.
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.
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!
The Client Secret you copied from the TikTok app is invalid. Make sure the correct one was copied!
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.