ngCookies returns undefined for existing cookie

Question

I've been scratching my head for this one for hours now yet still haven't found the cause or solution.

Basically I have an Angular.js frontend that tries to log users in (with ngCookies on Angular.js 1.3.15) by communicating with an authentication API endpoint in the backend. Upon success, my code should redirect the user to another page.

So the login code looks something like:

auth.login($scope.user).success(function() {
  $state.go('overview');
});

where auth is a service that has a login method which simply sends an POST request to the backend. $state.go('overview') will do the redirect. This code should be ok as I get HTTP200 back from the server given I supply the correct user credentials. However, the browser won't redirect me to the overview page because it still thinks I'm not logged in unless I refresh the page.

The code that checks if the current user is logged in uses a helper method called getToken(), where I use ngCookies to retrieve a cookie named USER_SESSION. And this method is where I think the problem is.

The method itself is simply

auth.getToken = function() {
  return $cookies.USER_SESSION;
};

However it always returns undefined even when the USER_SESSION cookie exists in the browser.

Some testing I did (on a remote testing server so accessing cookies in localhost shouldn't be a concern):

auth.getToken = function() {
  console.log($cookies);
  console.log($cookies.USER_SESSION);
  return $cookies.USER_SESSION;
}

The results of console.log:

// Before login:
Object {...} // No USER_SESSION, this is good
undefined

// After hitting the login button, browser sends AJAX request,
// server returns HTTP200 response with Set-Cookie in the header:
Object {USER_SESSION: ""aa21fcd..."", ...} // UESR_SESSION exists, good
undefined // ???

// After refreshing the page:
Object {USER_SESSION: ""09b4tk..."", ...}
"09b4tk..."

Are the double quotes the problem here? I thought so initially, but after refreshing the page, $cookies returns the same thing (same double quotes but a different USER_SESSION value) and $cookies.USER_SESSION would have the correct value, and user would be on the overview page.

Does this mean Set-Cookie in the HTTP response header needs a page refresh to take effect?

Thanks!

P.S. Same problem occurs with cookieStore.

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

I had the same issue and i couldn't address that with ngCookies. I decided to use the local storage instead.

I use this module: https://github.com/grevory/angular-local-storage

And also, based on the code you showed, local storage will be a better fit for you app. See: Local Storage vs Cookies

edited May 23 '17 at 11:53

Community

1
1

answered Apr 25 '15 at 17:36

Emanuel Andrade

71
1
2

Thanks, I switched to jquery-cookie and things worked. ¯\\_(ツ)_/¯ – melonccoli Apr 25 '15 at 21:50

score 0 · Answer 2 · answered Jun 10 '15 at 09:25

0

It's because the interface has changed. You need to use .get() and .set() with $cookies now.

    $cookies.set('USER_SESSION', 'your value here');

    auth.getToken = function() {
        return $cookies.get('USER_SESSION');
    }

answered Jun 10 '15 at 09:25

user3887964

219
2
3

1

.set() is not a method of the $cookie service. I thin you mean .put()? – Jose Carrillo Apr 26 '16 at 06:43

score 0 · Answer 3 · answered Apr 06 '18 at 12:00

So, I've been wrestling with this for about a day or two as well, because I was working on a login cookie. Examples I used where done with $cookieStore, which is naturally deprecated now, so I quickly switched over to $cookies, thinking that's that.

Well, here's the thing. When you're using $cookies, it's important to note that there's a difference between $cookies.put and $cookies.putObject. The same applies to $cookies.get and $cookies.getObject, naturally.

I foolishly thought that my object would work anyway, but no, turns out that's how I ended up getting the undefined.

Now, for your question, I'm going to assume that 'USER_SESSION' is an object, and therefore you're running into this issue. Otherwise, you don't seem to have used a .put() or .get() either. So try this for now.

//if your cookie is an object

$cookies.putObject('USER_SESSION', cookieObject)

auth.getToken = function() {
    return $cookies.getObject('USER_SESSION');
}


//if your cookie is not an object

$cookies.put('USER_SESSION', 'cookie')

auth.getToken = function() {
    return $cookies.get('USER_SESSION');
}

ngCookies returns undefined for existing cookie

3 Answers3