2

I am building an auth microservice; the client side is on codesandbox and server side is on repl

I am trying to store the access token on server side (http only)

I already setup cookie parser

//COOKIE
const cookieParser = require('cookie-parser');
app.use(cookieParser());

I send the cookie like this

res.cookie("access_token", access_token,cookieOptions)
.status(200)
.send({success: true,token_type:"bearer",
expires_in: new Date(Date.now() + 60 * 1000 ),
refresh_token: refresh_token})

And this is client side

function fetch_profile_accountInfo(username, password) {
      let url = "https://repl.co/api/auth/localLogin";
      return axios
      .post(url, {
           username: username.toLowerCase(),
           password: password
      })
      .then((res) => res.data);
      }
} 

function getCookie(cname) { 
     var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); 
     var ca = decodedCookie.split(";"); 
     for (var i = 0; i < ca.length; i++) { 
           var c = ca[i]; 
           while (c.charAt(0) === " ") { 
                c = c.substring(1); 
           } 
           if (c.indexOf(name) === 0) { 
                return c.substring(name.length, c.length); 
           } 
     } 
     return ""; 
}

let { refresh_token, expires_in } = await fetch_profile_accountInfo(
 username,
 password
}

const access_token = getCookie("access_token"); 
console.log("document: " + document.cookie); 
console.log("access_token: " + access_token);

When I call the document.cookie, I am getting null or undefined

I also tried set the axios use withCredentials: true

function fetch_profile_accountInfo(username, password) {
 let url = "https://repl.co/api/auth/localLogin";
 return axios
 .post(url, {
      username: username.toLowerCase(),
      password: password
 }, {withCredentials: true} )
 .then((res) => res.data);
}

But I am getting network error

Anyone know how to fix this to get cookie from express?

In addition, I also want to ask about it is good to store access token on server cookie and refresh token on client side localstorage?

Thanks

chikarau
  • 21
  • 1
  • 2

2 Answers2

1

I was also facing the same problem but I have found the solution.

if you are using axios then you have to use { withCredentials: true } as a second parameter. OR if you are using fetch then you have to use credentials: 'include' as a options (second parameter)

0

If a cookie is httpOnly it can't be used in the client-side only in the server-side so make sure to set httpOnly:false in the cookieOptions variable.

Someone21
  • 91
  • 10
  • Thx for reply. I just set to false, but still cannot able to read the cookie. And from the tutorial I read, setting httpOnly to true can prevent accessible through JS, making it immune to XSS attacks. – chikarau Nov 25 '20 at 02:18
  • @chikarau did you check the console in the chrome dev tools? It might tell you what's wrong. – Someone21 Nov 25 '20 at 02:25
  • Set a cookie in the application tab in the dev tools. Then In the console tab check to check if your fetch_profile function to see if it fetches the cookie. – Someone21 Nov 25 '20 at 02:44
  • if I added the "withCredentials: true", it would give me an error say "has been blocked by CORS policy", but I already imported cors() – chikarau Nov 25 '20 at 03:31
  • Here's a SO question that might be helpful [https://stackoverflow.com/questions/46522749/how-to-solve-redirect-has-been-blocked-by-cors-policy-no-access-control-allow](https://stackoverflow.com/questions/46522749/how-to-solve-redirect-has-been-blocked-by-cors-policy-no-access-control-allow) – Someone21 Nov 25 '20 at 15:14
  • Thanks!! I will check that! – chikarau Nov 29 '20 at 22:03