Best practice to retrieve a token, access backend and Graph API

Library

• @azure/msal-react@1.x.x

Frontend Framework

• React with TypeScript

Backend Framework

• Spring Boot with Java

Identity Provider

• Azure AD

Description

What are the best practices for SSO (single sign-on) in the frontend with OAuth 2.0 using authorization code flow with PKCE and accessing the Graph API in the backend?

Earlier I was using react-adal and the implicit flow to retrieve a token in the frontend and access the backend with that. The backend uses the azure-active-directory-spring-boot-starter Library. After the request the backend accesses the Graph API to get needed Information. It was a Web Application in Azure AD.

Currently I access the id token and the access token in the frontend with the msal-react. So this means now I’m using the SPA (single-page application in Azure AD) with authorization code flow. In the frontend I retrieve both: the access token and the id token. To access the backend I need the id token. But I need the access token too, so that the backend could access the Graph API. I don’t think this is a good idea to send both of them in Header or to send it at all. Both the frontend and the backend use the same Azure Application. The backend has a Secret. Important is that I do not need the frontend directly access the Graph API. But is this a good approach to send both the id token for the backend authentication and the access token to access Graph API on the backend side?

Source

• Internal (Microsoft)
• Customer request

[derisen]

@joshwilson00 you can certainly create multiple strategies (for example, see). But in this case you don’t need that. Instead, configure the options as shown below:

const options = {
    // ...
    scope: ["scope1", "scope2"]
};

From the passport-azure-ad documentation:

scope (Optional)

This value is an array of scopes you accept. If this value is provided, we will check if the token contains one of these accepted scopes. If this value is not provided, we won’t check token scopes.

Keep in mind that the access token you obtain for your API will contain all the previously consented scopes for that API, in addition to the scope you currently requested.

Finally, you can also omit the scope parameter, and manually check if the req.authInfo['scp'] matches the scope you expect in that route.

[derisen]

@m2nhawk @drinkingjasminegreentea @joshwilson00 take a look at this sample React SPA calling Express web API. You can plug-in a different web API, for instance .NET via Angular SPA calling .NET web API. You can further use app roles & security groups to control access to your back-end.