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!

Hi, did you manage to figure out the solution?