Okta OIDC authentication with Django Rest Framework and React

Hello!

I’m working on implementing an Okta authenticated React frontend with a DRF backend. I’ve been using this tutorial as a starting point. I would like to use okta-auth-js and okta-react to complete the transaction solely in React as it seems like the most straightforward approach.

Up until now I’ve been playing with mozilla-django-oidc to implement authentication in Django. This was working fine as a test. Now that I’m implementing a React frontend and Django rest framework on the backend the whole process is starting to become more complicated.

Per the above tutorial, if I simply ran the react code it works just fine. The callback sends me back to the route it originated from and authState.isAuthenticated is true and redirects to /home.
I removed the Flask backend (which was not running in the previous example) and put in a test Django backend.

The problem is that Django wants to resolve the oidc/callback route and it fails.

Do I need to get Django involved in the authentication process? I was hoping that I could just handle that all in React and pass a token along to the backend when needed.

If I do need to let Django resolve the callback and do the subsequent login redirect, how would I handle this considering that I’m using PKCE instead the client secret?

I’ve had a look at this repo that handles Okta backend authentication without any other third-party modules. This example handles the oidc/callback by validating a token based on the okta-oauth-nonce cookie. Is this something I can do with PKCE as well?

If anyone out there has tried to do this with React and Django or otherwise has some insight, I would love to hear about it.

I apologize if any of the above incomplete or unclear. I’ll share whatever code might be relevant. I’m still learning much of the technology necessary to achieve this.

Thanks!

1 Like

Hi, did you manage to figure out the solution?