NodeJS Backend needs to verify valid user signed in from React App Frontend using MSAL

Question

Hello and thanks in advance for the help!

I have a nodejs backend application (API) that has protected routes, depending on role based access.
The roles are applied from this nodejs application to recognized users based on a db table.

We need to use MSAL to authenticate the user from our Azure AD, which means that the MSAL object (and tokens) are sent to the react application (frontend) and the backend doesn't know if the user that authenticated is valid, untampered and actually can access the resources.

How can I verify that the authenticated react user is actually able to access a route? I tried to verify the signature of the access token and id token with JWKS but since the token header has a nonce, the verification through public key is a no-go.

Can you help me out?

EDIT: I think this might be a viable read

https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/1-call-api

Answer 1

Hi lorenzopieriazure,

Thanks for reaching out.

I understand you are authorizing users using React applications and based on the role, calling protected backend Web API. Based on your question, you are looking to verify the signature of the access token issued by Azure Ad after user sign in to the React application.

An access token contains claims that you can use in Azure Active Directory to identify the granted permissions to your APIs. When your internal application receives an access token, it must validate the signature to prove that the token is authentic.

To Verify the JWT token:

1. Verify that the JWT contains three segments, separated by two period ('.') characters.
2. Parse the JWT to extract its three components. The first segment is the Header, the second is the Payload, and the third is the Signature. Each segment is base64url encoded.
3. Signature contains the digital signature of the token that was generated by Azure AD’s private key and verify that the token was signed by the sender.

To validate the authenticity of the JWT token’s data is by using Azure AD’s public key to verify the signature.

You can obtain public key by calling the public Azure AD OpenID configuration endpoint

https://login.microsoftonline.com/{tenant_id}/discovery/keys?appid={client_id} and verify against the private key generated by Azure AD token.

If it works, you know the contents were signed with the private key. If not, you can’t be sure of it so you should treat the JWT token as an invalid token.
For validation, developers can also decode JWTs using jwt.ms and verify against "kid" claim.

Hope this will help.

Thanks,
Shweta

-------------------------------------

Please remember to "Accept Answer" if answer helped you.

Answer 2

I can confirm that this is what I was looking for! Now I just need to provide my own API jwt once the user is verified

https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/1-call-api

The JWT is publicly signed with a nonce, hence it cannot be verified using the JWKS (found with the kid in the header) as I expected at first.

I found the solution to be that to create a secondary app with an api endpoint that connects the backend app (node) clientid to the frontend (react) clientid on Azure Portal (app management) and you can follow up with the github link that I posted