question

cjones-6582 avatar image
1 Vote"
cjones-6582 asked ·

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

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.



azure-active-directoryazure-ad-tenantazure-ad-app-development
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

alfredorevilla-msft avatar image
1 Vote"
alfredorevilla-msft answered ·

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.


· 3 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks, that did get me moving forward and I'm able to authenticate client-side. However, the issue I'm running into is how to securely authenticate against my API now with that token. It seems the Django/DRF API needs some way of knowing it is a valid token.

1 Vote 1 ·

@cjones-6582 were you able to figure this out?

0 Votes 0 ·

Hello @cjones-6582. Have you tried Simple JWT?


0 Votes 0 ·
MahipalSingh-2159 avatar image
0 Votes"
MahipalSingh-2159 answered ·

Hello @cjones-6582 ,

  • 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.

@alfredorevilla-msft Feel free to correct any issues that you see in the approach.

Hope this helps.



·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

cjones-6582 avatar image
0 Votes"
cjones-6582 answered ·

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?

·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.