Login to Azure health Data Services from React SPA

Das, Bipin 0

I am able to use postman to get a token and access patient data. but from the React App, I am able to fetch the access token and attach it to the Authorization header but I get a 401 when I access the /Patient endpoint. I have created a Azure AD app registration (SPA) and given that app FHIR SMART, and Fhir Data Contributor roles in the FHIR service IAM.

Everything works in postman but not from the React SPA.

JananiRamesh-MSFT 27,751 Reputation points

2023-11-27T17:54:28.5966667+00:00

@Das, Bipin Thanks for reaching out. From the description it seems like you’re encountering a 401 Unauthorized error when trying to access the /Patient endpoint from your React Single Page Application.

Mostly the access token obtained from Azure AD is not being sent correctly in the Authorization header of the request. Could you please compare the successful Postman request with the unsuccessful React app request. Look for any differences in the headers, the way the request is made, or the way the token is obtained and included. You can use a tool like Fiddler or the browser's developer tools to inspect the traffic and verify that the access token is being sent correctly.

or you can check the Azure AD app registration settings to ensure that the correct permissions are granted to the app. verify the FHIR service IAM settings to ensure that the app has the required roles to access patient data.

let me know incase of further queries, I would be happy to assist you.
Das, Bipin 0 Reputation points

2023-11-28T11:28:14.7933333+00:00

I am using msal-react to fetch the token. The access token is attached as an authorization header as "Bearer tokenvalue". The client AD app has rights to the FHIR service IAM. So not sure what I am missing here.

Share via

Login to Azure health Data Services from React SPA

Your answer