Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 17 commits into from
Mar 6, 2025

Conversation

brkalow
Copy link
Member

@brkalow brkalow commented Jan 27, 2025

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

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Copy link

changeset-bot bot commented Jan 27, 2025

🦋 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
Copy link
Member Author

brkalow commented Jan 27, 2025

!snapshot

Copy link

vercel bot commented Jan 27, 2025

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

@jacekradko
Copy link
Member

!snapshot

@clerk-cookie
Copy link
Collaborator

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

@brkalow brkalow marked this pull request as ready for review January 28, 2025 22:42
Co-authored-by: Jacek Radko <jacek@clerk.dev>
@@ -0,0 +1,5 @@
import { AES } from 'crypto-es/lib/aes';
Copy link
Member

@jacekradko jacekradko Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, good call

Comment on lines +7 to +14
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
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@brkalow
Copy link
Member Author

brkalow commented Jan 29, 2025

!snapshot

@clerk-cookie
Copy link
Collaborator

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

Copy link
Member

@LekoArts LekoArts left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@panteliselef
Copy link
Member

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

@brkalow 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
@panteliselef
Copy link
Member

!snapshot

@clerk-cookie
Copy link
Collaborator

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

@panteliselef panteliselef merged commit a83f614 into main Mar 6, 2025
30 checks passed
@panteliselef panteliselef deleted the brk.feat/vendor-crypto-js branch March 6, 2025 18:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

@clerk/nextjs encryption error on next@15 after upgrading to version 6.10.1
5 participants