fix(nextjs): replace crypto-js with crypto-es, precompile and inline #5024

brkalow · 2025-01-27T22:49:29Z

Description

Replaces our usage of crypto-js with crypto-es, and attempts to precompile our usage of the library. This addresses an issue we are seeing where in some cases the implementation of the crypto-js methods we are using were erroring when imported across different runtimes. This also reduces our dependency surface area.

fixes #4989

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-01-27T22:49:33Z

🦋 Changeset detected

Latest commit: 1b1447a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brkalow · 2025-01-27T22:49:33Z

!snapshot

vercel · 2025-01-27T22:49:33Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2025 5:57pm

packages/nextjs/tsup.config.ts

jacekradko · 2025-01-28T03:26:43Z

!snapshot

clerk-cookie · 2025-01-28T03:29:11Z

Hey @jacekradko - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	2.1.17-snapshot.v20250128032734
@clerk/backend	1.23.9-snapshot.v20250128032734
@clerk/chrome-extension	2.2.3-snapshot.v20250128032734
@clerk/clerk-js	5.50.1-snapshot.v20250128032734
@clerk/elements	0.22.17-snapshot.v20250128032734
@clerk/clerk-expo	2.7.1-snapshot.v20250128032734
@clerk/expo-passkeys	0.1.16-snapshot.v20250128032734
@clerk/express	1.3.44-snapshot.v20250128032734
@clerk/fastify	2.1.17-snapshot.v20250128032734
@clerk/localizations	3.10.2-snapshot.v20250128032734
@clerk/nextjs	6.10.4-snapshot.v20250128032734
@clerk/nuxt	1.0.13-snapshot.v20250128032734
@clerk/clerk-react	5.22.8-snapshot.v20250128032734
@clerk/react-router	1.0.3-snapshot.v20250128032734
@clerk/remix	4.4.19-snapshot.v20250128032734
@clerk/shared	2.20.16-snapshot.v20250128032734
@clerk/tanstack-start	0.8.18-snapshot.v20250128032734
@clerk/testing	1.4.17-snapshot.v20250128032734
@clerk/themes	2.2.14-snapshot.v20250128032734
@clerk/types	4.44.2-snapshot.v20250128032734
@clerk/ui	0.3.18-snapshot.v20250128032734
@clerk/vue	1.1.8-snapshot.v20250128032734

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@2.1.17-snapshot.v20250128032734 --save-exact

@clerk/backend

npm i @clerk/backend@1.23.9-snapshot.v20250128032734 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@2.2.3-snapshot.v20250128032734 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.50.1-snapshot.v20250128032734 --save-exact

@clerk/elements

npm i @clerk/elements@0.22.17-snapshot.v20250128032734 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.7.1-snapshot.v20250128032734 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@0.1.16-snapshot.v20250128032734 --save-exact

@clerk/express

npm i @clerk/express@1.3.44-snapshot.v20250128032734 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.1.17-snapshot.v20250128032734 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.10.2-snapshot.v20250128032734 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.10.4-snapshot.v20250128032734 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@1.0.13-snapshot.v20250128032734 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.22.8-snapshot.v20250128032734 --save-exact

@clerk/react-router

npm i @clerk/react-router@1.0.3-snapshot.v20250128032734 --save-exact

@clerk/remix

npm i @clerk/remix@4.4.19-snapshot.v20250128032734 --save-exact

@clerk/shared

npm i @clerk/shared@2.20.16-snapshot.v20250128032734 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.8.18-snapshot.v20250128032734 --save-exact

@clerk/testing

npm i @clerk/testing@1.4.17-snapshot.v20250128032734 --save-exact

@clerk/themes

npm i @clerk/themes@2.2.14-snapshot.v20250128032734 --save-exact

@clerk/types

npm i @clerk/types@4.44.2-snapshot.v20250128032734 --save-exact

@clerk/ui

npm i @clerk/ui@0.3.18-snapshot.v20250128032734 --save-exact

@clerk/vue

npm i @clerk/vue@1.1.8-snapshot.v20250128032734 --save-exact

packages/nextjs/src/vendor/README.md

packages/nextjs/tsup.config.ts

.changeset/rich-trees-smoke.md

Co-authored-by: Jacek Radko <jacek@clerk.dev>

jacekradko · 2025-01-29T01:26:22Z

packages/nextjs/src/vendor/crypto-js.js

