Can msal-react handle multiple PublicClientApplication with differents Id

[Gaelik-git]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

2.38.2

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.5.11

Public or Confidential Client?

Public

Description

I would like to know if it possible to connect to multiple PublicClientApplication in the same app.

My react app is calling 2 API that are developped by differents teams, with differents terraforms code repository and everything.

This is the code I had when working with a single API, and it was working as intended

import { InteractionType, PublicClientApplication } from '@azure/msal-browser';
import { MsalAuthenticationTemplate, MsalProvider } from '@azure/msal-react';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import config from './config';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
const msal = new PublicClientApplication({
  auth: {
    clientId: config.clientId,
  },
});

root.render(
  <React.StrictMode>
    <MsalProvider instance={msal}>
      <MsalAuthenticationTemplate
        interactionType={InteractionType.Redirect}
        authenticationRequest={{
          scopes: config.scopes,
          authority: `https://login.microsoftonline.com/${config.tenantId}`,
          redirectUri: window.location.origin,
        }}
      >
        <App />
      </MsalAuthenticationTemplate>
    </MsalProvider>
  </React.StrictMode>,
);

I found some solutions that are saying I could simple create 2 instances and use the correct one depending on which API I call

const msalFoo = new PublicClientApplication({
  auth: {
    clientId: config.clientIdFoo,
  },
});

const msalBar = new PublicClientApplication({
  auth: {
    clientId: config.clientIdBar,
  },
});

But is there a way to make this solution works with MsalProvider and MsalAuthenticationTemplate approach ?
Or do I have to rebuild this with the multiple instance possibility ?

If it's not possible do you have another way to do it you could forward me to ?

MSAL Configuration

No response

Relevant Code Snippets

No response

Identity Provider

Azure AD / MSA

Source

External (Customer)

[microsoft-github-policy-service]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @hectormmg please follow up.

[microsoft-github-policy-service]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @hectormmg please follow up.

[tnorling]

Can you please clarify why do you need different clientIds? A single clientId supports token acquisition for multiple resources. The clientId represents your app, not the tokens you are requesting.

[microsoft-github-policy-service]

@Gaelik-git This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.