Cookies in Javascript
Tags: webdev, javascript, beginners, tutorial
Published: 2022-06-09 22:38:00

A cookie is a tiny amount of information that gets sent between a server-side and a client-side. A web browser stores this information at the time of browsing. A cookie contains the information as a string generally in the form of a name-value pair separated by colons [reference](https://www.javatpoint.com/javascript-cookies#:~:text=A%20cookie%20is%20an%20amount,pair%20separated%20by%20semi%2Dcolons.)

If they are not on the same domain, cookies will not get sent because cookies can not cross domains, that is what makes them secure.

During development,
<p> 
  > server is at localhost: 3500 <br> <br>
  > front-end web app is at localhost: 3000
</p> 

They are considered different hosts by CORS. Therefore all requests to the server are covered by CORS security rules.


![BMC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bltpeps95t77zwx69a38.gif)

### Front-end

**fetch in Javascript**
If you are using the native fetch in javascript, `{Credentials: include}` is an option you can use to send cookies to the server.

**Axios**
In axios, `{withCredentials: true}` is an option you can set to include cookies to send to the server.

### Back-end

<br>

```javascript
res.header("Access-Control-Allow-Credentials", true)
```

You should set this header on the servers' response, this header works in conjunction with the options you set on the front-end.

This tells the browser to expose the servers' response to the front-end javascript code If the request was made with credentials. **what are credentials ?**, Credentials are cookies, authorization headers e.t.c

So, if a request was made for a resource to the server with credentials included, and if this header is not returned with the resource, the servers' response is ignored by the web browser and not returned to the web content.

### Creating a cookie
Our primary language is Node.js, so to create a cookie in Node.js

```javascript
const myCountry = "Antarctica"

// saving information in a cookie
res.cookie('jwt', myCountry, { httpOnly: true, sameSite: "None", secure: true, maxAge: 24 * 60 * 60 * 1000 });
```

``jwt``, this is the name of the cookie
``myCountry``, this is the information to store in the cookie

**Options**
We can pass in options to describe additional information about the cookie
> ``httpOnly: true``, this makes the cookie not accessible by javascript, which prevents a malicious actor from getting a hold of it.
> ``sameSite: "None"``, this makes the cookie work across site.
> ``secure: true``, this makes the cookie work in a secure connection example "https" in browsers.
> ``maxAge: 24 * 60 * 60 * 1000``, is the expiration set for the cookie, this cookie has been set to expire in one day.

**Front-end**
To access a cookie on the front-end (web browser), open your browser console `CTRL+SHIFT+I` and type in.

``document.cookie``

our cookie is httpOnly, so you will not see it.


**Thank You, Please follow me**

[<img align="left" alt="linkedin.com/in/ifeanyi-thankgod-chima/" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/linkedin.svg" />][linkedin]
[<img align="left" alt="https://twitter.com/ifeanyiTchima" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@3.13.0/icons/twitter.svg" />][twitter]

[linkedin]: https://www.linkedin.com/in/ifeanyi-thankgod-chima/
[twitter]: https://twitter.com/ifeanyiTchima


<a href="https://www.buymeacoffee.com/ifeanyichima" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>