@@ -0,0 +1,5 @@
+import { AES } from 'crypto-es/lib/aes';


Should we rename this file to crypto-es.js ?

Yeah, good call

packages/nextjs/src/vendor/README.md

panteliselef · 2025-01-29T08:19:37Z

packages/nextjs/src/server/keyless.ts

+async function hashString(str: string) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(str);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+  return hashHex.slice(0, 16); // Take only the first 16 characters
+}


The funny thing is that initially I did this with the web api, but switched to crypto-js for consistency.

packages/nextjs/src/vendor/README.md

brkalow · 2025-01-29T20:34:04Z

!snapshot

clerk-cookie · 2025-01-29T20:36:36Z

Hey @brkalow - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	2.1.17-snapshot.v20250129203459
@clerk/backend	1.23.9-snapshot.v20250129203459
@clerk/chrome-extension	2.2.3-snapshot.v20250129203459
@clerk/clerk-js	5.50.1-snapshot.v20250129203459
@clerk/elements	0.22.17-snapshot.v20250129203459
@clerk/clerk-expo	2.7.1-snapshot.v20250129203459
@clerk/expo-passkeys	0.1.16-snapshot.v20250129203459
@clerk/express	1.3.44-snapshot.v20250129203459
@clerk/fastify	2.1.17-snapshot.v20250129203459
@clerk/localizations	3.10.2-snapshot.v20250129203459
@clerk/nextjs	6.10.4-snapshot.v20250129203459
@clerk/nuxt	1.0.13-snapshot.v20250129203459
@clerk/clerk-react	5.22.8-snapshot.v20250129203459
@clerk/react-router	1.0.3-snapshot.v20250129203459
@clerk/remix	4.4.19-snapshot.v20250129203459
@clerk/shared	2.20.16-snapshot.v20250129203459
@clerk/tanstack-start	0.9.0-snapshot.v20250129203459
@clerk/testing	1.4.17-snapshot.v20250129203459
@clerk/themes	2.2.14-snapshot.v20250129203459
@clerk/types	4.44.2-snapshot.v20250129203459
@clerk/ui	0.3.18-snapshot.v20250129203459
@clerk/vue	1.1.8-snapshot.v20250129203459

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@2.1.17-snapshot.v20250129203459 --save-exact

@clerk/backend

npm i @clerk/backend@1.23.9-snapshot.v20250129203459 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@2.2.3-snapshot.v20250129203459 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.50.1-snapshot.v20250129203459 --save-exact

@clerk/elements

npm i @clerk/elements@0.22.17-snapshot.v20250129203459 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.7.1-snapshot.v20250129203459 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@0.1.16-snapshot.v20250129203459 --save-exact

@clerk/express

npm i @clerk/express@1.3.44-snapshot.v20250129203459 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.1.17-snapshot.v20250129203459 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.10.2-snapshot.v20250129203459 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.10.4-snapshot.v20250129203459 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@1.0.13-snapshot.v20250129203459 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.22.8-snapshot.v20250129203459 --save-exact

@clerk/react-router

npm i @clerk/react-router@1.0.3-snapshot.v20250129203459 --save-exact

@clerk/remix

npm i @clerk/remix@4.4.19-snapshot.v20250129203459 --save-exact

@clerk/shared

npm i @clerk/shared@2.20.16-snapshot.v20250129203459 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.9.0-snapshot.v20250129203459 --save-exact

@clerk/testing

npm i @clerk/testing@1.4.17-snapshot.v20250129203459 --save-exact

@clerk/themes

npm i @clerk/themes@2.2.14-snapshot.v20250129203459 --save-exact

@clerk/types

npm i @clerk/types@4.44.2-snapshot.v20250129203459 --save-exact

@clerk/ui

npm i @clerk/ui@0.3.18-snapshot.v20250129203459 --save-exact

@clerk/vue

npm i @clerk/vue@1.1.8-snapshot.v20250129203459 --save-exact

LekoArts

Looked at https://unpkg.com/browse/@clerk/nextjs@6.10.4-snapshot.v20250129203459/dist/esm/vendor/crypto-es.js -- seems fine 👍

panteliselef · 2025-02-03T08:01:08Z

Should the title of the PR be updated to reflect the changes ?

panteliselef · 2025-03-03T10:53:55Z

!snapshot

clerk-cookie · 2025-03-03T10:56:10Z

