Add multiple clients for the same provider

Configure multiple client IDs for social login providers in web and mobile applications.

Overview

If you use a third-party login method for your web and mobile app, then you might need to setup different Client ID/Secret for the same provider on the backend. For example, in case of Apple login, Apple gives you different client IDs for iOS login vs web & Android login (same client ID for web and Android).

Before you start

This guide assumes that you have already implemented the EmailPassword recipe and have a working application integrated with SuperTokens. If you have not, please check the Quickstart Guide.

Steps

1. Update the backend configuration

Add more clients to the Apple.init on the backend. Each client would need to be uniquely identified, and you achieve this using the clientType string. For example, you can add one clientType for web-and-android and one for ios.

import { ProviderInput } from "supertokens-node/recipe/thirdparty/types";

let providers: ProviderInput[] = [
    {
        config: {
            thirdPartyId: "apple",
            clients: [{
                clientType: "web-and-android",
                clientId: "...",
                additionalConfig: {
                    "keyId": "...",
                    "privateKey": "...",
                    "teamId": "...",
                }
            }, {
                clientType: "ios",
                clientId: "...",
                additionalConfig: {
                    "keyId": "...",
                    "privateKey": "...",
                    "teamId": "...",
                }
            }]
        }
    }
]

2. Update the frontend configuration

Use the right clientType as shown below:

App Info

Adjust these values based on the application that you are trying to configure. To learn more about what each field means check the references page.

Application NameThis is the URL of your app's API server.

API DomainThis is the URL of your app's API server.

API Base PathSuperTokens will expose it's APIs scoped by this base API path.

Website DomainThis is the URL of your website.

Website Base PathThe path where the login UI will be rendered

We pass in the clientType during the init call.

import SuperTokens from 'supertokens-web-js';

SuperTokens.init({
    appInfo: {
        apiDomain: "<YOUR_API_DOMAIN>",
        apiBasePath: "/auth",
        appName: "...",
    },
    clientType: "web-and-android",
    recipeList: [/*...*/],
});

If you are using the pre-built UI SDK (SuperTokens-auth-react) as well, you can provide the clientType configuration to it as follows:

import SuperTokens from 'supertokens-auth-react';

SuperTokens.init({
    appInfo: {
        apiDomain: "<YOUR_API_DOMAIN>",
        websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
        apiBasePath: "/auth",
        appName: "...",
    },
    clientType: "web-and-android",
    recipeList: [/*...*/],
});

Overview​

Before you start​

Steps​

1. Update the backend configuration​

2. Update the frontend configuration​