So the scenario is that we have an app that our azure engineers can log into and manage certain items. We want them to be able to dismiss Azure Security Alerts or Backup alerts across many tenants from one page. I understand that each tenant will require a separate bearer token so probably needs a sign in popup. Currently we are using MSAL to authenticate the users in our tenant so they can access our React app and API. The _app.tsx is below and the msalConfig contains clientId, authority (using our tenantId rather than common), redirectUri and postLogoutRedirectUri.

import { MsalProvider } from '@azure/msal-react'
import { PublicClientApplication } from '@azure/msal-browser'
import { msalConfig } from '@/scripts/authConfig'

export default function MyApp({ Component, pageProps }: AppProps): ReactElement {

  const msalInstance = new PublicClientApplication(msalConfig)

  return (
    <MsalProvider instance={msalInstance}>
      <Layout>
        <React.StrictMode>
          <Component {...pageProps} />
        </React.StrictMode>
      </Layout>
    </MsalProvider>
  )
}

I would then normally get a token to access our API via the following function

  async function getToken(): Promise<string> {
    const token = instance
      .acquireTokenSilent({ ...apiScopes, account })
      .then(response => response.accessToken)
      .catch(() => instance.acquireTokenPopup({ ...apiScopes }).then(value => value.accessToken))
    return token
  }

I have tried putting an authority into the acquireTokenSilent function but it still returns the same token that I am using to access our API so it doesn't work when trying to post to an endpoint against other tenants.

How do I get a new token for other azure tenants to execute these requests?