Hey @panteliselef - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.4-snapshot.v20250303105446
@clerk/astro	2.3.0-snapshot.v20250303105446
@clerk/backend	1.24.3-snapshot.v20250303105446
@clerk/chrome-extension	2.2.11-snapshot.v20250303105446
@clerk/clerk-js	5.54.0-snapshot.v20250303105446
@clerk/elements	0.23.0-snapshot.v20250303105446
@clerk/clerk-expo	2.8.0-snapshot.v20250303105446
@clerk/expo-passkeys	0.1.22-snapshot.v20250303105446
@clerk/express	1.3.50-snapshot.v20250303105446
@clerk/fastify	2.1.23-snapshot.v20250303105446
@clerk/localizations	3.10.8-snapshot.v20250303105446
@clerk/nextjs	6.12.1-snapshot.v20250303105446
@clerk/nuxt	1.2.1-snapshot.v20250303105446
@clerk/clerk-react	5.24.0-snapshot.v20250303105446
@clerk/react-router	1.1.1-snapshot.v20250303105446
@clerk/remix	4.5.1-snapshot.v20250303105446
@clerk/shared	3.0.0-snapshot.v20250303105446
@clerk/tanstack-start	0.10.1-snapshot.v20250303105446
@clerk/testing	1.4.24-snapshot.v20250303105446
@clerk/themes	2.2.20-snapshot.v20250303105446
@clerk/types	4.47.0-snapshot.v20250303105446
@clerk/ui	0.3.25-snapshot.v20250303105446
@clerk/vue	1.3.0-snapshot.v20250303105446

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.0.4-snapshot.v20250303105446 --save-exact

@clerk/astro

npm i @clerk/astro@2.3.0-snapshot.v20250303105446 --save-exact

@clerk/backend

npm i @clerk/backend@1.24.3-snapshot.v20250303105446 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@2.2.11-snapshot.v20250303105446 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.54.0-snapshot.v20250303105446 --save-exact

@clerk/elements

npm i @clerk/elements@0.23.0-snapshot.v20250303105446 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.8.0-snapshot.v20250303105446 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@0.1.22-snapshot.v20250303105446 --save-exact

@clerk/express

npm i @clerk/express@1.3.50-snapshot.v20250303105446 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.1.23-snapshot.v20250303105446 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.10.8-snapshot.v20250303105446 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.12.1-snapshot.v20250303105446 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@1.2.1-snapshot.v20250303105446 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.24.0-snapshot.v20250303105446 --save-exact

@clerk/react-router

npm i @clerk/react-router@1.1.1-snapshot.v20250303105446 --save-exact

@clerk/remix

npm i @clerk/remix@4.5.1-snapshot.v20250303105446 --save-exact

@clerk/shared

npm i @clerk/shared@3.0.0-snapshot.v20250303105446 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.10.1-snapshot.v20250303105446 --save-exact

@clerk/testing

npm i @clerk/testing@1.4.24-snapshot.v20250303105446 --save-exact

@clerk/themes

npm i @clerk/themes@2.2.20-snapshot.v20250303105446 --save-exact

@clerk/types

npm i @clerk/types@4.47.0-snapshot.v20250303105446 --save-exact

@clerk/ui

npm i @clerk/ui@0.3.25-snapshot.v20250303105446 --save-exact

@clerk/vue

npm i @clerk/vue@1.3.0-snapshot.v20250303105446 --save-exact

Attempt to inline crypto-js through pre-compiling

7ab5392

clerk-cookie added the nextjs label Jan 27, 2025

vercel bot deployed to Preview January 27, 2025 22:51 View deployment

jacekradko reviewed Jan 28, 2025

View reviewed changes

packages/nextjs/tsup.config.ts Outdated Show resolved Hide resolved

jacekradko reviewed Jan 28, 2025

View reviewed changes

packages/nextjs/tsup.config.ts Outdated Show resolved Hide resolved

tweaks

b617332

vercel bot deployed to Preview January 28, 2025 03:24 View deployment

Make next build tests more resilient

c04502a

clerk-cookie added the integration label Jan 28, 2025

vercel bot deployed to Preview January 28, 2025 17:08 View deployment

Migrate to crypto-es

42df740

brkalow commented Jan 28, 2025

View reviewed changes

packages/nextjs/src/vendor/README.md Outdated Show resolved Hide resolved

packages/nextjs/tsup.config.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

bd22175

vercel bot temporarily deployed to Preview January 28, 2025 21:25 Inactive

