Django session authentication with React
This is not a coding question, rather a general question: in Django, if I am using default authentication (session authentication in that case), what does the frontend (in my case it is react) need in this case? lets say i log in on browser (login button from frontend side), now it is gonna send username and password data to django, django going to deserialize the data and then authenticate and login, now the problem here is that i redirect to another page where only authenticated users are able to view, the problem is that i cant view it, simply because Django identify me as un-authenticated, after bit of research the answer was because each end (frontend and backend) have different ports, in order to make it work the frontend need to access cookies i assume, is there any simple example to this problem?
The Django default authentication is not what you are after. Instead, the standard form of authentication used for frontend to authenticate is to use JWT. Django rest framework support this feature and extend the default authentication to support this form of authentication.
Basically, using JWT, the frontend sends username and password to the backend, and backend return a token that is valid for a specific time after login. Once the token expires, you are logged out and you should authenticate once again using your original username and password.
While the token is valid, you just adds it as a header in all the request you make from your frontend like this:
authorization: Bearer [Authentication_TOKEN]
Here is a link to the Django Rest Framework: https://www.django-rest-framework.org/api-guide/authentication/ Or in case you do not want to use Django Rest framework, here is another link to help you with setting up the JWT in Django: https://thinkster.io/tutorials/django-json-api/authentication
And here i a link on how to add custom headers in axios, as one of the popular Promise based HTTP client libraries: How to set header and options in axios?