Cookie Management API

[matthewp]

Background

Dealing with cookies is cumbersome. If you want to read a cookie you need to:

1. Grab the Cookie header from the request.
2. Parse the cookie to grab the value you want.
3. Possibly coerce it to another type.

Writing is just as challenge as you need to:

1. Create a Set-Cookie header for each cookie you are trying to set.
2. Serialize the data structure into the expected Set-Cookie value.
3. Set the correct path.
4. Set the correct expires
5. Set all of the correct security settings, prone to messing up.

And if you want to delete a cookie you have to set its expires to the past.

Proposal

The recently introduced Cookie Store API provides a convenient way to read/write cookies through a Map-like interface. Reading a cookie is:

const value = await cookieStore.get('name');

And writing a cookie is:

await cookieStore.set({
  name: 'name',
  value: 'abcdefghijk',
  httpOnly: true,

  // Note you can use date-fns or moment or whatever you want
  expires: new Date('Wed, 1 Jan 2025 00:00:00 GMT')
})

And deleting a cookie is as simple as:

await cookieStore.delete('name')

Astro.cookieStore / APIContext.cookieStore

I propose that this object be added to the Astro global in .astro files and APIContext in dynamic routes.

---
import { getSession } from '../session';

const token = await Astro.cookieStore.get('lid');
const session = await getSession(token);
---
<strong>You {session ? 'are' : 'are not'} logged in</strong>

In API routes this would be used like so:

import type { APIContext } from 'astro';

export async function get({ cookieStore }: APIContext) {
  const token = await cookieStore.get('lid');
  const session = await getSession(token);

  if(!session) {
    return new Response(null, {
      status: 405
    });
  }
  // ...
}

Links

• Cookie Store explainer
• Userland implementation

[thepassle]

This looks great. Currently in my project I'm manually managing these things and while it's not the worst, having a higher level API for these things would absolutely help. It definitely take some fumbling around trying to figure out how to set cookies correctly, and just generally felt cumbersome.

For example, to verify my users JWT I'm currently doing:

import { parse } from 'lightcookie';
import jwt from 'jsonwebtoken';

export async function isLoggedIn(req) {
  const cookie = req.headers.get('cookie');
  if(cookie) {
    const parsed = parse(cookie);
    if(parsed.jwt) {
      jwt.verify(parsed.jwt, import.meta.env.JWT_SECRET, () => {});
    }
  }
}

It's not the absolute worst thing in the world, but its just kind of unfortunate to have to have a dependency on lightcookie to do it, it'd be super awesome to just be able to use cookieStore, e.g.:

export async function get({cookieStore}) {
  const auth = isLoggedIn(cookieStore);
}

function isLoggedIn(cookieStore) {
  const jwt = cookieStore.get('jwt');
  jwt.verify(jwt, import.meta.env.JWT_SECRET, () => {});
}

Having helpers to set cookies and delete cookies would be tremendously helpful as well. Currently I have functions that look like:

export function createHeaders({jwt, location}) {
  const expires = sevenDaysFromNow();
  const headers = new Headers();
  
  headers.append('Set-Cookie', `jwt=${jwt}; Expires=${expires}; Path=/; HttpOnly; Secure;`);
  headers.append('Location', location);
  
  return headers;
}

It'd be really nice to have cookieStore.set and cookieStore.delete.

The only feedback I have to this is: why would these methods on cookieStore be async? Do they need to be? Doing this kind of stuff in my project has been mostly sync. Ah, thats as per spec. That'd be my feedback for the spec, then. 🙃

[thepassle]

Thinking more on this, perhaps having the cookie API built-in would also simplify this issue we ran into earlier? https://github.com/withastro/astro/pull/3092/files#r848657008

[matthewp]

No, unfortunately the Headers interface doesn't have a way to read multiple headers of the same key, it always concats them. So each host has to provide some sort of API to get the multiple Set-Cookies out.

[matthewp]

Remix contains higher-level APIs for session management. Should we skip this step and go straight there? https://remix.run/docs/en/v1/api/remix#sessions