Validating AzureAD Tokens in a React, Flask application

Issue

Forgive me if I use the wrong terminology. I am not the most experienced developer but I am trying to get a better understanding of using AzureAD with my React (Front End) and Flask (Back End) applications.

I am using Flask to use API routes for some data calculations that I return to my frontend for display. I was tasked to authenticate the application, and we happen to use Azure at our company.

On the React App, I followed this https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react tutorial that I was able to see a token response. I set that up as a header in my API calls on the front end, and I can confirm and see just the token header it looks like on my flask backend.

Example Header

headers: {
        Authenticaton: `Bearer ${accessToken}`,
      },

I am not too sure what I am supposed to do with the token, I was trying to ensure that the signed-in user, could access those routes. However, I have no idea how the token would get validated. Microsoft grants this token, so from what I was thinking is that Flask would talk to Microsoft Azure, and confirm that token is legit.

If anyone has some good tips, or tutorials, or just can explain this better to me I would greatly appreciate it.

I can always try to provide code if need be, but I am also just more so stuck on the existing architecture of this. Thank you

Solution

Ok so after some research, if any case someone stumbles upon a question like this.

After you gain the access token from Microsoft, and you’re using something like Flask to do API calls. You need to send your access token back to the backend (Flask) and proceed to use that access token with the Microsoft Graph API.

They have a few end points, for my case I used

https://graph.microsoft.com/v1.0/organization

This allowed me to confirm the user was the correct user for my tenant.

From there, do whatever security checks, and hopefully it makes some more sense. I’ve personally never used this type of technology as a junior, so it was very rewarding to see it in action.

I can follow up with other questions, but for now.. case solved.

Answered By – PKPython

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published