Skip to main content

Add Multiple Clients for the Same Provider

If you have social/SSO login 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).

In order to get this to work, you would need to add additional clients to the Apple.init on the backend. Each client would need to be uniquely identified and this is done 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": "...",
                }
            }]
        }
    }
]

For the frontend, you would need to 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.
This is the URL of your app's API server.
This is the URL of your app's API server.
SuperTokens will expose it's APIs scoped by this base API path.
This is the URL of your website.
The 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 our pre built UI SDK (supertokens-auth-react) as well, you can provide the clientType config 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: [/*...*/],
});