1

I'm trying to implement session based authentication the first time using React and Django Rest Framework, but there's some weird thing I don't understand.

I have a pretty standard Login view, so I send POST request from React with username and password, I got response with status 200 and I can see cookies in the response with Chrome developer tools.

But these cookies aren't being saved.
If I do the same POST request with Rest plugin for Chrome - it saves them.
Am missing something here since it's my first time?
Or should I save it manually somehow?

Here's my request with axios. Do I need to add something here?

const sendLogin = () => {
  if (login && password) {
    axios.post(SERVER_ADDRESS + 'login/', {username: login, password: password})
      .then(response => {
         if (response.status !== 200) {
            handleClick();
         }
         else {
            history.push('/');
         }
      })
  }
}
MwamiTovi
  • 2,425
  • 17
  • 25
Lothric
  • 1,283
  • 2
  • 6
  • 11
  • is react application being served as a separate server? I mean is django serving the react application or not? – ruddra Apr 01 '20 at 05:33
  • @ruddra no, they are separated – Lothric Apr 01 '20 at 05:35
  • 1
    then it is better to use token based authentication – ruddra Apr 01 '20 at 05:46
  • 1
    Does this answer your question? [How can I set a cookie in react?](https://stackoverflow.com/questions/39826992/how-can-i-set-a-cookie-in-react) – MwamiTovi Apr 01 '20 at 06:47
  • @MwamiTovi not exactly. I found out that I have to add `withCredentials: true` to my request, because otherwise it's something like browser doesn't trust this cookies, but if I use this I meet another issue with 'access-control-allow-origin', which I also can't solve. I guess the most simple way is just to use Token based authentication as @ruddra said, which I know how to set up and there's no such problems. Thanks for your help guys! – Lothric Apr 01 '20 at 07:27
  • 1
    While using `DRF`, did you manage to do this so as to manage `CORS`? By adding `corsheaders` to `INSTALLED_APPS` and `CORS_ORIGIN_ALLOW_ALL = True` within your `settings.py`? If not, try it. If you tried it and failed? What was the error? – MwamiTovi Apr 01 '20 at 08:25
  • @MwamiTovi I tried it and I have it in my settings.py, the error was `Access to XMLHttpRequest has been blocked by CORS`. I also tried to add headers to response manually but that didn't work either. – Lothric Apr 01 '20 at 08:32
  • 1
    I think you are almost there!! Might also have to set `CORS_ALLOW_CREDENTIALS = True`. And if that error persists, [here's a good answer on CORS](https://stackoverflow.com/a/43881141/10849438) in case you missed it. Hope it helps you too. – MwamiTovi Apr 01 '20 at 09:10
  • 1
    @MwamiTovi thank you, I finally made it. At first I asked a wrong question, my DRF was running not on `localhost` to be able to open my website on my cellphone, I didn't think that is a problem but it is and I should mention that. After I made all you said there was another problem with 'SameSite=Lax` and `cross origin response`. So I had to set `SESSION_COOKIE_SAMESITE` to `None` or run my DRF on localhost, I chose second option and now Chrome saves cookies. But I still don't understand why it was ok from the start with that rest plugin for chrome. – Lothric Apr 01 '20 at 12:01
  • Strange, right! Code doesn't always act the way we expect it to. Am glad that glitch is out of your way now. Cheers.. – MwamiTovi Apr 01 '20 at 12:22

0 Answers0