Migrate keyless to use web crypto APIs

5b0a6bd

vercel bot temporarily deployed to Preview January 28, 2025 21:35 Inactive

remove usage in tests

abf039a

vercel bot temporarily deployed to Preview January 28, 2025 22:37 Inactive

Merge branch 'main' into brk.feat/vendor-crypto-js

28983a1

brkalow marked this pull request as ready for review January 28, 2025 22:42

vercel bot deployed to Preview January 28, 2025 22:44 View deployment

jacekradko reviewed Jan 29, 2025

View reviewed changes

.changeset/rich-trees-smoke.md Outdated Show resolved Hide resolved

Update rich-trees-smoke.md

4bc6ea6

Co-authored-by: Jacek Radko <jacek@clerk.dev>

jacekradko reviewed Jan 29, 2025

View reviewed changes

vercel bot deployed to Preview January 29, 2025 01:27 View deployment

vercel bot deployed to Preview January 29, 2025 03:31 View deployment

Rename crypto-js -> crypto-es

5da61e1

vercel bot temporarily deployed to Preview January 29, 2025 03:32 Inactive

panteliselef approved these changes Jan 29, 2025

View reviewed changes

brkalow commented Jan 29, 2025

View reviewed changes

packages/nextjs/src/vendor/README.md Outdated Show resolved Hide resolved

Update packages/nextjs/src/vendor/README.md

c5f0a06

vercel bot temporarily deployed to Preview January 29, 2025 16:40 Inactive

Merge branch 'main' into brk.feat/vendor-crypto-js

eb6cad5

vercel bot deployed to Preview January 29, 2025 16:42 View deployment

LekoArts approved these changes Jan 30, 2025

View reviewed changes

This was referenced Feb 5, 2025

[BUG] Clerk: Error: Clerk: Unable to decrypt request data, this usually means the encryption key is invalid. opennextjs/opennextjs-cloudflare#281

Closed

bump packages and use clerk snapshot jenslys/clerk-opennext-bug#2

Open

brkalow changed the title ~~fix(nextjs): Attempt to inline crypto-js through pre-compiling~~ fix(nextjs): replace crypto-js with crypto-es, precompile and inline Feb 25, 2025

Merge branch 'main' into brk.feat/vendor-crypto-js

aff0d1c

vercel bot deployed to Preview February 25, 2025 17:00 View deployment

Merge branch 'main' into brk.feat/vendor-crypto-js

5997997

vercel bot deployed to Preview February 25, 2025 22:18 View deployment

add missing await

0616f1c

vercel bot temporarily deployed to Preview February 25, 2025 22:35 Inactive

panteliselef mentioned this pull request Mar 3, 2025

@clerk/nextjs encryption error on next@15 after upgrading to version 6.10.1 #4989

Closed

4 tasks

Merge branch 'main' into brk.feat/vendor-crypto-js

1b1447a

vercel bot deployed to Preview March 6, 2025 17:57 View deployment

panteliselef merged commit a83f614 into main Mar 6, 2025
30 checks passed

panteliselef deleted the brk.feat/vendor-crypto-js branch March 6, 2025 18:35

clerk-cookie mentioned this pull request Mar 6, 2025

ci(repo): Version packages #5293

Merged

Uh oh!

fix(nextjs): replace crypto-js with crypto-es, precompile and inline #5024

fix(nextjs): replace crypto-js with crypto-es, precompile and inline #5024

Uh oh!

Conversation

brkalow commented Jan 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot bot commented Jan 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

brkalow commented Jan 27, 2025

Uh oh!

vercel bot commented Jan 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jacekradko commented Jan 28, 2025

Uh oh!

clerk-cookie commented Jan 28, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jacekradko Jan 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brkalow Jan 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

panteliselef Jan 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

brkalow commented Jan 29, 2025

Uh oh!

clerk-cookie commented Jan 29, 2025

Uh oh!

LekoArts left a comment

Choose a reason for hiding this comment

Uh oh!

panteliselef commented Feb 3, 2025

Uh oh!

panteliselef commented Mar 3, 2025

Uh oh!

clerk-cookie commented Mar 3, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

brkalow commented Jan 27, 2025 •

edited

Loading

changeset-bot bot commented Jan 27, 2025 •

edited

Loading

vercel bot commented Jan 27, 2025 •

edited

Loading

jacekradko Jan 29, 2025 •

edited

Loading