00:00 We're going to talk about cookies, and we're finally going to get dark mode on our app. Isn't that wonderful? And it's awesome, actually. We're going to be doing optimistic UI. So our theme requires some server-side interaction to get server rendering of our theme. And you'll notice we're on a slow 3G network, but it is still lightning fast.

00:19 So how are we doing this? That's what we're going to be learning about. Cookies rock. So first, I'm going to talk a little bit about the history of cookies, and then we'll talk about GDPR. So the original idea of cookies is actually like they've been around since the very, very beginning of the web.

00:35 And the idea was we need like a mini-database that can allow our servers to be a little more stateless and also allow our browsers to kind of manage some state. So it's for state management. That's the basic idea behind cookies. You don't want to put too much in there

00:54 because there's a limit to how much or the size of the cookie. And also, every request includes the cookie, and so you're going to slow down your request if you put too much in cookies. But in general, they're really, really good for small amounts of data, and we use it for authentication. It's the only secure authentication mechanism

01:13 that we have, or the most secure mechanism that we have. GDPR is always a concern that people have. I am not a lawyer, but everything that we're doing in this workshop should be within the bounds of GDPR, meaning you do not need to have a banner, a GDPR banner. But talk to a lawyer if you're concerned.

01:33 People often ask about cookies versus local storage or session storage. Pretty much, you want to use cookies for anything that involves the initial render of your application. If you don't, you don't have access to local storage on the server, and so you'll have to do some sort of guess and then send

01:51 the server-rendered guess to the client, and then on the client, now you have access to local storage. Now, if you guessed wrong, the user's going to see the guess, and then they'll see the hydration and the correct thing, which is totally not what you want to do at all. And on top of that, local storage

02:10 is accessible by extensions and other clients at JavaScript if you've got third-party integrations and stuff like that. So just don't use it. It's bad user experience, bad for security. You can use local storage for some things like autosaving a form or something

02:29 like that that might be an appropriate use for local storage. But even that, now you have to have some sort of eject mechanism, and local storage doesn't have anything like that. So even those things, you really just want to limit your use of local storage for anything that's important to keep safe.

02:49 So use cookies. Cookies are great. So let's talk a little bit about how it works. You can get and set cookies on the client and on the server. The benefit of the server is that you can actually keep these things protected and safe. But yeah, the document.cookie API is really weird. So here's how you set one cookie.

03:08 And then if you wanted to set another, then here's the other. And by doing this, you're actually just setting another cookie. You're not overriding this cookie, which is super, duper weird. It's a very strange API. I don't use it. Instead, I use the server-side API,

03:27 which allows you to, say, set cookie as a header in a response. And then you'll set the cookie. There are a bunch of options that you can provide to these, as well, and copilot. Thank you. So these options are semicolons-based. And setting that is kind of awkward,

03:45 and you have to think about escaping and stuff. So there are libraries that you can use to do this easier. We're going to be using one of those today. As far as getting things is concerned, you just say document.cookie. And on the client side, you'll only get the JavaScript-accessible cookies. And so there is a way to configure your cookies

04:04 to be HTTP-only, which is the way you should be doing it for most things. Not everything, but yeah, certainly like authentication-related stuff, you'll definitely want to set it to be HTTP-only. And so that won't show up in a client side when you say document.cookie. And then on the server side, you say request headers, get cookie, and that will give you all the cookies,

04:24 including those for HTTP-only. So that should give you enough information to add some cookie magic to our theme switcher here that Kelly kind of put together for us. So let's get to it.