Tyler Keesling

With a background in engineering and sales, I’ve found the perfect combination in solutions. When not at my work desk, you might find me rock climbing, skiing, or taking moonlit walks on the beach.

Solutions Engineer

Auth0 allows you to create custom social connections. In this post you'll learn how to create and set up Auth0 with TikTok

<div class="alert alert-danger alert-icon">
   <i class="icon-budicon-487"></i>
 <strong>To follow this tutorial, you need a production application with a Terms of Service, Privacy Policy, etc. TikTok currently doesn’t support non-production apps.</strong>
 </div>


With nearly one billion users across 154 different countries, TikTok has become one of the most popular social media platforms worldwide. As a developer, you will want to create an app that delights users by letting them choose their favorite social media login, including TikTok.

In this tutorial, you'll learn how to add social login with TikTok to your application using Auth0. Marketplace [supports over 50 out-of-the-box social connections](https://marketplace.auth0.com/features/social-connections), with social identity providers like Google, LinkedIn, and Twitter. If your social provider of choice isn't there yet (in this case, TikTok), it is possible to [create a custom social connection.](https://auth0.com/docs/authenticate/identity-providers/social-identity-providers/oauth2)

## How Does Auth0 Connect to TikTok?

Most social identity providers enable third-party applications to allow end-users to log in with their social credentials by acting as an OAuth 2.0 provider. TikTok is no different in that regard.

In the [OAuth 2.0 authorization code flow](https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow#how-it-works), the identity provider (TikTok) must publish an authorization endpoint and a token endpoint that are using a standard set of parameters. Auth0 will use the authorization endpoint to redirect users to TikTok and the token endpoint to exchange the authorization code for an access token to fetch the user profile. 

TikTok deviates from the standard OAuth naming conventions by using `client_key` as the parameter name instead of `client_id` for both the authorization and the token endpoint. The `client_id` is the application's identifier asking for authorization. In other words, the Client ID identifies your application to TikTok. By default, Auth0 uses the `client_id` nomenclature, so you will need to transform the `client_id` request parameter to use `client_key` for both requests.

## Getting Started 

To get started with this tutorial, you will need the following prerequisites:

1. A [developer account with TikTok](https://developer.tiktok.com/)
2. An <a href="https://a0.to/blog_signup" 
  data-amp-replace="CLIENT_ID" 
  data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">
  Auth0 account
</a> with a deployed app using Auth0 as the means to authenticate your users
3. A proper Terms of Service and Privacy Policy for your app [for the TikTok app review process](https://developers.tiktok.com/doc/getting-started-app-review-process)
4. [Node.js](https://nodejs.org/en/) and [ngrok](https://ngrok.com/) installed on your local environment.

You can <a href="https://a0.to/blog_signup" 
  data-amp-replace="CLIENT_ID" 
  data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">
  sign-up for a free account
</a>. With a free account, you can add authentication to up to 10 apps with support for up to 10,000 users and unlimited logins- plenty for your prototyping, development, and testing needs.

## Configuring TikTok's Integration 

Once your developer account has been created:

* Go to **Manage apps** and create a new app connection
  This will generate a `Client Key` and `Client Secret` under app details

Complete the fields for **App icon, App name, Category, Description, and Website URL**

![TikTok Configuration](https://images.ctfassets.net/23aumh6u8s0i/33JI3cEnL3sQZmkbPktL78/e4857fc0081c4656f84ff6b9e93e4f7d/image-20230121-195231.png)

* On the left under **Products**, click **Add products** and add the **Login Kit** and the **TikTok API**

![TikTok Add Product](https://images.ctfassets.net/23aumh6u8s0i/48YgCtfcTQb6H59gPuBcmT/bcb3af089a56f34f2f58240dcdd8e447/image-20221205-161528.png)

* Configure the **Login Kit** with your** Terms of Service URL, Privacy Policy URL, and Redirect domain**
The redirect domain is your base [Auth0 tenant](https://auth0.com/docs/get-started/auth0-overview/create-tenants) URL found in [Application Settings](https://auth0.com/docs/get-started/applications/application-settings)

![TikTok ToS](https://images.ctfassets.net/23aumh6u8s0i/4VVh2eNRVogHdBNCJ3GU0i/4888f62bed2ab2b4e0fad1293f446bdd/image-20221205-162520.png)

* Save your changes and [submit your app for review](https://developers.tiktok.com/doc/getting-started-app-review-process)

> Your app connection is in _Staging_ status. It may take a few hours for TikTok to review your submission before it’s moved to _Production_ status, which is required for the integration to work.

## Integrate TikTok with Auth0

Once you integrate Auth0 into your application, you will want to implement TikTok as a custom social connection. 

To create a custom social connection, head to Authentication → Social → and click “Create Connection”. Find the **Create Custom** option. Populate the form with the values as follows:

![Auth0 New Social Connection](https://images.ctfassets.net/23aumh6u8s0i/1F4rm5ziebAFfkvMH4wPu8/835cf63fbe3e418497096084ebf197e1/image-20230121-175804.png)

* **Name**: TikTok
* **Authorization URL**: TikTok’s Authorization URL `https://www.tiktok.com/v2/auth/authorize/`
* **Token URL**: This will eventually be your proxy. You’ll learn about this in a minute. For now, use a dummy URL like `https://example.com`
* **Scope**: `user.info.basic`
* **Client ID:** `Client Key` assigned to you by TikTok
* **Client Secret**: `Client Secret` assigned to you by TikTok
* **Fetch User Profile Script**: [Script](https://auth0.com/docs/authenticate/identity-providers/social-identity-providers/oauth2#fetch-user-profile-script) to fetch profile information from [TikTok’s user info endpoint](https://developers.tiktok.com/doc/tiktok-api-v2-get-user-info/) and map to [Auth0’s normalized user profile](https://auth0.com/docs/manage-users/user-accounts/user-profiles/normalized-user-profiles). Auth0 only requires the `user_id` attribute, which corresponds to TikTok’s `union_id`

```javascript
function fetchUserProfile(accessToken, context, cb) {
  const axios = require('axios@0.22.0');
  const userInfoEndpoint = 'https://open.tiktokapis.com/v2/user/info?fields=union_id';
  const headers = { 'Authorization': 'Bearer ' + accessToken };
  
  axios
    .get(userInfoEndpoint, { headers })
    .then(res => {
      if (res.status !== 200) {
        return cb(new Error(res.data))
      }

      const profile = {
        user_id: res.data.user.union_id,
      };
      
      cb(null, profile);
    })
    .catch(err => cb(err));
}
```

Click **Save** and then enable this connection to the applications that require sign-in with TikTok:

![Auth0 TikTok Demo app](https://images.ctfassets.net/23aumh6u8s0i/3y4p63NLcAwrJoXcFwozqQ/b9986a73b6e5152135aad8cc3c4d7c75/image-20230121-192650.png)

## Using the Management API Explorer to Pass Custom Parameters to TikTok

[TikTok’s authorization endpoint](https://developers.tiktok.com/doc/login-kit-web/) specifies `client_key` instead of `client_id`. Auth0 allows us to [pass provider-specific parameters to an identity provider](https://auth0.com/docs/authenticate/identity-providers/pass-parameters-to-idps) during authentication.

To add client_key as a parameter, you will first need to generate an [access token](https://auth0.com/docs/secure/tokens/access-tokens) for the [Management API Explorer](https://auth0.com/docs/api/management/v2). In the Auth0 dashboard, go to **Applications → APIs →** and select **Auth0 Management API**. Next, head to the **API Explorer** tab and click **Create & Authorize Test Application.**

![Auth0 TikTok Demo app settings](https://images.ctfassets.net/23aumh6u8s0i/7EagaLc1sxI5e2G8DwXMgO/954a49c7d530ecd4e3031321488c4b64/image-20230111-170426.png)

To use Management API Explorer, follow these steps:

1. Copy the access token and go to the [Management API Explorer.](https://auth0.com/docs/api/management/v2)
2. Click the **Set API Token** button at the top left.
3. Set the **API Token** by pasting the API Token that you copied in the first step.
4. Click the **Set Token** button.

You should now be able to use the Management API Explorer to modify the configuration of your Auth0 tenant. 

First, use the [Get a connection endpoint](https://auth0.com/docs/api/management/v2#!/Connections/get_connections_by_id) to retrieve the existing values of the `options` object. It will look something like this:

```json
{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic"
  }
}
```

Add the `upstream_params` object with the `client_key` field.

```json
{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic",
    "upstream_params": { 
      "client_key": { "value": "<Client Key from TikTok>" } 
    }
  }
}
```

Next, use the [Update a connection](https://auth0.com/docs/api/management/v2#!/Connections/patch_connections_by_id) endpoint with the new `options` object as the body. Auth0 will send the `client_key=<value>` parameter to [TikTok’s authorization endpoint. ](https://developers.tiktok.com/doc/login-kit-web/)

The [access token endpoint](https://developers.tiktok.com/doc/login-kit-manage-user-access-tokens/) requires a different solution which you’ll learn about next.

## Proxying the Request for the Access Token

Auth0 does not allow you to pass custom query parameters for a request to an OAuth provider’s token endpoint. One solution for this problem is to proxy the request to the token endpoint and append the `client_key` parameter programmatically.

### Technical details

The diagram below illustrates a modified [Authorization Code flow. ](https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow)

![Auth0 Tiktok connection diagram](https://images.ctfassets.net/23aumh6u8s0i/35Dt2Cp6Rhv459jkL3IcJi/c507f054660eb0c157291ff479129b1c/Screenshot_2023-01-26_at_2.28.21_PM.png)

1. User visits an application that requires authentication against Auth0
2. Auth0 detects no session and redirects to the Universal Login page
3. User selects login with TikTok from available login options
4. Auth0 initiates login with TikTok and redirects to TikTok login
5. User authenticates with TikTok and consents to share their user profile
6. TikTok redirects a callback to Auth0’s `/login/callback` endpoint with authorization code
7. Auth0 connects to the proxy `/token` endpoint to exchange authorization code and modifies the `client_id` parameter to `client_key`
8. Proxy endpoint requests an access token from TikTok’s `/oauth/access_token` endpoint and returns it to Auth0
9. Auth0 uses the access token to fetch the user’s profile from TikTok’s `/user/info` endpoint
10. Auth0 issues its own `id_token` and redirects back to the application, completing the sign-in flow

For this tutorial, the proxy endpoint will be created with vanilla [Express.js](https://expressjs.com/) and hosted with [ngrok](https://ngrok.com/), an open-source tool, to expose a local development server to the internet with minimal effort. For production, it's best to host proxy endpoints in your environment.

## Deploying TikTok Integration Proxy

First, download the example code from [this GitHub repository](https://github.com/tylerkeesling/tiktok-access-token-proxy). Follow the `README` instructions to install the dependencies and start the development server. The example server has one POST route, `/token/proxy`. The server should be running on `http://localhost:3333:`

![Project running in localhost](https://images.ctfassets.net/23aumh6u8s0i/4mHJ8Uev0prP1gphpnQ7Y4/39906699faa0a5e1e6eb8bb606a33bad/image-20230121-220221.png)

The proxy endpoint should be something similar to `https://405a-104-129-13B-250.ngrok.io/proxy/token`.

Then head back to your TikTok social connection configuration and update the **Token URL** that you set to `https://example.com` to your live URL address:

![Auth0 Tiktok Token URL](https://images.ctfassets.net/23aumh6u8s0i/3N0boeKcdz3nKJABPNBrU4/4a7caf39e5f67a8234de5a8b8db2dc86/Screen_Shot_2023-01-21_at_5.14.33_PM.png)

Once the configuration is saved, you should now be able to log in with TikTok. 

## Conclusion 

In summary, if your goal is to reduce sign-up friction, increase registrations, and improve the user-login experience, then [adding social login to your website is a must-have](https://auth0.com/resources/whitepapers/why-choose-social-login/). Auth0 makes it easy with our many out-of-the-box integrations. If an integration doesn't exist within our marketplace, you can make it possible with custom social connections.

Using TikTok as a Custom Social Connection in Auth0

peterfernandez_360

As an Architect, Consultant, and Engineer, I have more than 30 years of experience designing and developing secure and robust software solutions. When not helping teams deal with the complexities of Customer Identity, you can usually find me working behind the scenes, acting in or directing a show at my local theatre.

Principal Developer Advocate

Peter Fernandez

Learn how to support government-issued IDs (like SwissID) as Social Connections into your applications with Auth0.



**TL;DR:** In this article, you will learn how Auth0 can help you support government-issued IDs as social connections in your own applications with ease. For demonstration purposes, you will learn how Auth0 can help you support SwissID (a popular digital identity solution in Switzerland) in your applications. However, the process explained here will be quite similar for other similar government-issued IDs.

<include src="TweetQuote" quoteText="With @auth0, developers can easily support government-issued IDs in their applications."/>

## SwissID Introduction

[SwissID](https://swissid.ch) is the standardized digital identity initiative for use across Switzerland. This initiative is a joint venture of state-affiliated businesses, financial institutions, and health insurance companies (like [Swiss Post](https://www.post.ch/en) and [SBB](https://www.sbb.ch/en/)) that provide a third-party [Identity Provider](https://auth0.com/docs/identityproviders) service to application vendors. With SwissID, users retain exclusive ownership over their personal data making online transactions easier to process and, more importantly, more secure.

Usually, application vendors implementing support for SwissID would require a working knowledge of the [OAuth 2.0 protocol](https://auth0.com/docs/protocols/oauth2) and of the [OpenID Connect specification](https://auth0.com/docs/protocols/oidc). However, as [Auth0](https://auth0.com) now supports SwissID as a [Custom Social Connection](https://auth0.com/docs/connections/social/oauth2), developers can easily integrate this identity provider into their applications. Also, alongside with SwissID, by using Auth0 you can support a myriad of other Identity Provider services (e.g., Facebook, Google, Twitter, and LinkedIn) as well as add capabilities such as [Single Sign On](https://auth0.com/docs/sso/current) and [Multifactor Authentication](https://auth0.com/docs/multifactor-authentication).

<include src="TweetQuote" quoteText="Auth0 helps developers integrating the SwissID identity provider into their custom applications."/>

## Signing up to SwissID

As an application vendor (a.k.a. a [Relying Party](https://auth0.com/identity-glossary#r)), you will first need to sign-up to SwissID. This process starts by [contacting SwissID in order to become a Business Partner](https://www.swissid.ch/en/b2b-kontakt.html). After the sign up with SwissID, you will have to provide information about your redirection URI’s. In return, SwissID will provide you with a Client ID and a Client Secret. Keep handy this information as you will need both values while setting up SwissID within you Auth0 account.

## Signing up to Auth0

If you don't have an Auth0 account yet, <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free one right now</a>.

As part of [the free plan](https://auth0.com/pricing), you will get things like:
- 7,000 active users.
- Up to 2 [social identity providers](https://auth0.com/docs/identityproviders).

![Auth0 free plan](https://images.ctfassets.net/23aumh6u8s0i/4rbvCByWzeEgIBPDthLvI7/38606589e60236f021a3aab6d8dd0f26/auth0-free-plan)

While signing up to Auth0, you will have to define a _Tenant Domain_ (e.g., `your-company.auth0.com`) and you will have to choose a _Region_ (at the time of writing, three regions are available: US, Europe, and Australia). After filling in this form, you can complete your account creation, and Auth0 will redirect you to your dashboard.

![Auth0 dashboard](https://images.ctfassets.net/23aumh6u8s0i/7sbXQ9SWpmPS7HuKh9pGhE/427d1c43629461957d5c506e8e9e535d/auth0-dashboard)

## Configuring the Government-Issued ID Connection in Auth0

From your deployment, go to **Connections > Social** in the Auth0 Dashboard, scroll to the bottom, and click **Create Custom**.

Add a name for this connection (something similar to "SwissID-connection" would be descriptive enough), as well as your SwissID **Client ID** and **Client Secret**.

Next, define the **Fetch User Profile Script** as follows:

```javascript
function (accessToken, ctx, cb) {
  // call SwissID to obtain user profile
  request.post({
    url: 'https://login.int.swissid.ch:443/idp/oauth2/userinfo',
    headers: {
      'Authorization': 'Bearer ' + accessToken,
    },
  }, function (err, res, body) {
    if (err) return cb(err);
    if (res.statusCode !== 200) return cb(new Error(body));

    // validate token using the node-jsonwebtoken library
    jwt.verify(body, 'SWISS_ID_SECRET', {}, function(err, decoded) {
      if (err) return cb(err);

      cb(null, {
          user_id: decoded.sub,
          family_name: decoded.family_name,
          given_name: decoded.given_name,
          gender: decoded.gender,
          email: decoded.email,
          provider: 'SwissID',
      });
    });
  });
}
```

> **Note:** You will have to replace `SWISS_ID_SECRET` with your own SwissID Client Secret.

After implementing the script above, you will have to define three more properties before wrapping up:

1. **Authorization URL**: In this field, you will have to input this: `https://login.int.swissid.ch:443/idp/oauth2/authorize`.
2. **Token URL**: In this field, you will have to input this: `https://login.int.swissid.ch:443/idp/oauth2/access_token`.
3. **Scope**: In this field, you will have to input this: `openid profile email phone`.

With these changes in place, you can hit the **Create** button to persist the new settings.

> **Note:** The function declared in the script above is fully customizable and is used to obtain the various supported claims from SwissID. You can tweak this script to build the profile from different perspectives for a particular user (for example, you could ask only for its email address, or its email and its first name, etc.). If you need help building up your users' profile, you can check [the reference application provided by SwissID](https://login.int.swissid.ch/swissid-ref-app) to explore what claims are available. 

## Testing the SwissID Custom Social Connection in Auth0

After hitting **Create**, a new set of buttons will appear on the screen. One of them will be the **Try Connection** button. Pressing it will present you the SwissID login page and, once you submit your credentials successfully, a page similar to the following will be displayed by Auth0:

![Testing the SwissID Custom Social Connection in Auth0](https://images.ctfassets.net/23aumh6u8s0i/zXAlO7cD97AJncXb6qVjK/f2a397309923b5fad308d3f0a0a009d1/testing-the-social-connection-extension)

That's it! Your custom connection between Auth0 and SwissID is already configured. Now, you can use the **Applications** tab available on your custom connection to enable the applications you want to use with SwissID. For example, the screenshot below shows a configuration where only the _Some Awesome Product_ application has the SwissID custom connection active.

> **Note:** If you are experiencing problems with your SwissID Connection, please, ensure that the SwissID team have set the configuration to use client secret in the body of POST requests to their `access_token` endpoint.

![](https://images.ctfassets.net/23aumh6u8s0i/3TCY9Ms9UJZhufCakVZOc6/5b3990ec80c5cae7c0b07398103d2bbe/activating-the-custom-connection-to-different-apps)

<include src="TweetQuote" quoteText="With Auth0, developers can support SwissID login alongside with other features like multifactor authentication, single sign on, etc."/>

## Styling the SwissID Connection on the Auth0 Login Page

By default, [the Auth0 Login page](https://auth0.com/docs/hosted-pages/login) will automatically display all connections enabled for an application. For first-class connections like Facebook and Google, the login page will automatically display an appropriate icon for the connection. However, for custom connections (such as SwissID), only a default icon is displayed.

If needed, you can tailor the look and feel for any connection on either the login or the registration dialogs. This allows you to host a logo for SwissID on your own CDN, and then tell Auth0's login page to use this logo. For more information, check our documentation on [how to customize your login page](https://auth0.com/docs/hosted-pages/login#how-to-customize-your-login-page)

<include src="asides/AboutAuth0" />


"social-connection"