---
title: Add multiple clients for the same provider
description: Configure multiple client IDs for social login providers in web and mobile applications.
sidebar:
  order: 6
---

## 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](/authentication/email-password/introduction) and have a working application integrated with **SuperTokens**.
If you have not, please check the [Quickstart Guide](/quickstart).

## 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`.

<CodeGroup group="backend-language">
<Tab title="Node.js" value="nodejs">
```tsx
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: "...",
          },
        },
      ],
    },
  },
];
```
</Tab>
<Tab title="Go" value="go">
```go
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":     "...",
					},
				},
			},
		},
	}}
}
```
</Tab>
<Tab title="Python" value="python">
```python
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":     "...",
                    },
                ),
            ],
        ),
    ),
]
```
</Tab>
</CodeGroup>

### 2. Update the frontend configuration

Use the right `clientType` as shown below:




<DependentContent passive group="frontend-custom-ui">
<ContentOption title="Web" value="web">
We pass in the `clientType` during the init call.
</ContentOption>
<ContentOption title="Mobile" value="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.
</ContentOption>
</DependentContent>

<CodeGroup group="frontend-custom-ui">
<Tab title="Web" value="web">
<DependentContent group="install-method" label="Installation method">
<ContentOption title="npm" value="npm">
```tsx
import SuperTokens from "supertokens-web-js";

SuperTokens.init({
  appInfo: {
    apiDomain: "<YOUR_API_DOMAIN>",
    apiBasePath: "/auth",
    appName: "...",
  },
  clientType: "web-and-android",
  recipeList: [
    /*...*/
  ],
});
```
</ContentOption>
<ContentOption title="Script tag" value="script-tag">
```tsx check=false reason="This example omits surrounding application and SuperTokens configuration."
supertokens.init({
  appInfo: {
    apiDomain: "<YOUR_API_DOMAIN>",
    apiBasePath: "/auth",
    appName: "...",
  },
  clientType: "web-and-android",
  recipeList: [
    /*...*/
  ],
});
```
</ContentOption>
</DependentContent>
</Tab>
<Tab title="Mobile" value="mobile">

</Tab>
</CodeGroup>

<DependentContent passive group="frontend-custom-ui">
<ContentOption title="Web" value="web">
<DependentContent passive group="install-method">
<ContentOption title="npm" value="npm">
If you are using the pre-built UI SDK (SuperTokens-auth-react) as well, you can provide the `clientType` configuration to it as follows:
</ContentOption>
</DependentContent>
</ContentOption>
</DependentContent>

<CodeGroup passive group="frontend-custom-ui">
<Tab title="Web" value="web">
<DependentContent group="install-method" label="Installation method">
<ContentOption title="npm" value="npm">
```tsx
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: [
    /*...*/
  ],
});
```
</ContentOption>
</DependentContent>
</Tab>
</CodeGroup>



## See also

<CardGroup cols={3}>
  <Card title="Custom providers" href="/authentication/social/custom-providers" />
  <Card title="Invite based sign up" href="/authentication/social/custom-invite-flow" />
  <Card title="Hooks and overrides" href="/authentication/social/hooks-and-overrides" />
</CardGroup>