Redirect based on cookie value

Support
1

I want to redirect (rewrite with a 200) to different locations based on the presence of a cookie. This is possible according to the docs. However, because you are redirecting based on the presence of a cookie and not the cookie’s value, I have to create two different cookies and redirect accordingly:

Example netlify.toml file:

[[redirects]]
  from = "/*"
  to = "/dir-1/:splat"
  status = 200
  force = true
  conditions = { Cookie = ["dir-1"] }

[[redirects]]
  from = "/*"
  to = "/dir-2/:splat"
  status = 200
  force = true
  conditions = { Cookie = ["dir-2"] }

The tricky part here is that I have to also unset cookies, because an incoming request could be have an old cookie on it, but from what I can tell, there’s no way to set two different set-cookie headers.

I’m not sure how to get around this issue. Redirecting based on a cookie’s value would make it so I could set/unset a single cookie with a different value each time, but AFAIK there’s no way to do this with netlify’s redirect rules.

Does this require something like using an edge function?

What I’m trying to do:

I want to be able to have netlify’s routing work as normal unless a particular cookie is present, in which case I want to be able to rewrite requests to a matching subdirectory based on the presence/value of that cookie.

Example project structure:

.
├── index.html
├── dir-1/
│   └── index.html
├── dir-2/
│   └── index.html

For all normal incoming requests to /, they should get served index.html.

A request to / with a cookie, such as dir=1, will get served dir-1/index.html

And a request to / with a cookie, such as dir=2, will get served dir-2/index.html

And I would need an endpoint that allows setting these, i.e. /cookies?dir=1 would set that cookie and /cookies?dir=2 would set that cookie.

This obviously requires stitching together the ability to do redirect/rewrites as well as setting cookies and I’m having trouble finding a way to do it with existing tools from netlify (short of trying the new deno edge functions, which presumably could do this?)

2

Hello @jimniels thanks for posting. Based on your question about using edge functions to set/unset cookies the answer is that it is possible for you to set/unset cookies using edge functions.
Example below.

JavaScript

export default async (request, context) => {
  // Delete a cookie
  context.cookies.delete("your cookie");
};

TypeScript

import type { Context } from "https://edge.netlify.com";

export default async (request: Request, context: Context) => {
  // Delete a cookie
  context.cookies.delete("your cookie");
};

You can learn more at Edge Functions overview | Netlify Docs and https://edge-functions-examples.netlify.app/

3

Getting/setting the cookie is only one part of the problem.

I still need logic to check for the presence & value of a cookie and conditionally rewrite the response. With edge functions, wouldn’t that mean I would need an edge function in front of every single request on my site? e.g. with the cookie dir=1, I need a request to / to rewrite to /dir-1/index.html. Similarly, a request for /some/deep/path/index.html needs to be rewritten to /dir-1/some/deep/path/index.html.

I’m not sure edge functions are the right full solution here, as I’d prefer to not have to not have to have an edge function in front of every single request on my site — although that does seem plausible — I’m having a hard time wrapping my head around the performance implications of such…

4

Thanks for the feedback @jimniels

Yes you are right. You will need the edge functions to handle the logic of setting and unsetting the cookies.

I’m not sure edge functions are the right full solution here

Based on your scenario your project will end up getting more complicated if you have different functions for just handling basic logic adding to overheads.

Not every scenario requires serverless with redirects configurations.

However instead of using the redirects configuration an alternative will be to use an Express application with Netlify functions.
Express allows you to run a Node.js backend that can enable you to do routing, redirects, setting/unsetting cookies, e.t.c easily.

Kindly check the link below to learn how to use Express framework with Netlify’s serverless functions

5

You can also easily handle routing inside an edge function. You can use Itty Router (originall designed for Cloudflare Workers) inside an edge function. I made a little test project (below) which you can see live here.

https://github.com/coelmay/itty-edge-api

1 Like
6

Thanks for the additional information @coelmay .