Use Web Crypto API for cookies and sessions (#11837)

Author: markdalgleish

.changeset/fast-plums-peel.md

@@ -0,0 +1,22 @@
+---
+"@react-router/architect": major
+"@react-router/cloudflare": major
+"@react-router/node": major
+"react-router": major
+---
+
+For Remix consumers migrating to React Router, the `crypto` global from the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is now required when using cookie and session APIs. This means that the following APIs are provided from `react-router` rather than platform-specific packages:
+
+- `createCookie`
+- `createCookieSessionStorage`
+- `createMemorySessionStorage`
+- `createSessionStorage`
+
+For consumers running older versions of Node, the `installGlobals` function from `@remix-run/node` has been updated to define `globalThis.crypto`, using [Node's `require('node:crypto').webcrypto` implementation.](https://nodejs.org/api/webcrypto.html)
+
+Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed:
+
+- `createCookieFactory`
+- `createSessionStorageFactory`
+- `createCookieSessionStorageFactory`
+- `createMemorySessionStorageFactory`

integration/set-cookie-revalidation-test.ts

@@ -18,7 +18,7 @@ test.describe("set-cookie revalidation", () => {
     fixture = await createFixture({
       files: {
         "app/session.server.ts": js`
-            import { createCookieSessionStorage } from "@react-router/node";
+            import { createCookieSessionStorage } from "react-router";
 
             export let MESSAGE_KEY = "message";
 
@@ -33,8 +33,8 @@ test.describe("set-cookie revalidation", () => {
           `,
 
         "app/root.tsx": js`
-            import { json } from "react-router";
             import {
+              json,
               Links,
               Meta,
               Outlet,

packages/react-router-architect/sessions/arcTableSessionStorage.ts

@@ -1,10 +1,9 @@
-import * as crypto from "node:crypto";
 import type {
   SessionData,
   SessionStorage,
   SessionIdStorageStrategy,
 } from "react-router";
-import { createSessionStorage } from "@react-router/node";
+import { createSessionStorage } from "react-router";
 import arc from "@architect/functions";
 import type { ArcTable } from "@architect/functions/types/tables";
 
@@ -64,7 +63,7 @@ export function createArcTableSessionStorage<
     async createData(data, expires) {
       let table = await getTable();
       while (true) {
-        let randomBytes = crypto.randomBytes(8);
+        let randomBytes = crypto.getRandomValues(new Uint8Array(8));
         // This storage manages an id space of 2^64 ids, which is far greater
         // than the maximum number of files allowed on an NTFS or ext4 volume
         // (2^32). However, the larger id space should help to avoid collisions

packages/react-router-cloudflare/crypto.ts

@@ -1,12 +1,5 @@
 export { createWorkersKVSessionStorage } from "./sessions/workersKVStorage";
 
-export {
-  createCookie,
-  createCookieSessionStorage,
-  createMemorySessionStorage,
-  createSessionStorage,
-} from "./implementations";
-
 export type {
   createPagesFunctionHandlerParams,
   GetLoadContextFunction,

packages/react-router-cloudflare/implementations.ts

@@ -3,8 +3,7 @@ import type {
   SessionIdStorageStrategy,
   SessionData,
 } from "react-router";
-
-import { createSessionStorage } from "../implementations";
+import { createSessionStorage } from "react-router";
 
 interface WorkersKVSessionStorageOptions {
   /**
@@ -36,8 +35,7 @@ export function createWorkersKVSessionStorage<
     cookie,
     async createData(data, expires) {
       while (true) {
-        let randomBytes = new Uint8Array(8);
-        crypto.getRandomValues(randomBytes);
+        let randomBytes = crypto.getRandomValues(new Uint8Array(8));
         // This storage manages an id space of 2^64 ids, which is far greater
         // than the maximum number of files allowed on an NTFS or ext4 volume
         // (2^32). However, the larger id space should help to avoid collisions

packages/react-router-cloudflare/index.ts

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import path from "node:path";
 import { promises as fsp } from "node:fs";
 import os from "node:os";

packages/react-router-cloudflare/sessions/workersKVStorage.ts

@@ -6,6 +6,7 @@ import {
   Request as NodeRequest,
   Response as NodeResponse,
 } from "undici";
+import { webcrypto as nodeWebCrypto } from "node:crypto";
 
 declare global {
   namespace NodeJS {
@@ -24,6 +25,8 @@ declare global {
 
       ReadableStream: typeof ReadableStream;
       WritableStream: typeof WritableStream;
+
+      crypto: typeof nodeWebCrypto;
     }
   }
 
@@ -44,4 +47,9 @@ export function installGlobals() {
   global.fetch = nodeFetch;
   // @ts-expect-error - overriding globals
   global.FormData = NodeFormData;
+
+  if (!global.crypto) {
+    // @ts-expect-error - overriding globals
+    global.crypto = nodeWebCrypto;
+  }
 }