Search code examples
azureazure-ad-msalpassport-azure-admsal-react

Is this a right flow for React app on frontend and Express app on backend to authenticate and authorize users with Azure AD?

  1. I have React app on the frontend, I have registered it at Azure AD as REACT_AZURE and I use @azure/msal-react npm package to authenticate the user.

  2. In order to protect my Express routes, I have registered another app at Azure AD as API_AZURE, and in "Expose an API" section I have added scope 'access_as_user'.

  3. In REACT_AZURE app in "API permissions" section I have added permission for 'access_as_user'. Now I can acquire access token for 'access_as_user' scope and make an API call to my express server.

  4. In my protected route, I am using passport-azure-ad BearerStrategy to validate the access token, if it is valid I am authorized to get resources.

Is this the right flow? Do I have to register two apps with Azure AD? if not, how do I do it right?

Solution

  • Is this the right flow? Do I have to register two apps with Azure AD? if not, how do I do it right?

    Of course, your process is absolutely correct. You need to register two applications in Azure, one representing the client application and the other representing the api application. Then expose the api of the api application and add the client application to the api application. Then let the user log in to the client application to complete the authenticate and obtain the token, and use the token to call the api. I have answered similar questions before, you can refer to it.

    But I’m not sure if you want to control which users can access the api based on the user role. If you only want certain users in the tenant to access the api, then you can add a step that is to create an app role and grants users who you wish to have access to the api. Then users in the tenant who are not granted the app role will not have permission to access the api. see more detailed answer.