How do I access cookies set by passportjs in angularjs

I really hope this isn't a stupid question but I suspect it is. I've googled everything I can to understand what's going on but I still don't understand how to read cookies that have been set using nodejs/express/passport.

I'm using Angular's ngCookies and $cookies service but when I try to print out the cookies I set on the server side, I see this (using console.log($cookies["connect.sess"]))

s:j:{"passport":{"user":{"id":1,"email":"xxxxxx@yyyy.com","role":"Admin"}}}.0lKpQzpgzCAjgkIayDkUiOLhktIYsohr61U/4xSwWFA

My cookie is in there. But it's all stored as a string with that other stuff surrounding it. Should I be looking at a different object? It won't let me access -->

$cookies["connect.sess"].passport

because that's undefined which makes sense since $cookies["connect.sess"] returns a string. Any hints as to where I'm going wrong here? All I need to do is access these cookies that were set in the server. I don't need to change them. I'm hoping an extra set of eyes on this will do the trick. I'm stumped!

I tried setting my own cookies by using res.cookie. On the server side where I am creating the cookie it looks fine. But somewhere between there and angular, it looks like "j:{my json cookie}" This time no s: in front and no gobble-de-gook on the end. Sure I can parse that stuff out and find my json, but where is this stuff getting added and why?

I did some poking around and the express response.cookie adds the j: in front of the json if you pass in an object. and the s: with the blurb after the json object is their way of signing a cookie. So I found that I didn't really need the session cookies that passports was sending. I could just use the userid in the session cookies for authentication on the server side and create my own email and role cookies created using:

res.cookie("email", user.email, {my cookie options}) 
res.cookie("role", user.role, {my cookie options})

instead of trying to populate the session cookies with a json object. The answer I've chosen below is the best option given what I know today. Although I find it hard to believe that you have to strip characters off an object to get client cookies properly. Seems odd. I'm a cookie newbie, so if anyone has an explanation or a good link for reading I'd love to hear it.

Cookies are always stored as string, so that is the reason you are getting a string when you do console.log($cookies["connect.sess"]) and this string is the json representation of the object.

As your cookie has some non-json stuff, first you need to extract everything between the brackets "{}", then deserialize the string to a javascript object.

To deserialize a JSON string to a javascript object you must use angular.fromJson(json).

Example:

//'s:j:{"passport":{"user":{"id":1,"email":"xxxxxx@yyyy.com","role":"Admin"}}}.0lKpQzpgzCAjgkIayDkUiOLhktIYsohr61U/4xSwWFA';
var s = $cookies["connect.sess"];

// First extract json object from the crazy cookie string
//There is also an option to to this with regular expressions
var jsonString = s.substring(s.indexOf("{"), s.lastIndexOf("}") + 1);

// Then convert to a javascript object
var obj = angular.fromJson(jsonString);
var passport = obj.passport;

https://docs.angularjs.org/api/ng/function/angular.fromJson