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

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

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

2. Update the frontend configuration

Use the right clientType as shown below:

We pass in the clientType during the init call.

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.

import SuperTokens from "supertokens-web-js";

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

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