Edge Helper for creating a Response

[ru-van-urk]

Hello all. I love the simplicity and customisability of Lucia. It already supports a wide range of frameworks and for that I am hyped. The reason I chose for Lucia is that it is edge compatible, something I am very interested in. When using the auth.handleRequest() in combination with edge api routes from Nextjs I found some things I think would be a nice addition for Lucia to make the dx even better. I have some Ideas I want to share.

Disclaimers:

• I am using Nextjs and have not tried other frameworks. Maybe these concepts can be applied there too.
• In the code snippets below I am calling new AuthRequest directly instead of using auth.handleRequest() so that you can see which parameters in the middleware I am using.

First of all the node() middleware is not compatible with the edge api routes. For this a new middleware is needed. I created it and called it vercelEdge()

Then with this middleware we can go onwards creating our authHandler.

Basic example:

export default async function handler(req: NextRequest) {
  const res = new Response();
  const authHandler = new AuthRequest(auth, vercelEdge()(req, res));
  await authHandler.validate();
  authHandler.setSession(null);

  return res;
}

This works like expected. The cookie gets validated and afterwards it gets cleared. The response then is returned and the cookie gets set. No problems at all here.

However, this gets interesting when you want to return for instance the user:

export default async function handler(req: NextRequest) {
  const res = new Response();
  const authHandler = new AuthRequest(auth, vercelEdge()(req, res));
  const { user } = await authHandler.validateUser();

  // Since we can't add to the previous response, we need to create a new one
  // but the cookie doesn't get set which is expected because it is an entirely new response
  const res2 = new Response(JSON.stringify(user), { status: 200 });

  return res2;
}

A possible way to fix this, is using the getCookie() function:

export default async function handler(req: NextRequest) {
  const res = new Response();
  const authHandler = new AuthRequest(auth, vercelEdge()(req, res));
  const { user } = await authHandler.validateUser();

  const res2 = new Response(JSON.stringify(user), {
    status: 200,
    headers: { "Set-Cookie": authHandler.getCookie()?.serialize() ?? "" },
  });

  return res2;
}

But again this gets messy when you want to add more cookies (or headers):

export default async function handler(req: NextRequest) {
  const res = new Response();
  const authHandler = new AuthRequest(auth, vercelEdge()(req, res));
  const { user } = await authHandler.validateUser();

  const headers = new Headers();
  headers.append("Set-Cookie", authHandler.getCookie()?.serialize() ?? "");
  headers.append("Set-Cookie", serialize("x-custom-cookie", "test-value-123"));

  const res2 = new Response(JSON.stringify(user), {
    status: 200,
    headers: headers,
  });

  return res2;
}

We are now at a point where the simplicity (and honestly beauty) of Lucia is gone. I like the handleRequest() flow and that it does the stuff for you. But to make work beautiful with the edge api we need to make a couple of changes.

First of all, the first const res = new Response() is never returned when wanting to add JSON to the response. It only gets used because the middleware wants it, but for getCookie() it doesn't get used. So it is extra, and we can remove it.

The new vercelEdge() now only takes a request. But hold on, what about setting that cookie? Well, what if instead of setting the cookie, we store it in the class properties and store it when previously setting the cookie. Like in setSession():

try {
      const cookie = this.auth.createSessionCookie(session);
      this.cookie = cookie; // This is new, we store the cookie in the class
      // Maybe add a check here if using vercelEdge() don't set a cookie?
      this.context.setCookie(cookie); 
    } catch {
      // response was already created
    }

What this enables us to do is to reference the cookie in other functions. And then we can create a new function.

  public response = (
    body?: BodyInit | null | undefined,
    init?: ResponseInit | undefined
  ) => {
    const headers = new Headers(init?.headers);
    headers.append("Set-Cookie", this.cookie?.serialize() ?? "");

    const response = new Response(body, {
      ...init,
      headers,
    });

    return response;
  };

With this function we can have the simplicity of Lucia back. And our edge handler looks like:

// Example setting session to null
export default async function handler(req: NextRequest) {
  const authHandler = new AuthRequest(auth, vercelEdge()(req));
  await authHandler.validate();
  authHandler.setSession(null);

  return authHandler.response();
}

// Example getting a user
export default async function handler(req: NextRequest) {
  const authHandler = new AuthRequest(auth, vercelEdge()(req));
  const { user } = await authHandler.validateUser();

  return authHandler.response(JSON.stringify(user), { status: 200 });
}

This is very nextjs specific and I do not know if this can be applied to other frameworks. I am hacking around with this and have it working for my use-case. I wanted to share my thoughts so that maybe in the future there can be a nice (and maybe better than mine) solution.

[ru-van-urk]

That being said, I would be down to create a pull request for this and also the tutorials necessary to explain the (improved) edge flow.

[pilcrowonpaper]

I love using web standards but the browser expects multiple Set-Cookie headers when setting multiple cookies:

Set-Cookie: cookie1=foo;
Set-Cookie: cookie2=bar;

Instead of an array:

Set-Cookie: cookie1=foo, cookie2=bar

The issue is Response() was never intended to be used in the server and uses Map so it can't represent duplicate header names. Some providers handle Set-Cookie differently when returning responses but it's not part of the spec.

...Or so I thought! Well, it was correct but it finally changed with getSetCookie() (whatwg/fetch#1346)! And it seems libraries like Undinci has already implemented it and Vercel already supports it. Finally!

This is great news since we can just add a new middleware: web(). This will just take in a standard Request and Headers.

Side note: AuthRequest.getCookie() might be something to consider

[ru-van-urk]

Whoa yes indeed, that is great news. A web() middleware would indeed be a nice solution.

I was already using AuthRequest.getCookie() and I have settled on it (for now):

    const cookie = authRequest.getCookie()?.serialize();
    return new Response(null, {
      status: 200,
      headers: { ...(cookie && { "set-cookie": cookie }) },
    });

In combination withe the before mentioned vercelEdge() middleware. I ended up setting the setCookie function to an empty function because I am not using a passed in response. Works for now.

I have a full working instance of Lucia with all of the endpoints working on Vercel's edge runtime. You have to think a bit different opposed to Lambda but it is do-able.