handle cookies with more control

app/cookies.server.js

@@ -0,0 +1,14 @@
+// https://remix.run/docs/en/1.19.3/utils/cookies
+import { createCookie } from "@remix-run/node"; // or cloudflare/deno
+
+export function cookieHandler(key) {
+  const userPrefs = createCookie(key, {
+    domain: process.env.COOKIE_DOMAIN,
+    path: process.env.COOKIE_PATH,
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: process.env.COOKIE_SAME_SITE,
+    secrets: [process.env.SESSION_SECRET],
+  });
+  return userPrefs;
+}

app/routes/_index.jsx

@@ -57,6 +57,12 @@ export default function Index() {
             <li>
               <Link to="session-delete">Example: Delete Session</Link>
             </li>
+            <li>
+              <Link to="cookie-set">Example: Set Cookie</Link>
+            </li>
+            <li>
+              <Link to="cookie-delete">Example: Delete Cookie</Link>
+            </li>
             <li>
               <Link to="status">Remote API Status [GET]</Link>
             </li>

app/routes/cookie-delete.jsx

@@ -0,0 +1,51 @@
+// example: how to delete cookies
+import { Form, Link } from "@remix-run/react";
+import { redirect } from "@remix-run/node";
+
+import { cookieHandler } from "~/cookies.server";
+
+export const action = async ({ request }) => {
+  let headers = new Headers();
+  const cookieHeader = request.headers.get("Cookie");
+
+  const userPrefs1 = cookieHandler("test1");
+  const cookie1 = (await userPrefs1.parse(cookieHeader)) || {};
+  if (Object.keys(cookie1).length !== 0) {
+    headers.append(
+      "Set-Cookie",
+      await userPrefs1.serialize(cookie1, { maxAge: -1 })
+    );
+  }
+
+  const userPrefs2 = cookieHandler("test2");
+  const cookie2 = (await userPrefs2.parse(cookieHeader)) || {};
+  if (Object.keys(cookie2).length !== 0) {
+    headers.append(
+      "Set-Cookie",
+      await userPrefs2.serialize(cookie2, { maxAge: -1 })
+    );
+  }
+
+  return redirect("/cookie-set", { headers });
+};
+
+export default function CookieDeleteRoute() {
+  return (
+    <>
+      <div className="container-sm">
+        <div className="row">
+          <div className="col-sm-4"></div>
+          <h3>Delete demo cookie?</h3>
+          <Form method="post">
+            <div className="mb-2">
+              <button type="submit" className="btn btn-danger">
+                Delete Cookie
+              </button>
+            </div>
+          </Form>
+          <Link to="/">Never mind</Link>
+        </div>
+      </div>
+    </>
+  );
+}

app/routes/cookie-set.jsx

@@ -0,0 +1,56 @@
+// example: how to set cookies
+import { Form, Link } from "@remix-run/react";
+import { redirect } from "@remix-run/node";
+
+import { cookieHandler } from "~/cookies.server";
+
+export const action = async ({ request }) => {
+  const cookieHeader = request.headers.get("Cookie");
+
+  const userPrefs1 = cookieHandler("test1");
+  const cookie1 = (await userPrefs1.parse(cookieHeader)) || {};
+  cookie1.customKey1 = "customValue1";
+  cookie1.customKey2 = "customValue2";
+  cookie1.customKey3 = "customValue3";
+
+  const userPrefs2 = cookieHandler("test2");
+  const cookie2 = (await userPrefs2.parse(cookieHeader)) || {};
+  cookie2.customKey1 = "customValue4";
+  cookie2.customKey2 = "customValue5";
+  cookie2.customKey3 = "customValue6";
+
+  let headers = new Headers();
+  headers.append(
+    "Set-Cookie",
+    await userPrefs1.serialize(cookie1, { maxAge: 300 })
+  );
+  headers.append(
+    "Set-Cookie",
+    await userPrefs2.serialize(cookie2, { maxAge: 600 })
+  );
+
+  return redirect("/cookie-delete", {
+    headers,
+  });
+};
+
+export default function CookieSetRoute() {
+  return (
+    <>
+      <div className="container-sm">
+        <div className="row">
+          <div className="col-sm-4"></div>
+          <h3>Set demo cookie?</h3>
+          <Form method="post">
+            <div className="mb-2">
+              <button type="submit" className="btn btn-success">
+                Set Cookie
+              </button>
+            </div>
+          </Form>
+          <Link to="/">Never mind</Link>
+        </div>
+      </div>
+    </>
+  );
+}