Fallback for randomUUID when not available (non secure context) (#472)

Author: Marcosld

.changeset/khaki-items-marry.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Fallback for randomUUID when not available in development (i.e. non secure context)

cypress/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "types": ["cypress", "@testing-library/cypress"],
+    "types": ["cypress", "@testing-library/cypress", "@types/node"],
     "isolatedModules": false
   },
   "include": [

src/contexts/StoreContext.tsx

@@ -22,6 +22,7 @@ import {
 } from '../configModules/themes';
 import availableWidths, { type Widths } from '../configModules/widths';
 import { isValidLocation } from '../utils/cursor';
+import { fallbackUuid } from '../utils/fallbackUuid';
 import { formatForInsertion, formatAndInsert } from '../utils/formatting';
 import {
   getDataParam,
@@ -189,7 +190,10 @@ const sortStoredPlayrooms = (storedPlayrooms: State['storedPlayrooms']) =>
     )
   );
 
-const createPlayroomId = () => self.crypto.randomUUID();
+const createPlayroomId = () =>
+  !self.crypto.randomUUID && process.env.NODE_ENV === 'development'
+    ? fallbackUuid()
+    : self.crypto.randomUUID();
 
 const reducer = (state: State, action: Action): State => {
   switch (action.type) {

src/utils/fallbackUuid.ts

@@ -0,0 +1,8 @@
+/** Generate a UUID: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid/2117523#2117523 */
+export const fallbackUuid = () =>
+  '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
+    (
+      Number(c) ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))
+    ).toString(16)
+  );