A common pattern in B2B products is for users who belong to multiple organizations to be able to switch between them. This topic demonstrates how to achieve this.

The first step is to include a list of organizations a user belongs to, in their ID token.

1. In Kinde, open the application you want to enable a switcher for. For example, go to Settings > Applications > [View details] > Tokens.
2. Scroll down to the Token customization section and select Configure on the ID token card. The Customize ID token window opens.

3. Select the Organizations (array) checkbox in the Additional claims section.
4. Select Save. This adds the organization id and name to the user’s ID token, in the following format:

"organizations": [
    {
      "id": "org_4ba6821b521",
      "name": "Golden Finance"
    },
    {
      "id": "org_b7226a3b5f0",
      "name": "UTM Bank"
    },
    {
      "id": "org_16374a4fc3f",
      "name": "Trueblue Pty Ltd"
    }
  ]

You can now extract the organizations claim from ID tokens in the way you normally would. Typically the SDK you are using will have a method for this.

For example, in React you could use:

const {getClaim} = useKindeAuth();
console.log(getClaim("organizations", "id_token").value);

To build a simple list of orgs, use something like the following React example. You’ll need to include a call to the login method for each organization, passing in the id.

In this example, we’ve also included a check to see if this is the current organization.

const {getClaim, getOrganization} = useKindeAuth();

<ul>
    {getClaim("organizations", "id_token").value.map((item) => (
        <li key={item.id}>
            <button onClick={() => login({org_code: item.id})} type="button">
                {item.name}
                {getOrganization().orgCode === item.id ? " (Current)" : null}
            </button>
        </li>
    ))}
</ul>;

With some extra styling, a switcher might look something like this: