hapi.js - Managing State with Cookies

Mike Frey
InstructorMike Frey

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

hapi has built-in support for parsing cookies from a request headers, and writing cookies to a response, making state management easy and straight-forward. It even has built in support for cookie encryption and auto detects when a cookie contains JSON, parsing or stringifying automatically.

[00:01] Hapi's reply method returns a response object, which includes a state method. State can be used to set cookies on a routes response. The first argument is the cookie's name, and the second is the value. For this example, I'll use hello and world.

[00:15] When I refresh the browser, I've got a cookie named hello with a value of world showing in the resources tab of the dev tools. If I change the value of the cookie and refresh, the change is reflected in the browser.

[00:28] Now that we've touched on writing cookies, let's take a look at reading them. Hapi automatically parses the requests cookie header, and adds the resulting cookies to the request.state object. I'll read in my hello cookie by assigning request.state.hello to the variable hello. I'll print it in the response, as well.

[00:51] Now, when I refresh, I see the value mom after the word cookies. That's because the new value of world wasn't set until after the request was finished. It read the previous value, which was mom. Refreshing again gives me world.

[01:07] Next, let's take a look at how to control the extra properties of the cookie, like its expiration and whether, or not it's flagged as HttpOnly. The state method takes a third options argument. The TTL property is used to control expiration.

[01:23] I'll set it to expire after 60 minutes, and I'll set isHttpOnly to true, which turns on the cookie's HttpOnly flag. After a refresh, the expiration is set to an hour from now, and the HttpOnly flag is turned on.

[01:40] Hapi also includes support for encoding and encrypting cookies. I'll add an encoding property here set to iron, and add a password with a long random value. Now when I refresh, the value of my cookie is long and garbled.

[01:58] If I refresh again, the value of the cookie printed to the page is now garbled, as well. What happened? Hapi doesn't know that I want to use an encrypted cookie when it's parsing the request headers. It just passes along the value that it sees.

[02:13] Another issue you may have noticed is that I'm setting the cookies options in the route handler. It's quite possible that I may want to use this cookie in more than one route.

[02:22] Instead of setting the options here, Hapi provides a state method on the server object specifically designed to provide default settings for a given cookie.

[02:31] The first argument is the cookie name -- hello, in my case -- and the second argument is the cookie's default configuration. Now when I refresh, world once again prints on the page, and the cookie's value is still encrypted.

[02:44] The last thing I wanted to mention is that Hapi will automatically serialize and deserialize JSON cookie values. If I change the value to an object with a name key, then have my route read the name property off the cookie, and refresh, the value is set. Refresh again to see the value on the page.