I have a login form, as shown below:

<form method="post" name="logForm" onsubmit="onLogin()" action="dashbooard.html">
    <label>Email</label>
    <input type="text" name="email">
    <label>Password</label>
    <input type="password" name="pass">
    <input type="submit" name="submit" value="Login" >
</form>

Now when I click on the Login button, I am authenticated by the server and an access_token is generated and returned back to me via a REST API.

I would like to store that access_token in a cookie and pass that token into a request. But, I don't know how to do this. I would love to receive help on this.

I have a login form, as shown below:

<form method="post" name="logForm" onsubmit="onLogin()" action="dashbooard.html">
    <label>Email</label>
    <input type="text" name="email">
    <label>Password</label>
    <input type="password" name="pass">
    <input type="submit" name="submit" value="Login" >
</form>

Now when I click on the Login button, I am authenticated by the server and an access_token is generated and returned back to me via a REST API.

I would like to store that access_token in a cookie and pass that token into a request. But, I don't know how to do this. I would love to receive help on this.

• javascript
• jquery

• possible duplicate of How do I create and read a value from cookie? – Orifjon Commented Apr 24, 2015 at 4:13
• Are you wanting to set the cookie with straight JavaScript or jQuery? – Drakes Commented Apr 24, 2015 at 4:35
• By using javascript, and after storing access_token i have to pass that access_token value through header. and i have to delete the cookie when user get Logout. – Zoya Khan Commented Apr 24, 2015 at 4:37

4 Answers 4

Here is how you can use a cookie for your question regarding the access_token:

1. Storing the cookie on the client:

document.cookie='access_token=[value]' where [value] is the token value.

If we use a reader/writer library that MDN provides here, we can do the above as:

docCookies.setItem('access_token', [value]);

The reason why we would use something like this instead of the standard way is to make it easier to access and delete the token, as demonstrated in #3 below.

2. Passing the cookie back to the server:

We need to send the access_token back to the server through the header.

This should automatically be done for you, assuming that the server sends a response after authentication like Set-Cookie: access_token=[value].

If for any reason you encounter an issue regarding Access-Control-Allow-Origin, here is an example of how you can set Access-Control response headers for CORS:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Authorization

3. Deleting the cookie:

Using the reader/writer library linked in #1, we can do the following:

docCookies.removeItem('acccess_token');

Security considerations when using cookies for authorization:

XSS, MITM, and CSRF attack vectors should be considered when using cookies for authorization. On a basic level:

• For XSS attacks, we can set the HttpOnly flag in the response header by the server to prevent a client side script from accessing the cookie.
• For MITM attacks, we can use the Secure flag to guarantee the cookie is not sent over an unencrypted HTTP channel.
• For CSRF attacks, the recommendation by OWASP is the Synchronizer Token Pattern. It's basically a randomly generated token that is sent by the server and is sent back by the client to verify a request submission done by the user.

Try this code

document.cookie="username=John Doe";

Just do this in your login route handler:

const option = {
  expiresIn: "24h"
}
res.cookie("token", yourtoken, option)

This will save the the token in your cookie

You can also do this:

const yourToken = whatever your token is 
localStorage.serItem("key" , yourtoken)

You can access yourtoken with your key when ever you want

A more elaborated answer based on above answers, in the success part of your Ajax call.

 success: function (json) {
                // console.log(json); // log the returned json to the console
                var access_token = json.token;
                document.cookie="access_token="+access_token;
            },