Cookies and Local Storage is empty on localhost:4200 in Angular 10

Question

Why is my application not saving anything into Cookies and Local Storage when run on localhost?

It is Angular10/Express app.

If I deploy the application on the server and I visit the website then when I inspect the app I can see Cookies being populated and Local Storage being used but if I run application on localhost (:4200 FE, :3000 BE) then Cookies and Local Storage are empty.

The issues I have with this are that for example express BE uses CSRF for protection (this can be commented out) but on FE this doesn't save anything localStorage.setItem('authUser', JSON.stringify(authUser)); which later makes role based pages in app unusable.

This happens in all browsers (Chrome, Firefox and Safari).

Did I miss something? Seems like some very simple issue but seach didn't help.

score 0 · Accepted Answer · answered Jul 22 '22 at 15:37

So the issue is not with browser but with how Angular application has been set up. The problem I had was after successful login there were several requests but one of them failed due to my account not having required role. This request failed with 401 unauthorized. That failed request automatically called logout function which had clear localStorage function implemented.

However, it still looks like the app was not working as excepted because I had to exclude CSRF token for a specific login path by adding:

    // this has been inspired by other answer
    // https://stackoverflow.com/questions/24992139/node-js-use-csurf-conditionally-with-express-4
    var conditionalCSRF = function (req, res, next) {
      //compute needCSRF here as appropriate based on req.path or whatever
      if ('/api/auth/login') {
        next();
      } else {
        csurf(req, res, next);
      }
    };

Cookies and Local Storage is empty on localhost:4200 in Angular 10

1 Answers1