ReactJs FE and Django Rest Services with Azure AD for authentication & Authorization

user_16750129 0
Viewed 743

I'm having a Frontend application built in Reactjs connecting to Azure AD using msal for authentication. After authentication, the user needs to click a button which calls a Django rest API which is also authenticated using Azure AD. React FE and Django connects to two separate App registrations in Azure AD. Even thought 1) FE is added to Django's App registration as known client 2) Django is exposing the API and the scope is given consent.

When the authenticated FE sends requests to the Django Rest service with Bearer token, it fails to authenticate the request saying 'invalid token'.

I'm able to authenticate FE and Django rest service separately but authenticated FE is not able to connect to the Django Rest service. Please share your thoughts on what else needs to be checked or any solutions.

django-rest-framework azure-active-directory reactjs azure
1 Answers

Please check if any of these configurations can be worked around

  1. Check if you have given your react app’s URL in the redirect URL in portal and code , so that once the Azure AD validates the user and it’ll return back to your react app with ID Token.Also, enable Access Token and ID Token.

  2. Check if you have created a scope for your web api (in Azure Portal > Your API > Expose an API). Then configure it on your client app on the API Permissions menu tab. Then add it on your scopes collection in code settings.Also, add grant admin consent for that API permission.

  3. Check the manifest of your azure ad app: Below value is probably null or one, should be two: If you are using v2.0 endpoint,

    "accessTokenAcceptedVersion": 2,

If you are using v2.0 endpoint, the scope should be api://{server_client_id}/.default.

  1. In the code setting.py for your application, you'll need to provide the authority to which your web app delegates sign-in. (ex: authority: 'https://login.microsoftonline.com/(your tenant id>',)

auth: {
clientId: '232a1406-b27b-4667-b8c2-3a865c42b79c',
authority:  'https://login.microsoftonline.com/e4c9ab4e-bd27-40d5-8459-230ba2a757fb',
//
}

  1. When we perform a token validation, Check your jwt token in http://jwt.io Audience: The token is targeted for the web API.

"aud" value that is being generated for JWT token by azure is also controlled by "accessTokenAcceptedVersion" property in AD application manifest.(see if issuer or iss has v2 to confirm as v2 endpoint ) If you have set the access token accepted version to 2, then the client id and audience needs to be same (i.e. no need to write api:// in audience)

Note that Implicit flow is the only flow supported for SPA. Authorization code flow is intended for webapps, mobile and desktop apps but not for SPA.Please refer this document

References:

  1. See how to configure Azure AD and how to determine the settings for django-auth-adfs.
  2. You can check this and find your use case scenario.
  3. Check v2-supported-account-types for authentication-flows
  4. Check OAuth2.0 On-Behalf-Of flow
user_159975090
Related