Module Middleware/Rolling Cookie

This depends on zod, and React Router.

The rolling cookie middleware allows you to prolong the expiration of a cookie by updating the expiration date on every request.

First, create a rolling cookie middleware instance:

import { unstable_createRollingCookieMiddleware } from "remix-utils/middleware/rolling-cookie";

// This must be a Cookie or TypedCookie instance
import { cookie } from "~/cookies";

export const [rollingCookieMiddleware] = unstable_createRollingCookieMiddleware(
  { cookie }
);
Copy

Then, add the rollingCookieMiddleware to the unstable_middleware array in your app/root.tsx file.

import { rollingCookieMiddleware } from "~/middleware/rolling-cookie.server";

export const unstable_middleware = [rollingCookieMiddleware];
Copy

Now, every request will have the cookie updated with a new expiration date.

If you set the same cookie in your own loaders or actions, the middleware will detect this and do nothing, so you can use the middleware and set the cookie in your own code without worrying about it.