Universal Store: Don't use crypto.randomUUID

[JReinhold]

What I did

In browsers, window.crypto is only available in secure contexts, meaning HTTPS or localhost, so if users visited their Storyboooks in HTTP but not localhost, it would fail.

We don't care about the security, we just need a random ID.

https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Based on the provided information, I'll create a concise summary of the changes in this PR:

Replaced crypto.randomUUID() with a simpler timestamp-based ID generation in UniversalStore to support non-secure contexts.

• Changed actor ID generation in code/core/src/shared/universal-store/index.ts to use Date.now() and Math.random() in base36
• Updated test suite in index.test.ts to use deterministic IDs with mocked date and random values
• Ensures compatibility with HTTP environments where window.crypto is unavailable
• Maintains unique ID generation while removing secure context requirement
• Test coverage validates the new ID generation approach works as expected

The change is focused and necessary for broader browser compatibility, particularly for Storybook instances served over HTTP without localhost.

PR Overview

This PR removes the use of crypto.randomUUID in the UniversalStore in favor of a fallback UUID generation strategy that avoids secure context restrictions in browsers.

• Removed crypto.randomUUID usage from the store constructor
• Updated unit tests to expect the new deterministic actor IDs based on Date.now and Math.random

Reviewed Changes

File	Description
code/core/src/shared/universal-store/index.test.ts	Updated mocks and actor ID expectations to match the new fallback values
code/core/src/shared/universal-store/index.ts	Replaced crypto.randomUUID() with a fallback using Date.now and Math.random

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (1)

code/core/src/shared/universal-store/index.test.ts:84

• [nitpick] The test expectation uses a hard-coded actor ID that depends on mocked Date and Math.random. Consider computing the expected value dynamically using the same algorithm from the implementation to reduce brittleness if the generation logic changes.

expect(store.actor.id).toBe('m7405c003lllllllllm');

[greptile-apps]

LGTM

_{2 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 27012fe.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 55s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-03-10 08:03:17 UTC