fix: support for express-json-cookies

Author: SKairinos

package.json

@@ -118,6 +118,11 @@
       "import": "./dist/utils/auth.es.js",
       "require": "./dist/utils/auth.cjs.js"
     },
+    "./utils/cookies": {
+      "types": "./dist/utils/cookies.d.ts",
+      "import": "./dist/utils/cookies.es.js",
+      "require": "./dist/utils/cookies.cjs.js"
+    },
     "./utils/form": {
       "types": "./dist/utils/form.d.ts",
       "import": "./dist/utils/form.es.js",

src/server/entry/client.tsx

@@ -20,7 +20,7 @@ import {
 } from "./common"
 import DefaultRoutes from "../DefaultRoutes"
 
-export function client({
+export default function client({
   App,
   routes,
   catchAllRoute = DEFAULT_CATCH_ALL,

src/server/entry/server.tsx

@@ -23,7 +23,7 @@ import {
 import DefaultRoutes from "../DefaultRoutes"
 import packageJson from "../../../package.json"
 
-export async function server({
+export default async function server({
   App,
   routes,
   catchAllRoute = DEFAULT_CATCH_ALL,

src/utils/auth.ts

@@ -1,4 +1,4 @@
-import Cookies from "js-cookie"
+import cookies from "../utils/cookies"
 
 import {
   getCsrfCookieName,
@@ -8,13 +8,13 @@ import {
 import { generateSecureRandomString } from "./general"
 
 export function logout() {
-  Cookies.remove(getSessionCookieName())
-  Cookies.remove(getSessionMetadataCookieName())
+  cookies.remove(getSessionCookieName())
+  cookies.remove(getSessionMetadataCookieName())
 }
 
 // https://docs.djangoproject.com/en/3.2/ref/csrf/
 export function getCsrfCookie() {
-  return Cookies.get(getCsrfCookieName())
+  return cookies.get(getCsrfCookieName()) as string | undefined
 }
 
 export function makeOAuth2StorageKey(provider: string, key: string) {

src/utils/cookies.test.ts

@@ -0,0 +1,48 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import Cookies from "js-cookie"
+
+import ExpressCookies from "./cookies"
+
+function testCookie(
+  value: any,
+  {
+    name = "name",
+    path = "/",
+    setValue,
+    getValue,
+  }: {
+    name?: string
+    path?: string
+    setValue?: string
+    getValue?: any
+  } = {},
+) {
+  const cookieValue = ExpressCookies.set(name, value)
+  setValue = setValue ?? String(value)
+  setValue = Cookies.converter.write(setValue, name)
+  expect(cookieValue).toBe(`${name}=${setValue}; path=${path}`)
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const actualValue = ExpressCookies.get(name)
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  getValue = getValue ?? value
+  expect(typeof actualValue).toEqual(typeof getValue)
+}
+
+test("round-trips an object as a Express JSON cookie", () => {
+  const value = { key: "value" }
+  testCookie(value, { setValue: `j:${JSON.stringify(value)}` })
+})
+
+test("round-trips an array as a Express JSON cookie", () => {
+  const value = [1, 2, 3]
+  testCookie(value, { setValue: `j:${JSON.stringify(value)}` })
+})
+
+test("returns plain string cookies as-is", () => {
+  testCookie("plain-text")
+})
+
+test("does not mark JSON primitives as Express JSON cookies", () => {
+  testCookie(42, { getValue: "42" })
+})

src/utils/cookies.ts

@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import Cookies from "js-cookie"
+
+const EXPRESS_JSON_PREFIX = "j:"
+
+/**
+ * A wrapper around js-cookie that supports Express-style JSON cookies. See:
+ * https://github.com/js-cookie/js-cookie/blob/main/SERVER_SIDE.md#express
+ */
+const ExpressCookies = Cookies.withConverter<any>({
+  write: (value, name) => {
+    const stringValue =
+      typeof value === "object" && value !== null
+        ? EXPRESS_JSON_PREFIX + JSON.stringify(value as object)
+        : String(value)
+
+    return Cookies.converter.write(stringValue, name)
+  },
+  read: (cookieValue, name) => {
+    const stringValue = Cookies.converter.read(cookieValue, name)
+
+    return stringValue.startsWith(EXPRESS_JSON_PREFIX)
+      ? (JSON.parse(stringValue.slice(EXPRESS_JSON_PREFIX.length)) as object)
+      : stringValue
+  },
+})
+
+export default ExpressCookies

vite.config.ts

@@ -94,6 +94,7 @@ const viteConfig = defineConfig({
         "theme/components/index.ts",
         "utils/api.tsx",
         "utils/auth.ts",
+        "utils/cookies.ts",
         "utils/form.ts",
         "utils/general.ts",
         "utils/router.ts",