How to store Access token value in javascript cookie and pass that token to Header using AJAX call

Question

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.

possible duplicate of [How do I create and read a value from cookie?](http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie) — Orifjon, Apr 24 '15 at 04:13
Are you wanting to set the cookie with straight JavaScript or jQuery? — Drakes, Apr 24 '15 at 04: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, Apr 24 '15 at 04:37

boombox · Answer 1 · 2015-04-24T06:10:49.307

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.

I believe we can now use the `sameSite` flag to prevent CSRF attacks. — mikasa, Jan 06 '23 at 17:29

score 1 · Answer 2 · answered Apr 24 '15 at 04:12

1

Try this code

document.cookie="username=John Doe";

answered Apr 24 '15 at 04:12

Sunny

432
3
8

why this error gives: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://murmuring-fjord-2343.herokuapp.com/delete. This can be fixed by moving the resource to the same domain or enabling CORS. and how to solve this issue.? – Zoya Khan Apr 24 '15 at 04:51
You are using this by ajax ? if yes then make sure that type must be "jsonp" – Sunny Apr 24 '15 at 07:33
sorry! when i write at the place of json to jsonp, the entire code is not running. – Zoya Khan Apr 24 '15 at 10:31

score 0 · Answer 3 · edited Jul 14 '23 at 10:15

0

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

edited Jul 14 '23 at 10:15

Tyler2P

2,324
26
22
31

answered Jul 12 '23 at 15:26

Faisal Khan

1

Welcome to [so]. Please fix the formatting. – Rubén Jul 14 '23 at 04:41

score -1 · Answer 4 · answered Aug 02 '22 at 02:27

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;
            },

How to store Access token value in javascript cookie and pass that token to Header using AJAX call

4 Answers4