Access Token for both Microsoft Graph and Custom API

Question

I have a ReactJs frontend making requests to an API. Both hosted in Azure with app registrations in AAD as well.

I used to be able to use v1.0 auth endpoint, and create a valid token for the API:

https://login.microsoftonline.com/common/oauth2/authorize?client_id=<AAD_WEB_APP_ID>&resource=<AAD_API_ID>&response_type=token ...

If I understand the documentation correctly, this type of auth flow isn't allowed/possible in v2.0:

However, that Web API can receive tokens only from an application that has the same Application ID. You cannot access a Web API from a client that has a different Application ID. The client won't be able to request or obtain permissions to your Web API.

The reason for changing from v1.0 to v2.0 is that I need access to Microsoft Graph (Groups in particular).

My question is: How can I create an access_token that works for Microsoft Graph and my API? If that isn't possible, what would the correct auth flow be?

Answer 1

You don't need to switch to the v2 Endpoint for this, Microsoft Graph supports both v1 and v2 tokens (actually, every API I can think of that supports v2 also supports v1 but there might be an exception I'm forgetting).

The steps are pretty straightforward:

1. Update your AAD registration in the Azure Portal and add the Permissions for Microsoft Graph you're going to be using.

2. Instead of passing resource=<AAD_API_ID> in your URI, use resource=graph.microsoft.com. This will return a token that can be used with Microsoft Graph.

Important: You must request the Offline Access scope (offline_access) for this to work.

Where this gets confusing is that technically you cannot use the same Access Token to access both your API and Microsoft Graph. What is supported is switching the Resource when refreshing your token. So while, yes, you are using two different tokens, you're reusing the same credentials/authorization code.

Here is an example flow:

1. A user authenticates using your API as the Resource (resource=<AAD_API_ID>). This returns an Authorization Code back to your application.

2. The application posts the Authorization Code to the /token endpoint (also using your API as the Resource). This will return both an access_token and a refresh_token to the application.

3. Use this access_token to make calls into your API.

4. The application posts the refresh_token to the /token endpoint using graph.microsoft.com as the Resource. This will return a new access_token and refresh_token keyed to Microsoft Graph.

5. Use this new access_token to make calls into Microsoft Graph.

6. The application again posts the refresh_token to the /token endpoint but this time using your API as the Resource again. This will return a new access_token and refresh_token keyed to your API.

7. Call your API

You can repeat this cycle as needed. Depending on how often you need to switch, you can also keep access tokens for both your API and Graph in memory and reuse them until they expire. Just be sure and always store the last Refresh Token you received so you can fetch a refreshed token for either resource as needed.