How to get two separate tokens with different scopes/audiences?

[ngbrown]

Hello, thanks for putting this library out there.

In my case, as part of the application registration, I have a custom API exposed in the Azure portal for app registration. To get the scopes for that API, I need to issue separate exchange for token requests with different scopes. Each token is for different audiences (aud).

These custom API scopes start with the Application ID URI, e.g. api://my-service-a516abb2/. Combining both Microsoft Graph permissions and another service or API doesn't work, it just returns the last API's scopes in the access token. Fetching from the https://graph.microsoft.com/oidc/userinfo endpoint also doesn't seem to work without the Microsoft Graph audience.

Can getting separate tokens be incorporated into this authentication library?

[juhanakristian]

Hi @ngbrown and thanks for submitting this issue. Currently there's no support for multiple tokens as you've discovered but this is something I would like to support.

[arikaa]

@ngbrown - For my solution, I ended up calling fetch with a request separately in root.tsx and continued to use the Microsoft strategy for the current logged in user.

// microsoftApi.server.ts
export const getAccessToken = async (): Promise<string> => {
  const form = new FormData();
  form.append("grant_type", "client_credentials");
  form.append("client_id", clientId);
  form.append("client_secret", clientSecret);
  form.append("scope", "<service-app-id>/.default");

  const response = await fetch(
    "https://login.microsoftonline.com/<tenent-id>/oauth2/v2.0/token",
    {
      method: "POST",
      body: form,
    }
  );
return await response.json()
};

[Djacob-no]

I too need scopes from storage account and downstream api using user impersionation. Would be nice to have this in the lib.