DEV Community

Belhassen Chelbi
Belhassen Chelbi

Posted on

Is there a way I can use Django default auth with React with them both decoupled?

I've been avoiding JWT / Token auth and trying to explore if I can use React with Django default auth, or is it only achievable by including a React app inside a Django template?

Top comments (8)

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

I assume your having React as front end and Django as backend for that combination.

I would suggest to take a look at are using Django REST framework Authentication libraries that is implemented without JWT.

Collapse
 
belhassen07 profile image
Belhassen Chelbi

any experience with any of these?

I suppose the default session authentication only works with React inside a django template "Session authentication is appropriate for AJAX clients that are running in the same session context as your website."

For basic Token or JWT, the problem appears on where to store them. (After a lot of research I figured they're best stored as the following: the access token in memory and the refresh token in an HTTP Only cookie) which makes sense, but I can't find a package that does this (There's Django-Rest-Framework-simplejwt which return them as a json object which again return me to the problem of where to store them)

I like your stack (Gatsby + Django) btw, how do you approach authentication ?

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

Firstly you got it wrong, Django does not work that way. They don't share anything at all if your going the React as your frontend and Django as your backend. The only interaction between them is in terms of API.
Your React is only calling the API in your Django backend.

Which in this case is either a JWT token or some other form of authentication depending on your use case.
This could be founded in the Django REST Framework in the Authentication section to authenticate and allow the access to the Django API.

Once you have a session or JWT, you can either store it as local storage or as a cache that is implemented on React your front-end.

Thread Thread
 
belhassen07 profile image
Belhassen Chelbi

No buddy, you can either serve React and Django each in a different server or you can use react (the bundle.js file) as a script inside a template (then you can use the session authentication which requires the AJAX calls to be in the same context).

Localstorage is a very bad idea as it's vulnerable to XSS. As I said the way to do it is to store the access token in memory and the refresh inside an http only cookie, there's a pull request for the django-rest-framework-simplejwt that's trying to do this.

So the answer for my question is no, if React and Django are served seperate. Now I'm trying to figure out how to return an http only cookie for the refresh token.

If it was okay for localstorage, that would be super easy. But unfortunately the internet has some bad people.

Thanks for your interaction buddy

Collapse
 
belhassen07 profile image
Belhassen Chelbi

I must add that I'm new to Django so I'm not totally comfortable customizing it, in fact, I got in because they give a lot of thing out of the box.

Collapse
 
itayb1 profile image
itayb1 • Edited

Struggling with the same issue at the moment.
As I explore more I start to believe that DRF was meant to be secured by token based authentication method, when using with a decoupled frontend.
I did found this django-rest-framework-jwt package, which is currently unmaintained, but do has a nice feature that might suite your needs.
check the docs at jpadilla.github.io/django-rest-fra...

Collapse
 
belhassen07 profile image
Belhassen Chelbi

There's djang-rest-framework-simplejwt which is maintained, the problem is that they return the refresh and the access in a json object where the refresh should be in an http only cookie. I'm not sure I'd want to use jwt and honestly I'm new to Django so I can't customize it easily.
For the Token auth(not jwt) the problem, is the same, where do we store it.

Collapse
 
itayb1 profile image
itayb1

Managed to create a view for authentication of users while using built-in SessionAuthentication.

See snippet in reddit.com/r/django/comments/e91gn...