Azure Active Directory Authentication from Django-REST-Framework and ReactJS App

Question

Seems like something pretty basic to implement, but I've been struggling for several days with it now.

Essentially:

1. User navigates to domain.com/admin
2. This URI is for internal company users only
3. Thus, the user needs to be verified against the organizations Azure AD
4. If they are a user, it takes them to the dashboard; If not, they are rejected from entering

Simple, right?

I'm finding not so much.

I've been trying to do it server-side with DRF. Mind you, my Django backend, does not serve any static assets. It is strictly and API that consumes and provides data. It at no point uses Django Templates. I'm finding most of the libraries are out dated, have poorly written documentation, or just don't work for my use case (DRF). I've tried a handful and can't get any of them working.

I understand that this can also be done client-side with ReactJS libraries and supposedly it is secure. I haven't tried yet. I have no preference for either server-side or client-side just as long as user's information can be put in the database... I don't see any reason why this couldn't happen even using client-side.

So at any rate, what I'm hoping I can get some guidance on is the following:

1. Some documentation, or guide, starting with the basics: How to properly register this App to serve this purpose (i..e, client_id, client_secret, token, etc.). Super clear and from the basics.
2. What actually works for this purpose whether it is client-side ReactJS or vanilla JavaScript implementation, or server-side Django, DRF, or Python implementation.

Thanks in advance for the help.

Answer 1

You can try the following examples:

Node.js (only up to Add Azure AD authentication)
React (only up to Add Azure AD authentication)

If you want tto restrict certain users from being able to login you can Restrict your Azure AD app to a set of users in an Azure AD tenant.

Or for more advanced scenarios you can Add app roles in your application and receive them in the token and decide which ones are allowed to navigate other portions of your app.

--
Please let us know if this answer was helpful to you. If so, please remember to mark it as the answer so that others in the community with similar questions can more easily find a solution.

Answer 2

Hello guys @cjones and @Moses Alhassan , were you able to find a work around to use Azure AD, Django Rest Framework and React, this could be a super useful documentation, I can propose to write up for the community.

Best Regards.

Cyrus Ndirangu.

Answer 3

Hello @cjones ,

• You can use client side react for authentication.
• Then send that token back to API from react front end.
• After that use graph /me api to get the details for that particular token.
• There will be email in the response that is for the token from graph API.
• Match that email in your Database and once you verify that you can generate the token using Simple JWT and send it back to React front end.
• Then use that token for Auth.

This is just basic summary of the process you can tweak it however you want.

@Alfredo Revilla - Upwork Top Talent | IAM SWE SWA Feel free to correct any issues that you see in the approach.

Hope this helps.

Answer 4

Looking at these two steps:

Then send that token back to API from react front end.

After that use graph /me api to get the details for that particular token.

Is the last step I quoted done server-side (in my case in Django/DRF)? Is there a particular library that needs to be used or just do a regular POST to the graph end point?