Which UI do you use?

Custom UI

Pre built UI

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.

NodeJS

Important

For other backend frameworks, you can follow our guide on how to spin up a separate server configured with the SuperTokens backend SDK to authenticate requests and issue session tokens.

GoLang

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": "...",
                }
            }]
        }
    }
]

Python

import (
    "github.com/supertokens/supertokens-golang/recipe/thirdparty/tpmodels"
)

func main() {
    _ = []tpmodels.ProviderInput{{
        Config: tpmodels.ProviderConfig{
            ThirdPartyId: "apple",
            Clients: []tpmodels.ProviderClientConfig{
                {
                    ClientType: "web-and-android",
                    ClientID:   "...",
                    AdditionalConfig: map[string]interface{}{
                        "keyId":      "...",
                        "privateKey": "...",
                        "teamId":     "...",
                    },
                },
                {
                    ClientType: "ios",
                    ClientID:   "...",
                    AdditionalConfig: map[string]interface{}{
                        "keyId":      "...",
                        "privateKey": "...",
                        "teamId":     "...",
                    },
                },
            },
        },
    }}
}

Other Frameworks

from supertokens_python.recipe.thirdparty.provider import ProviderInput, ProviderConfig, ProviderClientConfig

providers = [
    ProviderInput(
        config=ProviderConfig(
            third_party_id="apple",
            clients=[
                ProviderClientConfig(
                    client_type="web-and-android",
                    client_id="...",
                    additional_config={
                        "keyId":      "...",
                        "privateKey": "...",
                        "teamId":     "...",
                    },
                ),
                ProviderClientConfig(
                    client_type="ios",
                    client_id="...",
                    additional_config={
                        "keyId":      "...",
                        "privateKey": "...",
                        "teamId":     "...",
                    },
                ),
            ],
        ),
    ),
]

For the frontend, you would need to use the right clientType as shown below:

Web

Via NPM

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: [/*...*/],
});

Via Script Tag

We pass in the clientType during the init call.

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

Mobile

When making calls to the APIs from your mobile app, the request body also takes a clientType prop as seen in the above API calls.