From 82c33cb6c73421fb1afeec2931bb630ce959559f Mon Sep 17 00:00:00 2001 From: Clerk Cookie <136073014+clerk-cookie@users.noreply.github.com> Date: Thu, 23 May 2024 11:13:24 -0400 Subject: [PATCH 01/11] ci(repo): Version packages (#3421) Co-authored-by: github-actions[bot] --- .changeset/clean-kings-brake.md | 6 -- .changeset/great-parents-invent.md | 5 -- .changeset/hot-phones-serve.md | 7 -- .changeset/light-swans-decide.md | 2 - .changeset/sharp-apples-think.md | 5 -- .changeset/small-frogs-march.md | 5 -- package-lock.json | 96 +++++++++++------------ packages/backend/CHANGELOG.md | 7 ++ packages/backend/package.json | 4 +- packages/chrome-extension/CHANGELOG.md | 9 +++ packages/chrome-extension/package.json | 8 +- packages/clerk-js/CHANGELOG.md | 10 +++ packages/clerk-js/package.json | 6 +- packages/elements/CHANGELOG.md | 6 ++ packages/elements/package.json | 6 +- packages/expo/CHANGELOG.md | 9 +++ packages/expo/package.json | 8 +- packages/express/CHANGELOG.md | 8 ++ packages/express/package.json | 6 +- packages/fastify/CHANGELOG.md | 8 ++ packages/fastify/package.json | 6 +- packages/gatsby-plugin-clerk/package.json | 6 +- packages/localizations/CHANGELOG.md | 6 ++ packages/localizations/package.json | 2 +- packages/nextjs/CHANGELOG.md | 13 +++ packages/nextjs/package.json | 8 +- packages/react/CHANGELOG.md | 9 +++ packages/react/package.json | 4 +- packages/remix/CHANGELOG.md | 9 +++ packages/remix/package.json | 8 +- packages/sdk-node/CHANGELOG.md | 8 ++ packages/sdk-node/package.json | 6 +- packages/shared/CHANGELOG.md | 8 ++ packages/shared/package.json | 2 +- packages/testing/CHANGELOG.md | 7 ++ packages/testing/package.json | 4 +- 36 files changed, 207 insertions(+), 120 deletions(-) delete mode 100644 .changeset/clean-kings-brake.md delete mode 100644 .changeset/great-parents-invent.md delete mode 100644 .changeset/hot-phones-serve.md delete mode 100644 .changeset/light-swans-decide.md delete mode 100644 .changeset/sharp-apples-think.md delete mode 100644 .changeset/small-frogs-march.md diff --git a/.changeset/clean-kings-brake.md b/.changeset/clean-kings-brake.md deleted file mode 100644 index e0f62d24d6..0000000000 --- a/.changeset/clean-kings-brake.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@clerk/clerk-js': patch -'@clerk/shared': patch ---- - -Add a custom logger to allow logging a message or warning to the console once per session, in order to avoid consecutive identical logs due to component rerenders. diff --git a/.changeset/great-parents-invent.md b/.changeset/great-parents-invent.md deleted file mode 100644 index 55d818986e..0000000000 --- a/.changeset/great-parents-invent.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@clerk/localizations': patch ---- - -Review PT-BR localization: Adds missing keys, fixes some typos diff --git a/.changeset/hot-phones-serve.md b/.changeset/hot-phones-serve.md deleted file mode 100644 index 4fdc4f3c1a..0000000000 --- a/.changeset/hot-phones-serve.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@clerk/nextjs": patch -"@clerk/clerk-react": patch -"@clerk/shared": patch ---- - -With the next major release, NextJS@15 will depend on `react` and `react-dom` v19, which is still in beta. We are updating our peer dependencies accordingly in order to accept `react` and `react-dom` @ `19.0.0-beta` diff --git a/.changeset/light-swans-decide.md b/.changeset/light-swans-decide.md deleted file mode 100644 index a845151cc8..0000000000 --- a/.changeset/light-swans-decide.md +++ /dev/null @@ -1,2 +0,0 @@ ---- ---- diff --git a/.changeset/sharp-apples-think.md b/.changeset/sharp-apples-think.md deleted file mode 100644 index 49759a90a7..0000000000 --- a/.changeset/sharp-apples-think.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@clerk/elements': patch ---- - -Update FieldError/GlobalError types to allow render function children while using the asChild prop diff --git a/.changeset/small-frogs-march.md b/.changeset/small-frogs-march.md deleted file mode 100644 index 713b46e757..0000000000 --- a/.changeset/small-frogs-march.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@clerk/nextjs': patch ---- - -Utilize an awaitable replace function internally to avoid race conditions when using `router.replace`. diff --git a/package-lock.json b/package-lock.json index ef95a8e06c..3f7e98f894 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38890,10 +38890,10 @@ }, "packages/backend": { "name": "@clerk/backend", - "version": "1.2.0", + "version": "1.2.1", "license": "MIT", "dependencies": { - "@clerk/shared": "2.2.0", + "@clerk/shared": "2.2.1", "cookie": "0.5.0", "snakecase-keys": "5.4.4", "tslib": "2.4.1" @@ -39007,12 +39007,12 @@ }, "packages/chrome-extension": { "name": "@clerk/chrome-extension", - "version": "1.0.13", + "version": "1.0.14", "license": "MIT", "dependencies": { - "@clerk/clerk-js": "5.5.0", - "@clerk/clerk-react": "5.2.0", - "@clerk/shared": "2.2.0", + "@clerk/clerk-js": "5.5.1", + "@clerk/clerk-react": "5.2.1", + "@clerk/shared": "2.2.1", "webextension-polyfill": "^0.10.0" }, "devDependencies": { @@ -39056,11 +39056,11 @@ }, "packages/clerk-js": { "name": "@clerk/clerk-js", - "version": "5.5.0", + "version": "5.5.1", "license": "MIT", "dependencies": { - "@clerk/localizations": "2.4.2", - "@clerk/shared": "2.2.0", + "@clerk/localizations": "2.4.3", + "@clerk/shared": "2.2.1", "@clerk/types": "4.5.0", "@emotion/cache": "11.11.0", "@emotion/react": "11.11.1", @@ -39609,7 +39609,7 @@ }, "packages/elements": { "name": "@clerk/elements", - "version": "0.4.6", + "version": "0.4.7", "license": "MIT", "dependencies": { "@radix-ui/react-form": "^0.0.3", @@ -39620,9 +39620,9 @@ "xstate": "^5.13.0" }, "devDependencies": { - "@clerk/clerk-react": "5.2.0", + "@clerk/clerk-react": "5.2.1", "@clerk/eslint-config-custom": "*", - "@clerk/shared": "2.2.0", + "@clerk/shared": "2.2.1", "@clerk/types": "^4.5.0", "@types/node": "^18.17.0", "@types/react": "*", @@ -40067,12 +40067,12 @@ }, "packages/expo": { "name": "@clerk/clerk-expo", - "version": "1.1.5", + "version": "1.1.6", "license": "MIT", "dependencies": { - "@clerk/clerk-js": "5.5.0", - "@clerk/clerk-react": "5.2.0", - "@clerk/shared": "2.2.0", + "@clerk/clerk-js": "5.5.1", + "@clerk/clerk-react": "5.2.1", + "@clerk/shared": "2.2.1", "base-64": "^1.0.0", "react-native-url-polyfill": "2.0.0", "tslib": "2.4.1" @@ -40175,11 +40175,11 @@ }, "packages/express": { "name": "@clerk/express", - "version": "0.0.9", + "version": "0.0.10", "license": "MIT", "dependencies": { - "@clerk/backend": "^1.2.0", - "@clerk/shared": "^2.2.0", + "@clerk/backend": "^1.2.1", + "@clerk/shared": "^2.2.1", "tslib": "2.4.1" }, "devDependencies": { @@ -40203,11 +40203,11 @@ }, "packages/fastify": { "name": "@clerk/fastify", - "version": "1.0.10", + "version": "1.0.11", "license": "MIT", "dependencies": { - "@clerk/backend": "1.2.0", - "@clerk/shared": "2.2.0", + "@clerk/backend": "1.2.1", + "@clerk/shared": "2.2.1", "@clerk/types": "4.5.0", "cookies": "0.8.0" }, @@ -40229,9 +40229,9 @@ "version": "5.0.0-beta.45", "license": "MIT", "dependencies": { - "@clerk/backend": "1.2.0", - "@clerk/clerk-react": "5.2.0", - "@clerk/clerk-sdk-node": "5.0.8", + "@clerk/backend": "1.2.1", + "@clerk/clerk-react": "5.2.1", + "@clerk/clerk-sdk-node": "5.0.9", "cookie": "0.5.0", "tslib": "2.4.1" }, @@ -40256,7 +40256,7 @@ }, "packages/localizations": { "name": "@clerk/localizations", - "version": "2.4.2", + "version": "2.4.3", "license": "MIT", "devDependencies": { "@clerk/eslint-config-custom": "*", @@ -40270,12 +40270,12 @@ }, "packages/nextjs": { "name": "@clerk/nextjs", - "version": "5.1.0", + "version": "5.1.1", "license": "MIT", "dependencies": { - "@clerk/backend": "1.2.0", - "@clerk/clerk-react": "5.2.0", - "@clerk/shared": "2.2.0", + "@clerk/backend": "1.2.1", + "@clerk/clerk-react": "5.2.1", + "@clerk/shared": "2.2.1", "crypto-js": "4.2.0", "path-to-regexp": "6.2.1", "tslib": "2.4.1" @@ -40295,8 +40295,8 @@ }, "peerDependencies": { "next": "^13.5.4 || ^14.0.3", - "react": ">=18", - "react-dom": ">=18" + "react": ">=18 || >=19.0.0-beta", + "react-dom": ">=18 || >=19.0.0-beta" } }, "packages/nextjs/node_modules/@next/env": { @@ -40506,10 +40506,10 @@ }, "packages/react": { "name": "@clerk/clerk-react", - "version": "5.2.0", + "version": "5.2.1", "license": "MIT", "dependencies": { - "@clerk/shared": "2.2.0", + "@clerk/shared": "2.2.1", "@clerk/types": "4.5.0", "tslib": "2.4.1" }, @@ -40526,8 +40526,8 @@ "node": ">=18.17.0" }, "peerDependencies": { - "react": ">=18", - "react-dom": ">=18" + "react": ">=18 || >=19.0.0-beta", + "react-dom": ">=18 || >=19.0.0-beta" } }, "packages/react/node_modules/tslib": { @@ -40536,12 +40536,12 @@ }, "packages/remix": { "name": "@clerk/remix", - "version": "4.0.11", + "version": "4.0.12", "license": "MIT", "dependencies": { - "@clerk/backend": "1.2.0", - "@clerk/clerk-react": "5.2.0", - "@clerk/shared": "2.2.0", + "@clerk/backend": "1.2.1", + "@clerk/clerk-react": "5.2.1", + "@clerk/shared": "2.2.1", "cookie": "0.5.0", "tslib": "2.4.1" }, @@ -40572,11 +40572,11 @@ }, "packages/sdk-node": { "name": "@clerk/clerk-sdk-node", - "version": "5.0.8", + "version": "5.0.9", "license": "MIT", "dependencies": { - "@clerk/backend": "1.2.0", - "@clerk/shared": "2.2.0", + "@clerk/backend": "1.2.1", + "@clerk/shared": "2.2.1", "tslib": "2.4.1" }, "devDependencies": { @@ -40600,7 +40600,7 @@ }, "packages/shared": { "name": "@clerk/shared", - "version": "2.2.0", + "version": "2.2.1", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -40623,8 +40623,8 @@ "node": ">=18.17.0" }, "peerDependencies": { - "react": ">=18", - "react-dom": ">=18" + "react": ">=18 || >=19.0.0-beta", + "react-dom": ">=18 || >=19.0.0-beta" }, "peerDependenciesMeta": { "react": { @@ -40645,10 +40645,10 @@ }, "packages/testing": { "name": "@clerk/testing", - "version": "1.1.3", + "version": "1.1.4", "license": "MIT", "dependencies": { - "@clerk/shared": "2.2.0", + "@clerk/shared": "2.2.1", "@clerk/types": "4.5.0", "dotenv": "16.4.5" }, diff --git a/packages/backend/CHANGELOG.md b/packages/backend/CHANGELOG.md index 937ee57dc6..1cbb75bd2c 100644 --- a/packages/backend/CHANGELOG.md +++ b/packages/backend/CHANGELOG.md @@ -1,5 +1,12 @@ # Change Log +## 1.2.1 + +### Patch Changes + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/shared@2.2.1 + ## 1.2.0 ### Minor Changes diff --git a/packages/backend/package.json b/packages/backend/package.json index d0ac28102e..880d8442e8 100644 --- a/packages/backend/package.json +++ b/packages/backend/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/backend", - "version": "1.2.0", + "version": "1.2.1", "description": "Clerk Backend SDK - REST Client for Backend API & JWT verification utilities", "homepage": "https://clerk.com/", "bugs": { @@ -95,7 +95,7 @@ "test:cloudflare-workerd": "tests/cloudflare-workerd/run.sh" }, "dependencies": { - "@clerk/shared": "2.2.0", + "@clerk/shared": "2.2.1", "cookie": "0.5.0", "snakecase-keys": "5.4.4", "tslib": "2.4.1" diff --git a/packages/chrome-extension/CHANGELOG.md b/packages/chrome-extension/CHANGELOG.md index e912050140..3148ebfab4 100644 --- a/packages/chrome-extension/CHANGELOG.md +++ b/packages/chrome-extension/CHANGELOG.md @@ -1,5 +1,14 @@ # Change Log +## 1.0.14 + +### Patch Changes + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/clerk-js@5.5.1 + - @clerk/shared@2.2.1 + - @clerk/clerk-react@5.2.1 + ## 1.0.13 ### Patch Changes diff --git a/packages/chrome-extension/package.json b/packages/chrome-extension/package.json index cc8d30c799..715ac863cc 100644 --- a/packages/chrome-extension/package.json +++ b/packages/chrome-extension/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/chrome-extension", - "version": "1.0.13", + "version": "1.0.14", "description": "Clerk SDK for Chrome extensions", "keywords": [ "auth", @@ -44,9 +44,9 @@ "test:coverage": "jest --collectCoverage && open coverage/lcov-report/index.html" }, "dependencies": { - "@clerk/clerk-js": "5.5.0", - "@clerk/clerk-react": "5.2.0", - "@clerk/shared": "2.2.0", + "@clerk/clerk-js": "5.5.1", + "@clerk/clerk-react": "5.2.1", + "@clerk/shared": "2.2.1", "webextension-polyfill": "^0.10.0" }, "devDependencies": { diff --git a/packages/clerk-js/CHANGELOG.md b/packages/clerk-js/CHANGELOG.md index 3195de2ef6..ae7f11a684 100644 --- a/packages/clerk-js/CHANGELOG.md +++ b/packages/clerk-js/CHANGELOG.md @@ -1,5 +1,15 @@ # Change Log +## 5.5.1 + +### Patch Changes + +- Add a custom logger to allow logging a message or warning to the console once per session, in order to avoid consecutive identical logs due to component rerenders. ([#3383](https://github.com/clerk/javascript/pull/3383)) by [@desiprisg](https://github.com/desiprisg) + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`8e5969d82`](https://github.com/clerk/javascript/commit/8e5969d82818c333d5459e5c70eb626d0968eb66), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/shared@2.2.1 + - @clerk/localizations@2.4.3 + ## 5.5.0 ### Minor Changes diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json index bc430aedc9..9da6d6e2dc 100644 --- a/packages/clerk-js/package.json +++ b/packages/clerk-js/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/clerk-js", - "version": "5.5.0", + "version": "5.5.1", "description": "Clerk JS library", "keywords": [ "clerk", @@ -50,8 +50,8 @@ }, "browserslist": "last 2 versions, ios_saf > 12, Safari > 12, > 1%, not dead, not ie > 0", "dependencies": { - "@clerk/localizations": "2.4.2", - "@clerk/shared": "2.2.0", + "@clerk/localizations": "2.4.3", + "@clerk/shared": "2.2.1", "@clerk/types": "4.5.0", "@emotion/cache": "11.11.0", "@emotion/react": "11.11.1", diff --git a/packages/elements/CHANGELOG.md b/packages/elements/CHANGELOG.md index ba2cb3ad98..28024fd6fb 100644 --- a/packages/elements/CHANGELOG.md +++ b/packages/elements/CHANGELOG.md @@ -1,5 +1,11 @@ # @clerk/elements +## 0.4.7 + +### Patch Changes + +- Update FieldError/GlobalError types to allow render function children while using the asChild prop ([#3426](https://github.com/clerk/javascript/pull/3426)) by [@tmilewski](https://github.com/tmilewski) + ## 0.4.6 ## 0.4.5 diff --git a/packages/elements/package.json b/packages/elements/package.json index 2e790bfe9e..c68f9ce76e 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/elements", - "version": "0.4.6", + "version": "0.4.7", "description": "Clerk Elements", "keywords": [ "clerk", @@ -77,9 +77,9 @@ "xstate": "^5.13.0" }, "devDependencies": { - "@clerk/clerk-react": "5.2.0", + "@clerk/clerk-react": "5.2.1", "@clerk/eslint-config-custom": "*", - "@clerk/shared": "2.2.0", + "@clerk/shared": "2.2.1", "@clerk/types": "^4.5.0", "@types/node": "^18.17.0", "@types/react": "*", diff --git a/packages/expo/CHANGELOG.md b/packages/expo/CHANGELOG.md index f2295cb635..c6dded898c 100644 --- a/packages/expo/CHANGELOG.md +++ b/packages/expo/CHANGELOG.md @@ -1,5 +1,14 @@ # Change Log +## 1.1.6 + +### Patch Changes + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/clerk-js@5.5.1 + - @clerk/shared@2.2.1 + - @clerk/clerk-react@5.2.1 + ## 1.1.5 ### Patch Changes diff --git a/packages/expo/package.json b/packages/expo/package.json index 10a70d6353..778962ab53 100644 --- a/packages/expo/package.json +++ b/packages/expo/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/clerk-expo", - "version": "1.1.5", + "version": "1.1.6", "description": "Clerk React Native/Expo library", "keywords": [ "react", @@ -39,9 +39,9 @@ "publish:local": "npx yalc push --replace --sig" }, "dependencies": { - "@clerk/clerk-js": "5.5.0", - "@clerk/clerk-react": "5.2.0", - "@clerk/shared": "2.2.0", + "@clerk/clerk-js": "5.5.1", + "@clerk/clerk-react": "5.2.1", + "@clerk/shared": "2.2.1", "base-64": "^1.0.0", "react-native-url-polyfill": "2.0.0", "tslib": "2.4.1" diff --git a/packages/express/CHANGELOG.md b/packages/express/CHANGELOG.md index d68c330ce6..e8e5954e5a 100644 --- a/packages/express/CHANGELOG.md +++ b/packages/express/CHANGELOG.md @@ -1,5 +1,13 @@ # Change Log +## 0.0.10 + +### Patch Changes + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/shared@2.2.1 + - @clerk/backend@1.2.1 + ## 0.0.9 ### Patch Changes diff --git a/packages/express/package.json b/packages/express/package.json index 9bb4520db8..37860f03db 100644 --- a/packages/express/package.json +++ b/packages/express/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/express", - "version": "0.0.9", + "version": "0.0.10", "description": "Clerk server SDK for usage with Express", "keywords": [ "clerk", @@ -53,8 +53,8 @@ "test:ci": "jest --maxWorkers=70%" }, "dependencies": { - "@clerk/backend": "^1.2.0", - "@clerk/shared": "^2.2.0", + "@clerk/backend": "^1.2.1", + "@clerk/shared": "^2.2.1", "tslib": "2.4.1" }, "devDependencies": { diff --git a/packages/fastify/CHANGELOG.md b/packages/fastify/CHANGELOG.md index 379d4a1ddc..c765e969a7 100644 --- a/packages/fastify/CHANGELOG.md +++ b/packages/fastify/CHANGELOG.md @@ -1,5 +1,13 @@ # Change Log +## 1.0.11 + +### Patch Changes + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/shared@2.2.1 + - @clerk/backend@1.2.1 + ## 1.0.10 ### Patch Changes diff --git a/packages/fastify/package.json b/packages/fastify/package.json index 2d3e6b5c12..06d09444bd 100644 --- a/packages/fastify/package.json +++ b/packages/fastify/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/fastify", - "version": "1.0.10", + "version": "1.0.11", "description": "Clerk SDK for Fastify", "keywords": [ "auth", @@ -40,8 +40,8 @@ "test:cache:clear": "jest --clearCache --useStderr" }, "dependencies": { - "@clerk/backend": "1.2.0", - "@clerk/shared": "2.2.0", + "@clerk/backend": "1.2.1", + "@clerk/shared": "2.2.1", "@clerk/types": "4.5.0", "cookies": "0.8.0" }, diff --git a/packages/gatsby-plugin-clerk/package.json b/packages/gatsby-plugin-clerk/package.json index ef0f73be28..e98f6b140e 100644 --- a/packages/gatsby-plugin-clerk/package.json +++ b/packages/gatsby-plugin-clerk/package.json @@ -44,9 +44,9 @@ "publish:local": "npx yalc push --replace --sig" }, "dependencies": { - "@clerk/backend": "1.2.0", - "@clerk/clerk-react": "5.2.0", - "@clerk/clerk-sdk-node": "5.0.8", + "@clerk/backend": "1.2.1", + "@clerk/clerk-react": "5.2.1", + "@clerk/clerk-sdk-node": "5.0.9", "cookie": "0.5.0", "tslib": "2.4.1" }, diff --git a/packages/localizations/CHANGELOG.md b/packages/localizations/CHANGELOG.md index 9a7c51d9ba..7475171430 100644 --- a/packages/localizations/CHANGELOG.md +++ b/packages/localizations/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 2.4.3 + +### Patch Changes + +- Review PT-BR localization: Adds missing keys, fixes some typos ([#3412](https://github.com/clerk/javascript/pull/3412)) by [@danilofuchs](https://github.com/danilofuchs) + ## 2.4.2 ### Patch Changes diff --git a/packages/localizations/package.json b/packages/localizations/package.json index d4d4f7820b..a2ad612843 100644 --- a/packages/localizations/package.json +++ b/packages/localizations/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/localizations", - "version": "2.4.2", + "version": "2.4.3", "description": "Localizations for the Clerk components", "keywords": [ "react", diff --git a/packages/nextjs/CHANGELOG.md b/packages/nextjs/CHANGELOG.md index 0f0e99a626..cb1b5408f7 100644 --- a/packages/nextjs/CHANGELOG.md +++ b/packages/nextjs/CHANGELOG.md @@ -1,5 +1,18 @@ # Change Log +## 5.1.1 + +### Patch Changes + +- With the next major release, NextJS@15 will depend on `react` and `react-dom` v19, which is still in beta. We are updating our peer dependencies accordingly in order to accept `react` and `react-dom` @ `19.0.0-beta` ([#3428](https://github.com/clerk/javascript/pull/3428)) by [@nikosdouvlis](https://github.com/nikosdouvlis) + +- Utilize an awaitable replace function internally to avoid race conditions when using `router.replace`. ([#3416](https://github.com/clerk/javascript/pull/3416)) by [@desiprisg](https://github.com/desiprisg) + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/shared@2.2.1 + - @clerk/clerk-react@5.2.1 + - @clerk/backend@1.2.1 + ## 5.1.0 ### Minor Changes diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index 2612004ca1..4eaf5f76ea 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/nextjs", - "version": "5.1.0", + "version": "5.1.1", "description": "Clerk SDK for NextJS", "keywords": [ "clerk", @@ -67,9 +67,9 @@ "test:ci": "jest --maxWorkers=70%" }, "dependencies": { - "@clerk/backend": "1.2.0", - "@clerk/clerk-react": "5.2.0", - "@clerk/shared": "2.2.0", + "@clerk/backend": "1.2.1", + "@clerk/clerk-react": "5.2.1", + "@clerk/shared": "2.2.1", "crypto-js": "4.2.0", "path-to-regexp": "6.2.1", "tslib": "2.4.1" diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index f6bf3b5f64..99f6c235d3 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,14 @@ # Change Log +## 5.2.1 + +### Patch Changes + +- With the next major release, NextJS@15 will depend on `react` and `react-dom` v19, which is still in beta. We are updating our peer dependencies accordingly in order to accept `react` and `react-dom` @ `19.0.0-beta` ([#3428](https://github.com/clerk/javascript/pull/3428)) by [@nikosdouvlis](https://github.com/nikosdouvlis) + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/shared@2.2.1 + ## 5.2.0 ### Minor Changes diff --git a/packages/react/package.json b/packages/react/package.json index 7637234d00..398d51e4a3 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/clerk-react", - "version": "5.2.0", + "version": "5.2.1", "description": "Clerk React library", "keywords": [ "clerk", @@ -76,7 +76,7 @@ "test:ci": "jest --maxWorkers=70%" }, "dependencies": { - "@clerk/shared": "2.2.0", + "@clerk/shared": "2.2.1", "@clerk/types": "4.5.0", "tslib": "2.4.1" }, diff --git a/packages/remix/CHANGELOG.md b/packages/remix/CHANGELOG.md index c811970bc4..e6c456f3fc 100644 --- a/packages/remix/CHANGELOG.md +++ b/packages/remix/CHANGELOG.md @@ -1,5 +1,14 @@ # Change Log +## 4.0.12 + +### Patch Changes + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/shared@2.2.1 + - @clerk/clerk-react@5.2.1 + - @clerk/backend@1.2.1 + ## 4.0.11 ### Patch Changes diff --git a/packages/remix/package.json b/packages/remix/package.json index cee8ab817b..cf73940555 100644 --- a/packages/remix/package.json +++ b/packages/remix/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/remix", - "version": "4.0.11", + "version": "4.0.12", "description": "Clerk SDK for Remix", "keywords": [ "clerk", @@ -73,9 +73,9 @@ "publish:local": "npx yalc push --replace --sig" }, "dependencies": { - "@clerk/backend": "1.2.0", - "@clerk/clerk-react": "5.2.0", - "@clerk/shared": "2.2.0", + "@clerk/backend": "1.2.1", + "@clerk/clerk-react": "5.2.1", + "@clerk/shared": "2.2.1", "cookie": "0.5.0", "tslib": "2.4.1" }, diff --git a/packages/sdk-node/CHANGELOG.md b/packages/sdk-node/CHANGELOG.md index 3370bc6bdc..b8b3e77671 100644 --- a/packages/sdk-node/CHANGELOG.md +++ b/packages/sdk-node/CHANGELOG.md @@ -1,5 +1,13 @@ # Change Log +## 5.0.9 + +### Patch Changes + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/shared@2.2.1 + - @clerk/backend@1.2.1 + ## 5.0.8 ### Patch Changes diff --git a/packages/sdk-node/package.json b/packages/sdk-node/package.json index cd5328a64d..41a5333135 100644 --- a/packages/sdk-node/package.json +++ b/packages/sdk-node/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/clerk-sdk-node", - "version": "5.0.8", + "version": "5.0.9", "description": "Clerk server SDK for usage with node", "keywords": [ "clerk", @@ -53,8 +53,8 @@ "test:ci": "jest --maxWorkers=70%" }, "dependencies": { - "@clerk/backend": "1.2.0", - "@clerk/shared": "2.2.0", + "@clerk/backend": "1.2.1", + "@clerk/shared": "2.2.1", "tslib": "2.4.1" }, "devDependencies": { diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md index 35ad4706f0..30f1a6a718 100644 --- a/packages/shared/CHANGELOG.md +++ b/packages/shared/CHANGELOG.md @@ -1,5 +1,13 @@ # Change Log +## 2.2.1 + +### Patch Changes + +- Add a custom logger to allow logging a message or warning to the console once per session, in order to avoid consecutive identical logs due to component rerenders. ([#3383](https://github.com/clerk/javascript/pull/3383)) by [@desiprisg](https://github.com/desiprisg) + +- With the next major release, NextJS@15 will depend on `react` and `react-dom` v19, which is still in beta. We are updating our peer dependencies accordingly in order to accept `react` and `react-dom` @ `19.0.0-beta` ([#3428](https://github.com/clerk/javascript/pull/3428)) by [@nikosdouvlis](https://github.com/nikosdouvlis) + ## 2.2.0 ### Minor Changes diff --git a/packages/shared/package.json b/packages/shared/package.json index d3e58ebe22..bbcaa6b873 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/shared", - "version": "2.2.0", + "version": "2.2.1", "description": "Internal package utils used by the Clerk SDKs", "repository": { "type": "git", diff --git a/packages/testing/CHANGELOG.md b/packages/testing/CHANGELOG.md index e22a72fc69..e84dd412dc 100644 --- a/packages/testing/CHANGELOG.md +++ b/packages/testing/CHANGELOG.md @@ -1,5 +1,12 @@ # @clerk/testing +## 1.1.4 + +### Patch Changes + +- Updated dependencies [[`ff31f7255`](https://github.com/clerk/javascript/commit/ff31f725541d82caaa9c13cf42cf15f8ce3992f4), [`0e48fc210`](https://github.com/clerk/javascript/commit/0e48fc210cf0b5852052a21494a05f6e723101f5)]: + - @clerk/shared@2.2.1 + ## 1.1.3 ### Patch Changes diff --git a/packages/testing/package.json b/packages/testing/package.json index a31d2f395f..a1e0f0877f 100644 --- a/packages/testing/package.json +++ b/packages/testing/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/testing", - "version": "1.1.3", + "version": "1.1.4", "description": "Utilities to help you create E2E test suites for apps using Clerk", "keywords": [ "auth", @@ -62,7 +62,7 @@ "lint": "eslint src/" }, "dependencies": { - "@clerk/shared": "2.2.0", + "@clerk/shared": "2.2.1", "@clerk/types": "4.5.0", "dotenv": "16.4.5" }, From 373880b77ecb13d2d572c28e2ad71b96b4a97f29 Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Thu, 23 May 2024 18:43:51 +0300 Subject: [PATCH 02/11] fix(nextjs): Allow next@15.0.0-rc as a peer dependency --- .changeset/spicy-pots-help.md | 5 +++++ packages/nextjs/package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/spicy-pots-help.md diff --git a/.changeset/spicy-pots-help.md b/.changeset/spicy-pots-help.md new file mode 100644 index 0000000000..7586b550fb --- /dev/null +++ b/.changeset/spicy-pots-help.md @@ -0,0 +1,5 @@ +--- +'@clerk/nextjs': patch +--- + +Allow next@15.0.0-rc as a peer dependency diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index 4eaf5f76ea..590897982e 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -85,7 +85,7 @@ "typescript": "*" }, "peerDependencies": { - "next": "^13.5.4 || ^14.0.3", + "next": "^13.5.4 || ^14.0.3 || >=15.0.0-rc", "react": ">=18 || >=19.0.0-beta", "react-dom": ">=18 || >=19.0.0-beta" }, From a534faa782bf4f4b36c7cc1e248be3db523514bd Mon Sep 17 00:00:00 2001 From: Clerk Cookie <136073014+clerk-cookie@users.noreply.github.com> Date: Thu, 23 May 2024 11:51:40 -0400 Subject: [PATCH 03/11] ci(repo): Version packages (#3436) Co-authored-by: github-actions[bot] --- .changeset/spicy-pots-help.md | 5 ----- package-lock.json | 4 ++-- packages/nextjs/CHANGELOG.md | 6 ++++++ packages/nextjs/package.json | 2 +- 4 files changed, 9 insertions(+), 8 deletions(-) delete mode 100644 .changeset/spicy-pots-help.md diff --git a/.changeset/spicy-pots-help.md b/.changeset/spicy-pots-help.md deleted file mode 100644 index 7586b550fb..0000000000 --- a/.changeset/spicy-pots-help.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@clerk/nextjs': patch ---- - -Allow next@15.0.0-rc as a peer dependency diff --git a/package-lock.json b/package-lock.json index 3f7e98f894..7f51de81f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40270,7 +40270,7 @@ }, "packages/nextjs": { "name": "@clerk/nextjs", - "version": "5.1.1", + "version": "5.1.2", "license": "MIT", "dependencies": { "@clerk/backend": "1.2.1", @@ -40294,7 +40294,7 @@ "node": ">=18.17.0" }, "peerDependencies": { - "next": "^13.5.4 || ^14.0.3", + "next": "^13.5.4 || ^14.0.3 || >=15.0.0-rc", "react": ">=18 || >=19.0.0-beta", "react-dom": ">=18 || >=19.0.0-beta" } diff --git a/packages/nextjs/CHANGELOG.md b/packages/nextjs/CHANGELOG.md index cb1b5408f7..2e9e88b256 100644 --- a/packages/nextjs/CHANGELOG.md +++ b/packages/nextjs/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 5.1.2 + +### Patch Changes + +- Allow next@15.0.0-rc as a peer dependency by [@nikosdouvlis](https://github.com/nikosdouvlis) + ## 5.1.1 ### Patch Changes diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index 590897982e..5779b0192e 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/nextjs", - "version": "5.1.1", + "version": "5.1.2", "description": "Clerk SDK for NextJS", "keywords": [ "clerk", From e7ab2379d1091c2d06ea72c9a34dbcbff272c92d Mon Sep 17 00:00:00 2001 From: Tom Milewski Date: Thu, 23 May 2024 15:57:15 -0400 Subject: [PATCH 04/11] feat(elements): Add & refactor inspectors (#3424) --- .changeset/khaki-starfishes-allow.md | 7 ++ package-lock.json | 21 +++-- packages/elements/package.json | 11 +-- .../internals/machines/form/form.context.ts | 4 +- .../src/internals/utils/inspector/browser.ts | 85 ------------------- .../utils/inspector/browser/index.ts | 19 +++++ .../utils/inspector/{ => console}/console.ts | 0 .../utils/inspector/console/index.ts | 17 ++++ .../src/internals/utils/inspector/index.ts | 21 +++-- packages/elements/src/react/hooks/index.ts | 1 - .../react/hooks/use-browser-inspector.hook.ts | 3 - packages/elements/src/react/sign-in/root.tsx | 4 +- packages/elements/src/react/sign-up/root.tsx | 4 +- packages/elements/src/types/globals.d.ts | 7 ++ packages/elements/tsup.config.ts | 2 +- 15 files changed, 93 insertions(+), 113 deletions(-) create mode 100644 .changeset/khaki-starfishes-allow.md delete mode 100644 packages/elements/src/internals/utils/inspector/browser.ts create mode 100644 packages/elements/src/internals/utils/inspector/browser/index.ts rename packages/elements/src/internals/utils/inspector/{ => console}/console.ts (100%) create mode 100644 packages/elements/src/internals/utils/inspector/console/index.ts delete mode 100644 packages/elements/src/react/hooks/use-browser-inspector.hook.ts create mode 100644 packages/elements/src/types/globals.d.ts diff --git a/.changeset/khaki-starfishes-allow.md b/.changeset/khaki-starfishes-allow.md new file mode 100644 index 0000000000..3a2c7d1050 --- /dev/null +++ b/.changeset/khaki-starfishes-allow.md @@ -0,0 +1,7 @@ +--- +'@clerk/elements': minor +--- + +- Adds Stately's Browser Inspector in development builds +- Removes `@statelyai/inspect` from dependencies +- Ensures all inspector-related code is omitted from the build diff --git a/package-lock.json b/package-lock.json index 7f51de81f1..4455366129 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15981,6 +15981,7 @@ "version": "3.0.5", "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz", "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==", + "dev": true, "dependencies": { "is-what": "^4.1.8" }, @@ -20466,6 +20467,7 @@ }, "node_modules/fast-safe-stringify": { "version": "2.1.1", + "dev": true, "license": "MIT" }, "node_modules/fast-uri": { @@ -24816,6 +24818,7 @@ "version": "4.1.16", "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz", "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==", + "dev": true, "engines": { "node": ">=12.13" }, @@ -24873,7 +24876,9 @@ }, "node_modules/isomorphic-ws": { "version": "5.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz", + "integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==", + "dev": true, "peerDependencies": { "ws": "*" } @@ -30580,6 +30585,7 @@ "version": "0.0.25", "resolved": "https://registry.npmjs.org/partysocket/-/partysocket-0.0.25.tgz", "integrity": "sha512-1oCGA65fydX/FgdnsiBh68buOvfxuteoZVSb3Paci2kRp/7lhF0HyA8EDb5X/O6FxId1e+usPTQNRuzFEvkJbQ==", + "dev": true, "dependencies": { "event-target-shim": "^6.0.2" } @@ -30588,6 +30594,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-6.0.2.tgz", "integrity": "sha512-8q3LsZjRezbFZ2PN+uP+Q7pnHUMmAOziU2vA2OwoFaKIXxlxl38IylhSSgUorWu/rf4er67w0ikBqjBFk/pomA==", + "dev": true, "engines": { "node": ">=10.13.0" }, @@ -35180,6 +35187,7 @@ "version": "1.13.3", "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.13.3.tgz", "integrity": "sha512-mJiVjfd2vokfDxsQPOwJ/PtanO87LhpYY88ubI5dUB1Ab58Txbyje3+jpm+/83R/fevaq/107NNhtYBLuoTrFg==", + "dev": true, "dependencies": { "copy-anything": "^3.0.2" }, @@ -38502,6 +38510,7 @@ }, "node_modules/ws": { "version": "8.13.0", + "dev": true, "license": "MIT", "engines": { "node": ">=10.0.0" @@ -39614,7 +39623,6 @@ "dependencies": { "@radix-ui/react-form": "^0.0.3", "@radix-ui/react-slot": "^1.0.2", - "@statelyai/inspect": "^0.3.0", "@xstate/react": "^4.1.1", "client-only": "^0.0.1", "xstate": "^5.13.0" @@ -39624,6 +39632,7 @@ "@clerk/eslint-config-custom": "*", "@clerk/shared": "2.2.1", "@clerk/types": "^4.5.0", + "@statelyai/inspect": "^0.3.1", "@types/node": "^18.17.0", "@types/react": "*", "@types/react-dom": "*", @@ -39668,9 +39677,10 @@ } }, "packages/elements/node_modules/@statelyai/inspect": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@statelyai/inspect/-/inspect-0.3.0.tgz", - "integrity": "sha512-Fusho7ZTX5HjA0yPZVcz503exezNLIZo0pz3RdrjbJ/etAhP0GFeXcI5jdjYcxEmo0iYKX1uCybn74tyjGu/cw==", + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@statelyai/inspect/-/inspect-0.3.1.tgz", + "integrity": "sha512-KW3owf5UbPs1+/xOGJoSV4D69hP5xTX7PCzARr2R1senwfUIwyGP8yEsB8dvkMvekYvgFS0qa6lmg1eszYr2tw==", + "dev": true, "dependencies": { "fast-safe-stringify": "^2.1.1", "isomorphic-ws": "^5.0.0", @@ -39827,6 +39837,7 @@ "version": "9.0.1", "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "dev": true, "funding": [ "https://github.com/sponsors/broofa", "https://github.com/sponsors/ctavan" diff --git a/packages/elements/package.json b/packages/elements/package.json index c68f9ce76e..78c49828f3 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -55,12 +55,13 @@ "app:dev": "(cd examples/nextjs && npm run dev --turbo)", "app:dev:debug": "(cd examples/nextjs && NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG=true npm run dev --turbo)", "app:dev:debug:server": "(cd examples/nextjs && NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG=true CLERK_ELEMENTS_DEBUG_SERVER=true npm run dev --turbo)", + "app:dev:debug:ui": "(cd examples/nextjs && NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG_UI=true npm run dev --turbo)", "app:e2e": "(cd examples/nextjs && npm run e2e)", "app:lint": "(cd examples/nextjs && npm run lint)", - "build": "tsup", - "build:analyze": "tsup --metafile; open https://esbuild.github.io/analyze/", - "build:declarations": "tsc -p tsconfig.json", - "dev": "tsup --watch", + "build": "tsup --env.NODE_ENV production", + "build:analyze": "tsup --env.NODE_ENV production --metafile; open https://esbuild.github.io/analyze/", + "build:declarations": "tsc --env.NODE_ENV production -p tsconfig.json", + "dev": "tsup --env.NODE_ENV development --watch", "dev:example": "concurrently \"npm run dev\" \"npm run app:dev\"", "lint": "eslint src/", "lint:attw": "attw --pack .", @@ -71,7 +72,6 @@ "dependencies": { "@radix-ui/react-form": "^0.0.3", "@radix-ui/react-slot": "^1.0.2", - "@statelyai/inspect": "^0.3.0", "@xstate/react": "^4.1.1", "client-only": "^0.0.1", "xstate": "^5.13.0" @@ -81,6 +81,7 @@ "@clerk/eslint-config-custom": "*", "@clerk/shared": "2.2.1", "@clerk/types": "^4.5.0", + "@statelyai/inspect": "^0.3.1", "@types/node": "^18.17.0", "@types/react": "*", "@types/react-dom": "*", diff --git a/packages/elements/src/internals/machines/form/form.context.ts b/packages/elements/src/internals/machines/form/form.context.ts index 0d9d093246..7517c89924 100644 --- a/packages/elements/src/internals/machines/form/form.context.ts +++ b/packages/elements/src/internals/machines/form/form.context.ts @@ -2,11 +2,11 @@ import { createActorContext } from '@xstate/react'; import type { SnapshotFrom } from 'xstate'; import { FormMachine } from '~/internals/machines/form'; -import { consoleInspector } from '~/internals/utils/inspector'; +import { inspect } from '~/internals/utils/inspector'; export type SnapshotState = SnapshotFrom; -const FormMachineContext = createActorContext(FormMachine, { inspect: consoleInspector }); +const FormMachineContext = createActorContext(FormMachine, { inspect }); export const FormStoreProvider = FormMachineContext.Provider; export const useFormStore = FormMachineContext.useActorRef; diff --git a/packages/elements/src/internals/utils/inspector/browser.ts b/packages/elements/src/internals/utils/inspector/browser.ts deleted file mode 100644 index 9f11aa4cf1..0000000000 --- a/packages/elements/src/internals/utils/inspector/browser.ts +++ /dev/null @@ -1,85 +0,0 @@ -import type { StatelyInspectionEvent } from '@statelyai/inspect'; -import { useEffect, useState } from 'react'; - -export interface InspectorOptions { - filter?: (event: StatelyInspectionEvent) => boolean; - serialize?: (event: StatelyInspectionEvent) => StatelyInspectionEvent; - /** - * Whether to automatically start the inspector. - * - * @default true - */ - autoStart?: boolean; -} - -export interface BrowserInspectorOptions extends InspectorOptions { - url?: string; - window?: Window; - iframe?: HTMLIFrameElement | null; -} - -/** - * Stately Browser Inspector - * - * Used for debugging state machines in the browser. These hooks are used internally to conditionally - * enable the state inspector in client-only development environments. - * - * @param params.enabled - Whether to enable the inspector (or `NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG=true`) - * @param params.options - Options for the inspector - * - * @example - * const { useBrowserInspector } = createBrowserInspectorReactHook(); - * const { loading: inspectorLoading, inspector } = useBrowserInspector(); - * - * @returns useBrowserInspector - A hook for using the inspector - */ -export function createBrowserInspectorReactHook(params?: { enabled?: boolean; options?: BrowserInspectorOptions }) { - const { enabled = process.env.NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG === 'true', options } = params || {}; - const loadable = typeof window !== 'undefined'; - let storedInspector: any; - - function useDisabledBrowserInspector() { - return { - loading: false, - inspector: undefined, - }; - } - - function useEnabledBrowserInspector() { - const [inspector, setInspector] = useState(storedInspector || undefined); // TODO: No relevant types exported from statelyai/inspect - - useEffect(() => { - if (inspector) return; - - const getInspector = async () => { - const { createBrowserInspector } = (await import('@statelyai/inspect')).default; - return createBrowserInspector(options); - }; - - getInspector() - .then(res => { - storedInspector = res; - setInspector(res); - }) - .catch(console.error); - }, [inspector]); - - return { - /** - * Whether the inspector is loading. - * Will be `false` if the inspector is disabled. - */ - loading: !inspector, - /** - * The inspector instance. - * Will be `undefined` if the inspector is disabled. - * @see https://stately.ai/docs/inspector - */ - inspector, - }; - } - - return { - useBrowserInspector: !loadable || !enabled ? useDisabledBrowserInspector : useEnabledBrowserInspector, - }; -} diff --git a/packages/elements/src/internals/utils/inspector/browser/index.ts b/packages/elements/src/internals/utils/inspector/browser/index.ts new file mode 100644 index 0000000000..ba3d0ff2d0 --- /dev/null +++ b/packages/elements/src/internals/utils/inspector/browser/index.ts @@ -0,0 +1,19 @@ +import { isTruthy } from '@clerk/shared/underscore'; +import { createBrowserInspector } from '@statelyai/inspect'; + +export const getInspector = () => { + if ( + __DEV__ && + typeof window !== 'undefined' && + process.env.NODE_ENV === 'development' && + isTruthy(process.env.NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG_UI ?? process.env.CLERK_ELEMENTS_DEBUG_UI) + ) { + const { inspect } = createBrowserInspector({ + autoStart: true, + }); + + return inspect; + } + + return undefined; +}; diff --git a/packages/elements/src/internals/utils/inspector/console.ts b/packages/elements/src/internals/utils/inspector/console/console.ts similarity index 100% rename from packages/elements/src/internals/utils/inspector/console.ts rename to packages/elements/src/internals/utils/inspector/console/console.ts diff --git a/packages/elements/src/internals/utils/inspector/console/index.ts b/packages/elements/src/internals/utils/inspector/console/index.ts new file mode 100644 index 0000000000..62385651a6 --- /dev/null +++ b/packages/elements/src/internals/utils/inspector/console/index.ts @@ -0,0 +1,17 @@ +import { isTruthy } from '@clerk/shared/underscore'; + +import { createConsoleInspector } from './console'; + +export function getInspector() { + if ( + __DEV__ && + process.env.NODE_ENV === 'development' && + isTruthy(process.env.NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG ?? process.env.CLERK_ELEMENTS_DEBUG) + ) { + return createConsoleInspector({ + enabled: true, + debugServer: isTruthy(process.env.CLERK_ELEMENTS_DEBUG_SERVER), + }); + } + return undefined; +} diff --git a/packages/elements/src/internals/utils/inspector/index.ts b/packages/elements/src/internals/utils/inspector/index.ts index 00bf6e8982..8ff89fbdd3 100644 --- a/packages/elements/src/internals/utils/inspector/index.ts +++ b/packages/elements/src/internals/utils/inspector/index.ts @@ -1,9 +1,16 @@ -import { isTruthy } from '@clerk/shared/underscore'; +import type { InspectionEvent, Observer } from 'xstate'; -export { createBrowserInspectorReactHook } from './browser'; -import { createConsoleInspector } from './console'; +import { getInspector as getBrowserInspector } from './browser'; +import { getInspector as getConsoleInspector } from './console'; -export const consoleInspector = createConsoleInspector({ - enabled: isTruthy(process.env.NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG ?? process.env.CLERK_ELEMENTS_DEBUG), - debugServer: isTruthy(process.env.CLERK_ELEMENTS_DEBUG_SERVER), -}); +export let inspect: Observer | undefined; + +if (__DEV__) { + inspect = getBrowserInspector() ?? getConsoleInspector(); +} + +const inspector = { + inspect, +}; + +export default inspector; diff --git a/packages/elements/src/react/hooks/index.ts b/packages/elements/src/react/hooks/index.ts index c000eaba5c..3b8850d87b 100644 --- a/packages/elements/src/react/hooks/index.ts +++ b/packages/elements/src/react/hooks/index.ts @@ -1,5 +1,4 @@ export { useActiveStates } from './use-active-states.hook'; export { useActiveTags } from './use-active-tags.hook'; -export { useBrowserInspector } from './use-browser-inspector.hook'; export { useThirdPartyProvider } from './use-third-party-provider.hook'; export { useFocus } from './use-focus.hook'; diff --git a/packages/elements/src/react/hooks/use-browser-inspector.hook.ts b/packages/elements/src/react/hooks/use-browser-inspector.hook.ts deleted file mode 100644 index 9f99a86d43..0000000000 --- a/packages/elements/src/react/hooks/use-browser-inspector.hook.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { createBrowserInspectorReactHook } from '~/internals/utils/inspector'; - -export const { useBrowserInspector } = createBrowserInspectorReactHook(); diff --git a/packages/elements/src/react/sign-in/root.tsx b/packages/elements/src/react/sign-in/root.tsx index 1d12978205..ad0dc420cc 100644 --- a/packages/elements/src/react/sign-in/root.tsx +++ b/packages/elements/src/react/sign-in/root.tsx @@ -7,7 +7,7 @@ import { SIGN_IN_DEFAULT_BASE_PATH, SIGN_UP_DEFAULT_BASE_PATH } from '~/internal import { FormStoreProvider, useFormStore } from '~/internals/machines/form/form.context'; import type { SignInRouterInitEvent } from '~/internals/machines/sign-in'; import { SignInRouterMachine } from '~/internals/machines/sign-in'; -import { consoleInspector } from '~/internals/utils/inspector'; +import { inspect } from '~/internals/utils/inspector'; import { Router, useClerkRouter, useNextRouter } from '~/react/router'; import { SignInRouterCtx } from '~/react/sign-in/context'; @@ -18,7 +18,7 @@ type SignInFlowProviderProps = { exampleMode?: boolean; }; -const actor = createActor(SignInRouterMachine, { inspect: consoleInspector }); +const actor = createActor(SignInRouterMachine, { inspect }); actor.start(); function SignInFlowProvider({ children, exampleMode }: SignInFlowProviderProps) { diff --git a/packages/elements/src/react/sign-up/root.tsx b/packages/elements/src/react/sign-up/root.tsx index bf2c9c198e..0eea9bf0df 100644 --- a/packages/elements/src/react/sign-up/root.tsx +++ b/packages/elements/src/react/sign-up/root.tsx @@ -8,7 +8,7 @@ import { SIGN_IN_DEFAULT_BASE_PATH, SIGN_UP_DEFAULT_BASE_PATH } from '~/internal import { FormStoreProvider, useFormStore } from '~/internals/machines/form/form.context'; import type { SignUpRouterInitEvent } from '~/internals/machines/sign-up'; import { SignUpRouterMachine } from '~/internals/machines/sign-up'; -import { consoleInspector } from '~/internals/utils/inspector'; +import { inspect } from '~/internals/utils/inspector'; import { Router, useClerkRouter, useNextRouter } from '~/react/router'; import { SignUpRouterCtx } from '~/react/sign-up/context'; @@ -19,7 +19,7 @@ type SignUpFlowProviderProps = { exampleMode?: boolean; }; -const actor = createActor(SignUpRouterMachine, { inspect: consoleInspector }); +const actor = createActor(SignUpRouterMachine, { inspect }); const ref = actor.start(); function SignUpFlowProvider({ children, exampleMode }: SignUpFlowProviderProps) { diff --git a/packages/elements/src/types/globals.d.ts b/packages/elements/src/types/globals.d.ts new file mode 100644 index 0000000000..72b67abb15 --- /dev/null +++ b/packages/elements/src/types/globals.d.ts @@ -0,0 +1,7 @@ +export {}; + +declare global { + const PACKAGE_NAME: string; + const PACKAGE_VERSION: string; + const __DEV__: boolean; +} diff --git a/packages/elements/tsup.config.ts b/packages/elements/tsup.config.ts index 86b57be791..c8cb1e480a 100644 --- a/packages/elements/tsup.config.ts +++ b/packages/elements/tsup.config.ts @@ -21,7 +21,7 @@ export default defineConfig(overrideOptions => { 'react/sign-in/index': 'src/react/sign-in/index.ts', 'react/sign-up/index': 'src/react/sign-up/index.ts', }, - external: ['react', 'react-dom'], + external: ['react', 'react-dom', '@statelyai/inspect'], format: ['cjs', 'esm'], minify: false, sourcemap: true, From c7ff40138525f9691ce76f037ae3da534998991b Mon Sep 17 00:00:00 2001 From: Tom Milewski Date: Thu, 23 May 2024 16:13:30 -0400 Subject: [PATCH 05/11] fix(elements): Verification form not submitting after returning from `ChooseStrategy` without a selection (#3425) --- .changeset/red-gorillas-count.md | 6 +++++ .../machines/sign-in/router.machine.ts | 6 ++++- .../machines/sign-in/verification.machine.ts | 27 ++++++++++++++++++- 3 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 .changeset/red-gorillas-count.md diff --git a/.changeset/red-gorillas-count.md b/.changeset/red-gorillas-count.md new file mode 100644 index 0000000000..73678529f8 --- /dev/null +++ b/.changeset/red-gorillas-count.md @@ -0,0 +1,6 @@ +--- +'@clerk/elements': patch +--- + +Fix: Verification form submission wasn't working after returning from "choosing an alternate strategy" without making a selection. +Perf: Adds a `NeverRetriable` state for applicable strategies so the countdown doesn't run needlessly. diff --git a/packages/elements/src/internals/machines/sign-in/router.machine.ts b/packages/elements/src/internals/machines/sign-in/router.machine.ts index 8356414e45..a2d2a13b54 100644 --- a/packages/elements/src/internals/machines/sign-in/router.machine.ts +++ b/packages/elements/src/internals/machines/sign-in/router.machine.ts @@ -363,7 +363,11 @@ export const SignInRouterMachine = setup({ ChoosingStrategy: { tags: ['route:choose-strategy'], on: { - 'NAVIGATE.PREVIOUS': 'Idle', + 'NAVIGATE.PREVIOUS': { + description: 'Go to Idle, and also tell firstFactor to go to Pending', + target: 'Idle', + actions: sendTo('firstFactor', { type: 'NAVIGATE.PREVIOUS' }), + }, }, }, ForgotPassword: { diff --git a/packages/elements/src/internals/machines/sign-in/verification.machine.ts b/packages/elements/src/internals/machines/sign-in/verification.machine.ts index 9b4af28755..4846322a9e 100644 --- a/packages/elements/src/internals/machines/sign-in/verification.machine.ts +++ b/packages/elements/src/internals/machines/sign-in/verification.machine.ts @@ -145,6 +145,7 @@ const SignInVerificationMachine = setup({ }, guards: { isResendable: ({ context }) => context.resendable || context.resendableAfter === 0, + isNeverResendable: ({ context }) => context.currentFactor?.strategy === 'password', }, delays: SignInVerificationDelays, types: {} as SignInVerificationSchema, @@ -161,6 +162,7 @@ const SignInVerificationMachine = setup({ }), initial: 'Init', on: { + 'NAVIGATE.PREVIOUS': '.Hist', 'STRATEGY.REGISTER': { actions: assign({ registeredStrategies: ({ context, event }) => context.registeredStrategies.add(event.factor), @@ -233,11 +235,31 @@ const SignInVerificationMachine = setup({ reenter: true, }, }, - initial: 'NotResendable', + initial: 'Init', states: { + Init: { + description: 'Marks appropriate factors as never resendable.', + always: [ + { + guard: 'isNeverResendable', + target: 'NeverResendable', + }, + { + target: 'NotResendable', + }, + ], + }, Resendable: { description: 'Waiting for user to retry', }, + NeverResendable: { + description: 'Handles never resendable', + on: { + RETRY: { + actions: log('Never retriable'), + }, + }, + }, NotResendable: { description: 'Handle countdowns', on: { @@ -299,6 +321,9 @@ const SignInVerificationMachine = setup({ }, }, }, + Hist: { + type: 'history', + }, }, }); From 0a6883f076129679fe16570f68f17a3a1961266f Mon Sep 17 00:00:00 2001 From: Clerk Cookie <136073014+clerk-cookie@users.noreply.github.com> Date: Thu, 23 May 2024 16:32:49 -0400 Subject: [PATCH 06/11] ci(repo): Version packages (#3437) Co-authored-by: github-actions[bot] --- .changeset/khaki-starfishes-allow.md | 7 ------- .changeset/red-gorillas-count.md | 6 ------ package-lock.json | 2 +- packages/elements/CHANGELOG.md | 15 +++++++++++++++ packages/elements/package.json | 2 +- 5 files changed, 17 insertions(+), 15 deletions(-) delete mode 100644 .changeset/khaki-starfishes-allow.md delete mode 100644 .changeset/red-gorillas-count.md diff --git a/.changeset/khaki-starfishes-allow.md b/.changeset/khaki-starfishes-allow.md deleted file mode 100644 index 3a2c7d1050..0000000000 --- a/.changeset/khaki-starfishes-allow.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@clerk/elements': minor ---- - -- Adds Stately's Browser Inspector in development builds -- Removes `@statelyai/inspect` from dependencies -- Ensures all inspector-related code is omitted from the build diff --git a/.changeset/red-gorillas-count.md b/.changeset/red-gorillas-count.md deleted file mode 100644 index 73678529f8..0000000000 --- a/.changeset/red-gorillas-count.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@clerk/elements': patch ---- - -Fix: Verification form submission wasn't working after returning from "choosing an alternate strategy" without making a selection. -Perf: Adds a `NeverRetriable` state for applicable strategies so the countdown doesn't run needlessly. diff --git a/package-lock.json b/package-lock.json index 4455366129..8416d9e69c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39618,7 +39618,7 @@ }, "packages/elements": { "name": "@clerk/elements", - "version": "0.4.7", + "version": "0.5.0", "license": "MIT", "dependencies": { "@radix-ui/react-form": "^0.0.3", diff --git a/packages/elements/CHANGELOG.md b/packages/elements/CHANGELOG.md index 28024fd6fb..6a49792779 100644 --- a/packages/elements/CHANGELOG.md +++ b/packages/elements/CHANGELOG.md @@ -1,5 +1,20 @@ # @clerk/elements +## 0.5.0 + +### Minor Changes + +- - Adds Stately's Browser Inspector in development builds ([#3424](https://github.com/clerk/javascript/pull/3424)) by [@tmilewski](https://github.com/tmilewski) + + - Removes `@statelyai/inspect` from dependencies + - Ensures all inspector-related code is omitted from the build + +### Patch Changes + +- Fix: Verification form submission wasn't working after returning from "choosing an alternate strategy" without making a selection. ([#3425](https://github.com/clerk/javascript/pull/3425)) by [@tmilewski](https://github.com/tmilewski) + + Perf: Adds a `NeverRetriable` state for applicable strategies so the countdown doesn't run needlessly. + ## 0.4.7 ### Patch Changes diff --git a/packages/elements/package.json b/packages/elements/package.json index 78c49828f3..422bba6763 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/elements", - "version": "0.4.7", + "version": "0.5.0", "description": "Clerk Elements", "keywords": [ "clerk", From 129235886f87fa466d84e409287ba5c1f9829376 Mon Sep 17 00:00:00 2001 From: Lennart Date: Fri, 24 May 2024 10:39:26 +0200 Subject: [PATCH 07/11] chore(repo): Improve E2E docs & QoL improvements (#3432) --- .github/actions/init/action.yml | 28 +++++++++---- .github/workflows/ci.yml | 14 +++---- integration/README.md | 70 ++++++++++++++++++++++++++++++-- integration/playwright.config.ts | 2 +- 4 files changed, 95 insertions(+), 19 deletions(-) diff --git a/.github/actions/init/action.yml b/.github/actions/init/action.yml index 26c7e37522..800a960b39 100644 --- a/.github/actions/init/action.yml +++ b/.github/actions/init/action.yml @@ -38,6 +38,10 @@ inputs: description: 'The registry the packages will be published to' required: false default: '' + verbose: + description: 'Enable verbose output' + required: false + default: 'false' runs: using: 'composite' @@ -54,6 +58,7 @@ runs: SUMMARIZE: ${{ inputs.turbo-summarize }} TEAM: ${{ inputs.turbo-team }} TOKEN: ${{ inputs.turbo-token }} + VERBOSE: ${{ inputs.verbose }} with: script: | const os = require('os') @@ -62,15 +67,24 @@ runs: ? os.availableParallelism() : os.cpus().length; - const { ENABLED, CACHE_DIR, SIGNATURE, REMOTE_ONLY, SUMMARIZE, TEAM, TOKEN } = process.env + const { ENABLED, CACHE_DIR, SIGNATURE, REMOTE_ONLY, SUMMARIZE, TEAM, TOKEN, VERBOSE } = process.env + + const ARGS = [ + `--cache-dir=${CACHE_DIR}`, + `--concurrency=${cpus}`, + `--summarize=${SUMMARIZE}`, + ] + + if (VERBOSE === 'true') { + ARGS.push('--verbosity=2') + ARGS.push('--log-order=stream') + ARGS.push('--output-logs=full') + } else { + ARGS.push('--output-logs=new-only') + } core.exportVariable('TURBO_ARGS', - [ - '--output-logs=new-only', - `--cache-dir=${CACHE_DIR}`, - `--concurrency=${cpus}`, - `--summarize=${SUMMARIZE}`, - ].join(' ') + ARGS.join(' ') ) if (ENABLED === 'true') { diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4aa97bae90..126e814d8a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -170,10 +170,10 @@ jobs: INTEGRATION_INSTANCE_KEYS: ${{ secrets.INTEGRATION_INSTANCE_KEYS }} MAILSAC_API_KEY: ${{ secrets.MAILSAC_API_KEY }} - # - name: Upload Integration Report for ${{ matrix.test-name }} - # uses: actions/upload-artifact@v3 - # if: always() - # with: - # name: integration-report-${{ github.run_id }}-${{ github.run_attempt }}-${{ matrix.test-name }} - # path: playwright-report/ - # retention-days: 1 + - name: Upload test-results + if: ${{ cancelled() || failure() }} + uses: actions/upload-artifact@v4 + with: + name: playwright-traces-${{ github.run_id }}-${{ github.run_attempt }}-${{ matrix.test-name }} + path: integration/test-results + retention-days: 1 diff --git a/integration/README.md b/integration/README.md index 61d099d520..9a6fc33b27 100644 --- a/integration/README.md +++ b/integration/README.md @@ -74,6 +74,36 @@ npm run test:integration:base -- --ui email.link.test.ts > [!TIP] > If you want to learn more, read the [Running and debugging tests documentation](https://playwright.dev/docs/running-tests). +### Recipes + +Below you can find code snippets for running tests in a specific manner, easily copy/pasteable. They'll allow you to run tests quicker or make them easier to debug. + +#### Keep temporary site + +During E2E runs a temporary site is created in which the template is copied into. If you want to keep the site around, pass the `CLEANUP` environment variable: + +```shell +CLEANUP=0 npm run test:integration:base +``` + +For all available environment variables, check the [`constants.ts`](../integration/constants.ts) file. + +#### Quick feedback loop on already running app + +You might have a similar setup to this: + +- App running on `localhost:3000` (e.g. running the temporary site that was created in a previous run or directly running the app from the `integration/templates` folder) +- No need to test `clerk-js` changes +- As such, you don't need to have a server spin up for `clerk-js` and also don't need an app created + +Then you can use a combination of environment variables to fast track your tests: + +```shell +E2E_APP_SK=sk_test_xxx E2E_APP_PK=pk_test_xxx E2E_APP_URL=http://localhost:3000 E2E_APP_CLERK_JS=https://xxx.clerk.accounts.dev/npm/@clerk/clerk-js@5/dist/clerk.browser.js npm run test:integration:base -- --ui +``` + +You need to replace all environment variables with your specific values/needs, above are just placeholders. + ## Writing your first test In this step-by-step instruction you'll learn how to create a new integration test. If your test case already fits into an existing file, please add a new `test()` block instead of creating a whole new file. @@ -281,6 +311,41 @@ If you need to run a test suite inside a different environment (e.g. a different 1. Ensure that your new keys are added to the `INTEGRATION_INSTANCE_KEYS` environment variable inside the repository so that GitHub actions can successfully run. +## Debugging tests + +Sometimes tests are passing locally but not in CI 😢 But there are ways to dig into the root cause. Inside the PR with the failing tests apply these changes: + +1. Open the [`ci.yml`](../.github/workflows/ci.yml) file +1. Inside the **Setup** step (of the `integration-tests` job), add `verbose: true` to the arguments. This will enable more verbose logging from Turborepo and ensure that all logs are flushed the moment they appear. +1. Playwright will record traces of failed tests and they will be uploaded when the E2E step fails or is cancelled. Click on the **Upload test-results** step and download the archive. It contains Playwright traces. +1. Open https://trace.playwright.dev/ and open your trace file + +If these information are not enough, it might be helpful to have a look at the temporary site that was created inside the test run. You'll need to make some adjustments: + +1. Open [`applicationConfig.ts`](../integration/models/applicationConfig.ts) and change the `appDirName` to `${name}__debug`. This way the temporary site doesn't have a random hash and date in its name +1. In the [`ci.yml`](../.github/workflows/ci.yml) workflow file, change the `test-name` matrix of the `integration-tests` job to only include the project you're interested in. For example: + + ```yaml + strategy: + matrix: + # In the original file the test-name includes more in its array + test-name: ['nextjs'] + ``` + +1. At the bottom of the file, add a new step to upload the temporary site. + + ```yaml + - name: Upload app artifacts + if: ${{ cancelled() || failure() }} + uses: actions/upload-artifact@v4 + with: + name: temp-app-${{ matrix.test-name }} + path: /tmp/.temp_integration/long-running--XXX__debug + retention-days: 1 + ``` + +You need to replace the `XXX` in the `path` with the ID of your long running app. Those IDs are defined in [`longRunningApps.ts`](../integration/presets/longRunningApps.ts), so check which ID is used for your test. Previous runs might also print the name already, look for a log that begins with "[appConfig] Copying template". + ## Reference > [!TIP] @@ -510,10 +575,7 @@ The integration suite uses [`presets/envs.ts`](../integration/presets/envs.ts) t This is why you created the `.keys.json` file in the [initial setup](#initial-setup) step. Those secret and publishable keys are used to create environment configs. Inside GitHub actions these keys are provided through the `INTEGRATION_INSTANCE_KEYS` environment variable. -Currently, we have two Clerk instances configured: - -- **with-email-codes**: a single session application with all toggles enabled. -- **with-email-links**: a single session app with email links enabled and email codes disabled. Useful to test email links flows as the `` component currently does not support switching between email links and email codes. +They keys defined in `.keys.json.sample` correspond with the Clerk instances in the **Integration testing** organization. > [!NOTE] > The test suite also uses these environment variables to run some tests: diff --git a/integration/playwright.config.ts b/integration/playwright.config.ts index ae48bc2578..779f0f4409 100644 --- a/integration/playwright.config.ts +++ b/integration/playwright.config.ts @@ -21,7 +21,7 @@ export const common: PlaywrightTestConfig = { workers: process.env.CI ? numAvailableWorkers : '70%', reporter: process.env.CI ? 'line' : 'list', use: { - trace: 'on-first-retry', + trace: 'retain-on-failure', bypassCSP: true, // We probably need to limit this to specific tests }, } as const; From 980493fe56aacb13d600d0ffc77ed84c375ba30e Mon Sep 17 00:00:00 2001 From: Lennart Date: Fri, 24 May 2024 14:21:21 +0200 Subject: [PATCH 08/11] feat(test): Add Clerk Elements E2E (#3394) --- .changeset/healthy-turtles-compete.md | 5 + .github/workflows/ci.yml | 5 +- integration/models/applicationConfig.ts | 3 + integration/presets/elements.ts | 24 ++ integration/presets/index.ts | 2 + integration/presets/longRunningApps.ts | 2 + .../templates/elements-next/.eslintrc.js | 3 + .../templates/elements-next/.gitignore | 37 ++ integration/templates/elements-next/README.md | 34 ++ .../templates/elements-next/next.config.js | 8 + .../templates/elements-next/package.json | 30 ++ .../templates/elements-next/postcss.config.js | 6 + .../elements-next/src/app/favicon.ico | Bin 0 -> 25931 bytes .../elements-next/src/app/globals.css | 37 ++ .../elements-next/src/app/layout.tsx | 19 + .../elements-next/src/app/otp/page.tsx | 118 ++++++ .../templates/elements-next/src/app/page.tsx | 80 ++++ .../src/app/sign-in/[[...sign-in]]/page.tsx | 347 ++++++++++++++++++ .../src/app/sign-up/[[...sign-up]]/page.tsx | 152 ++++++++ .../src/app/validate-password/page.tsx | 94 +++++ .../templates/elements-next/src/middleware.ts | 6 + .../elements-next/tailwind.config.js | 18 + .../templates/elements-next/tsconfig.json | 28 ++ integration/templates/index.ts | 1 + integration/testUtils/commonPageObject.ts | 5 + integration/testUtils/signInPageObject.ts | 15 +- integration/testUtils/signUpPageObject.ts | 15 +- integration/testUtils/usersService.ts | 15 +- .../tests/elements/next-sign-in.test.ts | 183 +++++++++ .../tests/elements/next-sign-up.test.ts | 169 +++++++++ integration/tests/elements/otp.test.ts | 232 ++++++++++++ .../tests/elements/validate-password.test.ts | 69 ++++ integration/tests/sign-in-flow.test.ts | 4 +- package-lock.json | 142 +------ package.json | 7 +- .../examples/nextjs/e2e/example.spec.ts | 6 - .../elements/examples/nextjs/package.json | 2 - .../examples/nextjs/playwright.config.ts | 59 --- .../elements/src/react/common/form/index.tsx | 3 +- packages/testing/package.json | 2 +- turbo.json | 6 + 41 files changed, 1773 insertions(+), 220 deletions(-) create mode 100644 .changeset/healthy-turtles-compete.md create mode 100644 integration/presets/elements.ts create mode 100644 integration/templates/elements-next/.eslintrc.js create mode 100644 integration/templates/elements-next/.gitignore create mode 100644 integration/templates/elements-next/README.md create mode 100644 integration/templates/elements-next/next.config.js create mode 100644 integration/templates/elements-next/package.json create mode 100644 integration/templates/elements-next/postcss.config.js create mode 100644 integration/templates/elements-next/src/app/favicon.ico create mode 100644 integration/templates/elements-next/src/app/globals.css create mode 100644 integration/templates/elements-next/src/app/layout.tsx create mode 100644 integration/templates/elements-next/src/app/otp/page.tsx create mode 100644 integration/templates/elements-next/src/app/page.tsx create mode 100644 integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx create mode 100644 integration/templates/elements-next/src/app/sign-up/[[...sign-up]]/page.tsx create mode 100644 integration/templates/elements-next/src/app/validate-password/page.tsx create mode 100644 integration/templates/elements-next/src/middleware.ts create mode 100644 integration/templates/elements-next/tailwind.config.js create mode 100644 integration/templates/elements-next/tsconfig.json create mode 100644 integration/tests/elements/next-sign-in.test.ts create mode 100644 integration/tests/elements/next-sign-up.test.ts create mode 100644 integration/tests/elements/otp.test.ts create mode 100644 integration/tests/elements/validate-password.test.ts delete mode 100644 packages/elements/examples/nextjs/e2e/example.spec.ts delete mode 100644 packages/elements/examples/nextjs/playwright.config.ts diff --git a/.changeset/healthy-turtles-compete.md b/.changeset/healthy-turtles-compete.md new file mode 100644 index 0000000000..9654483c7a --- /dev/null +++ b/.changeset/healthy-turtles-compete.md @@ -0,0 +1,5 @@ +--- +'@clerk/elements': patch +--- + +Update the TypeScript type of `` to allow the `validatePassword` prop also on `type="text"` (in addition to `type="password"`) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 126e814d8a..f56e11a435 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -129,7 +129,7 @@ jobs: strategy: matrix: - test-name: ['generic', 'nextjs', 'express', 'quickstart', 'ap-flows'] + test-name: ['generic', 'nextjs', 'express', 'quickstart', 'ap-flows', 'elements'] test-project: ['chrome'] steps: @@ -152,7 +152,7 @@ jobs: uses: ./.github/actions/verdaccio with: publish-cmd: | - if [ "$(npm config get registry)" = "https://registry.npmjs.org/" ]; then echo 'Error: Using default registry' && exit 1; else npx turbo build $TURBO_ARGS --filter=!elements --only && npx changeset publish --no-git-tag; fi + if [ "$(npm config get registry)" = "https://registry.npmjs.org/" ]; then echo 'Error: Using default registry' && exit 1; else npx turbo build $TURBO_ARGS --only && npx changeset publish --no-git-tag; fi - name: Install @clerk/backend in /integration working-directory: ./integration @@ -163,6 +163,7 @@ jobs: run: mkdir clerk-js && cd clerk-js && npm init -y && npm install @clerk/clerk-js - name: Run Integration Tests + id: integration-tests run: npx turbo test:integration:${{ matrix.test-name }} $TURBO_ARGS --only -- --project=${{ matrix.test-project }} env: E2E_APP_CLERK_JS_DIR: ${{runner.temp}} diff --git a/integration/models/applicationConfig.ts b/integration/models/applicationConfig.ts index 1691e520cf..87695cdf8e 100644 --- a/integration/models/applicationConfig.ts +++ b/integration/models/applicationConfig.ts @@ -54,6 +54,9 @@ export const applicationConfig = () => { scripts[name] = cmd; return self; }, + /** + * Adds a dependency to the template's `package.json` file. If the version is undefined, the dependency is not added. If the dependency already exists, the version is overwritten. + */ addDependency: (name: string, version: string | undefined) => { if (version) { dependencies.set(name, version); diff --git a/integration/presets/elements.ts b/integration/presets/elements.ts new file mode 100644 index 0000000000..b137759c13 --- /dev/null +++ b/integration/presets/elements.ts @@ -0,0 +1,24 @@ +import { constants } from '../constants'; +import { applicationConfig } from '../models/applicationConfig.js'; +import { templates } from '../templates/index.js'; + +const clerkNextjsLocal = `file:${process.cwd()}/packages/nextjs`; +const clerkElementsLocal = `file:${process.cwd()}/packages/elements`; + +const nextAppRouter = applicationConfig() + .setName('elements-next') + .useTemplate(templates['elements-next']) + .setEnvFormatter('public', key => `NEXT_PUBLIC_${key}`) + .addScript('setup', 'npm i') + .addScript('dev', 'npm run dev') + .addScript('build', 'npm run build') + .addScript('serve', 'npm run start') + .addDependency('next', constants.E2E_NEXTJS_VERSION) + .addDependency('react', constants.E2E_REACT_VERSION) + .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION) + .addDependency('@clerk/nextjs', constants.E2E_CLERK_VERSION || clerkNextjsLocal) + .addDependency('@clerk/elements', constants.E2E_CLERK_VERSION || clerkElementsLocal); + +export const elements = { + nextAppRouter, +} as const; diff --git a/integration/presets/index.ts b/integration/presets/index.ts index 36e388c2c3..e26331ab5b 100644 --- a/integration/presets/index.ts +++ b/integration/presets/index.ts @@ -1,3 +1,4 @@ +import { elements } from './elements'; import { envs } from './envs'; import { express } from './express'; import { createLongRunningApps } from './longRunningApps'; @@ -12,4 +13,5 @@ export const appConfigs = { next, react, remix, + elements, } as const; diff --git a/integration/presets/longRunningApps.ts b/integration/presets/longRunningApps.ts index c262d006c6..3b9b2fcd86 100644 --- a/integration/presets/longRunningApps.ts +++ b/integration/presets/longRunningApps.ts @@ -1,5 +1,6 @@ import type { LongRunningApplication } from '../models/longRunningApplication'; import { longRunningApplication } from '../models/longRunningApplication'; +import { elements } from './elements'; import { envs } from './envs'; import { express } from './express'; import { next } from './next'; @@ -20,6 +21,7 @@ export const createLongRunningApps = () => { { id: 'next.appRouter.withEmailCodes', config: next.appRouter, env: envs.withEmailCodes }, { id: 'next.appRouter.withCustomRoles', config: next.appRouter, env: envs.withCustomRoles }, { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart }, + { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes }, ] as const; const apps = configs.map(longRunningApplication); diff --git a/integration/templates/elements-next/.eslintrc.js b/integration/templates/elements-next/.eslintrc.js new file mode 100644 index 0000000000..e351352491 --- /dev/null +++ b/integration/templates/elements-next/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + root: true, +}; diff --git a/integration/templates/elements-next/.gitignore b/integration/templates/elements-next/.gitignore new file mode 100644 index 0000000000..cdbd42c5c3 --- /dev/null +++ b/integration/templates/elements-next/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +package-lock.json diff --git a/integration/templates/elements-next/README.md b/integration/templates/elements-next/README.md new file mode 100644 index 0000000000..f4da3c4c1c --- /dev/null +++ b/integration/templates/elements-next/README.md @@ -0,0 +1,34 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/integration/templates/elements-next/next.config.js b/integration/templates/elements-next/next.config.js new file mode 100644 index 0000000000..954fac0d40 --- /dev/null +++ b/integration/templates/elements-next/next.config.js @@ -0,0 +1,8 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + eslint: { + ignoreDuringBuilds: true, + }, +}; + +module.exports = nextConfig; diff --git a/integration/templates/elements-next/package.json b/integration/templates/elements-next/package.json new file mode 100644 index 0000000000..3f1db1a03a --- /dev/null +++ b/integration/templates/elements-next/package.json @@ -0,0 +1,30 @@ +{ + "name": "elements-next", + "version": "0.1.0", + "private": true, + "scripts": { + "build": "next build", + "dev": "next dev", + "lint": "next lint", + "start": "next start" + }, + "dependencies": { + "@clerk/elements": "file:../../../packages/elements", + "@clerk/nextjs": "file:../../../packages/nextjs", + "@types/node": "^18.17.0", + "@types/react": "^18.3.1", + "@types/react-dom": "^18.3.0", + "next": "^14.2.3", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "typescript": "^5.4.5" + }, + "devDependencies": { + "autoprefixer": "^10.4.19", + "postcss": "^8.4.38", + "tailwindcss": "^3.4.3" + }, + "engines": { + "node": ">=18.17.0" + } +} diff --git a/integration/templates/elements-next/postcss.config.js b/integration/templates/elements-next/postcss.config.js new file mode 100644 index 0000000000..12a703d900 --- /dev/null +++ b/integration/templates/elements-next/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/integration/templates/elements-next/src/app/favicon.ico b/integration/templates/elements-next/src/app/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c GIT binary patch literal 25931 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 LrJugUA?W`A8`#=m literal 0 HcmV?d00001 diff --git a/integration/templates/elements-next/src/app/globals.css b/integration/templates/elements-next/src/app/globals.css new file mode 100644 index 0000000000..b20b3536b4 --- /dev/null +++ b/integration/templates/elements-next/src/app/globals.css @@ -0,0 +1,37 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, + Ubuntu, roboto, noto, arial, sans-serif; +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 6rem; + min-height: 100vh; +} diff --git a/integration/templates/elements-next/src/app/layout.tsx b/integration/templates/elements-next/src/app/layout.tsx new file mode 100644 index 0000000000..9e5b6a7381 --- /dev/null +++ b/integration/templates/elements-next/src/app/layout.tsx @@ -0,0 +1,19 @@ +import './globals.css'; + +import { ClerkProvider } from '@clerk/nextjs'; +import type { Metadata } from 'next'; + +export const metadata: Metadata = { + title: 'Clerk Elements - Next.js E2E', + description: 'Clerk Elements - Next.js E2E', +}; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + + ); +} diff --git a/integration/templates/elements-next/src/app/otp/page.tsx b/integration/templates/elements-next/src/app/otp/page.tsx new file mode 100644 index 0000000000..93a4c0afce --- /dev/null +++ b/integration/templates/elements-next/src/app/otp/page.tsx @@ -0,0 +1,118 @@ +'use client'; + +import * as Clerk from '@clerk/elements/common'; +import * as SignIn from '@clerk/elements/sign-in'; + +function clsx(...args: (string | undefined | Record)[]): string { + const classes: string[] = []; + + for (const arg of args) { + switch (typeof arg) { + case 'string': + classes.push(arg); + break; + case 'object': + for (const key in arg) { + if (arg[key]) { + classes.push(key); + } + } + break; + } + } + + return classes.join(' '); +} + +export default function OTP() { + return ( +
+ + +
+

OTP Playground

+
+ + Simple OTP Input + + + + Segmented OTP Input + { + return ( +
+ {value} + {status === 'cursor' && ( +
+
+
+ )} +
+ ); + }} + /> + + + Segmented OTP Input (with props) + { + return ( +
+ {value} + {status === 'cursor' && ( +
+
+
+ )} +
+ ); + }} + /> + + + +
+ ); +} diff --git a/integration/templates/elements-next/src/app/page.tsx b/integration/templates/elements-next/src/app/page.tsx new file mode 100644 index 0000000000..4fa8919f69 --- /dev/null +++ b/integration/templates/elements-next/src/app/page.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import { SignedIn, SignedOut, SignOutButton } from '@clerk/nextjs'; +import Link from 'next/link'; + +function Card({ children, title }: { children: React.ReactNode; title: string }) { + return ( +
+

{title}

+ {children} +
+ ); +} + +export default function Home() { + return ( +
+

Clerk Elements: Next.js E2E

+

+ Kitchen sink template to test out Clerk Elements in Next.js App Router. +

+
+ + +

signed-out-state

+ + +

signed-in-state

+ + + +
    +
  • + + Sign-In + +
    • +
  • + + Sign-Up + +
    • +
  • + + OTP Playground + +
    • +
  • + + Password Validation + +
    • +
+ + + +

Not logged in.

+ + + + + + + +
+
+ ); +} diff --git a/integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx b/integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx new file mode 100644 index 0000000000..02bae0fd1e --- /dev/null +++ b/integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx @@ -0,0 +1,347 @@ +'use client'; + +import * as React from 'react'; +import * as Clerk from '@clerk/elements/common'; +import * as SignIn from '@clerk/elements/sign-in'; + +// password, phone_code, email_code, email_link, reset_password_email_code, but the rendered strategies are: +// password, email_code, reset_password_email_code, phone_code + +function Button({ children, ...props }: { children: React.ReactNode }) { + return ( + + ); +} + +export default function SignInPage() { + const [usePhone, setUsePhone] = React.useState(false); + + return ( +
+
+ + +
+

Sign in to Clover

+
+ + +
+ + {usePhone ? 'Phone number' : 'Email or username'} + + +
+ + + + + + + + + +
+

Alternatively, sign in with these platforms

+
+ + + Login with Google + +
+
+ + +
+

Use another method

+
+ + + + + + + + + + + + +
+

Alternatively, sign in with these platforms

+
+ + + Login with Google + +
+
+

+ + Go back + +

+ + +
+

Forgot password?

+
+ + + + +
+

Alternatively, sign in with these platforms

+
+ + + Login with Google + +
+
+ + + +
+

Enter your password

+

+ Welcome back +

+
+ + +
+ Password + + Forgot password? + +
+ + + + + + + + +
+

Verify email code

+
+ + + Email code + + + + + + + + +
+

Verify email link

+
+ + + Email link + + + + + + + + +
+

Verify email code

+
+ + + Email code + + + + + + + + +
+

Verify phone code

+
+ + + Phone code + + + + + + + +
+ + Use another method + +
+ + +
+

Reset your password

+
+ + + New password + + + + + Confirm password + + + + + + + + +
+
+ ); +} diff --git a/integration/templates/elements-next/src/app/sign-up/[[...sign-up]]/page.tsx b/integration/templates/elements-next/src/app/sign-up/[[...sign-up]]/page.tsx new file mode 100644 index 0000000000..6ff8dd5e56 --- /dev/null +++ b/integration/templates/elements-next/src/app/sign-up/[[...sign-up]]/page.tsx @@ -0,0 +1,152 @@ +'use client'; + +import * as Clerk from '@clerk/elements/common'; +import * as SignUp from '@clerk/elements/sign-up'; + +export default function SignUpPage() { + return ( +
+ + +
+

Create an account

+
+ +
+ + Email + + + + + Password + + + + + Phone number (optional) + + + + + Username (optional) + + + +
+ + Continue + + + + + +
+

Verify email code

+
+ + Email code + + + + + Continue + + + +
+

Verify phone code

+
+ + Phone code + + + + + Continue + + + + +
+

Continue registration

+
+ + + Username + + + + + Continue + + + +
+ ); +} diff --git a/integration/templates/elements-next/src/app/validate-password/page.tsx b/integration/templates/elements-next/src/app/validate-password/page.tsx new file mode 100644 index 0000000000..43d0aea622 --- /dev/null +++ b/integration/templates/elements-next/src/app/validate-password/page.tsx @@ -0,0 +1,94 @@ +'use client'; + +import * as React from 'react'; +import * as Clerk from '@clerk/elements/common'; +import * as SignIn from '@clerk/elements/sign-in'; + +export default function ValitePassword() { + const [hidden, setHidden] = React.useState(true); + + return ( +
+ + +
+

Password Validation Playground

+

+ Just to test out the{' '} + + password validation + {' '} + 🙃 +

+
+ +
+ Password + +
+ + + {({ state, codes, message }) => ( +
+

Field State Props

+ + + + + + + + + + + + + + + + + + + + + +
PropValue
State + {state} +
Codes + {codes?.join(', ')} +
Message + {message} +
+
+ )} + + + + +
+ ); +} diff --git a/integration/templates/elements-next/src/middleware.ts b/integration/templates/elements-next/src/middleware.ts new file mode 100644 index 0000000000..545508cedc --- /dev/null +++ b/integration/templates/elements-next/src/middleware.ts @@ -0,0 +1,6 @@ +import { clerkMiddleware } from '@clerk/nextjs/server'; +export default clerkMiddleware; + +export const config = { + matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'], +}; diff --git a/integration/templates/elements-next/tailwind.config.js b/integration/templates/elements-next/tailwind.config.js new file mode 100644 index 0000000000..5eaa317115 --- /dev/null +++ b/integration/templates/elements-next/tailwind.config.js @@ -0,0 +1,18 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], + theme: { + extend: { + keyframes: { + 'caret-blink': { + '0%,70%,100%': { opacity: '1' }, + '20%,50%': { opacity: '0' }, + }, + }, + animation: { + 'caret-blink': 'caret-blink 1.25s ease-out infinite', + }, + }, + }, + plugins: [], +}; diff --git a/integration/templates/elements-next/tsconfig.json b/integration/templates/elements-next/tsconfig.json new file mode 100644 index 0000000000..eb0b41d94d --- /dev/null +++ b/integration/templates/elements-next/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/integration/templates/index.ts b/integration/templates/index.ts index ee51301acb..6f40209993 100644 --- a/integration/templates/index.ts +++ b/integration/templates/index.ts @@ -10,6 +10,7 @@ export const templates = { 'react-vite': resolve(__dirname, './react-vite'), 'express-vite': resolve(__dirname, './express-vite'), 'remix-node': resolve(__dirname, './remix-node'), + 'elements-next': resolve(__dirname, './elements-next'), } as const; if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) { diff --git a/integration/testUtils/commonPageObject.ts b/integration/testUtils/commonPageObject.ts index 352072eb0b..3243a35748 100644 --- a/integration/testUtils/commonPageObject.ts +++ b/integration/testUtils/commonPageObject.ts @@ -18,6 +18,11 @@ export const common = ({ page }: TestArgs) => { enterTestOtpCode: async () => { return self.enterOtpCode('424242'); }, + // It's recommended to use .fill instead of .type + // @see https://playwright.dev/docs/api/class-keyboard#keyboard-type + fillTestOtpCode: async (name: string) => { + return page.getByRole('textbox', { name: name }).fill('424242'); + }, getIdentifierInput: () => { return page.locator('input[name=identifier]'); }, diff --git a/integration/testUtils/signInPageObject.ts b/integration/testUtils/signInPageObject.ts index c3417d8ac2..98e731a460 100644 --- a/integration/testUtils/signInPageObject.ts +++ b/integration/testUtils/signInPageObject.ts @@ -11,12 +11,17 @@ export const createSignInComponentPageObject = (testArgs: TestArgs) => { const { page } = testArgs; const self = { ...common(testArgs), - goTo: async (opts?: { searchParams: URLSearchParams }) => { - await page.goToRelative('/sign-in', opts); - return self.waitForMounted(); + goTo: async (opts?: { searchParams?: URLSearchParams; headlessSelector?: string }) => { + await page.goToRelative('/sign-in', { searchParams: opts?.searchParams }); + + if (typeof opts?.headlessSelector !== 'undefined') { + return self.waitForMounted(opts.headlessSelector); + } else { + return self.waitForMounted(); + } }, - waitForMounted: () => { - return page.waitForSelector('.cl-signIn-root', { state: 'attached' }); + waitForMounted: (selector = '.cl-signIn-root') => { + return page.waitForSelector(selector, { state: 'attached' }); }, setIdentifier: (val: string) => { return self.getIdentifierInput().fill(val); diff --git a/integration/testUtils/signUpPageObject.ts b/integration/testUtils/signUpPageObject.ts index 65440e87bc..cd94d94076 100644 --- a/integration/testUtils/signUpPageObject.ts +++ b/integration/testUtils/signUpPageObject.ts @@ -15,12 +15,17 @@ export const createSignUpComponentPageObject = (testArgs: TestArgs) => { const self = { ...common(testArgs), - goTo: async (opts?: { searchParams: URLSearchParams }) => { - await page.goToRelative('/sign-up', opts); - return self.waitForMounted(); + goTo: async (opts?: { searchParams?: URLSearchParams; headlessSelector?: string }) => { + await page.goToRelative('/sign-up', { searchParams: opts?.searchParams }); + + if (typeof opts?.headlessSelector !== 'undefined') { + return self.waitForMounted(opts.headlessSelector); + } else { + return self.waitForMounted(); + } }, - waitForMounted: () => { - return page.waitForSelector('.cl-signUp-root', { state: 'attached' }); + waitForMounted: (selector = '.cl-signUp-root') => { + return page.waitForSelector(selector, { state: 'attached' }); }, signUpWithOauth: (provider: string) => { return page.getByRole('button', { name: new RegExp(`continue with ${provider}`, 'gi') }); diff --git a/integration/testUtils/usersService.ts b/integration/testUtils/usersService.ts index b290f3354b..025e8ffead 100644 --- a/integration/testUtils/usersService.ts +++ b/integration/testUtils/usersService.ts @@ -57,6 +57,15 @@ export type UserService = { createFakeOrganization: (userId: string) => Promise; }; +/** + * This generates a random fictional number that can be verified using the 424242 code. + * Allowing 10^5 combinations should be enough entropy for e2e purposes. + * @see https://clerk.com/docs/testing/e2e-testing#phone-numbers + */ +function fakerPhoneNumber() { + return `+1###55501##`.replace(/#+/g, m => faker.string.numeric(m.length)); +} + export const createUserService = (clerkClient: ClerkClient) => { const self: UserService = { createFakeUser: (options?: FakeUserOptions) => { @@ -77,11 +86,7 @@ export const createUserService = (clerkClient: ClerkClient) => { email, username: withUsername ? `${randomHash}_clerk_cookie` : undefined, password: withPassword ? `${email}${randomHash}` : undefined, - // this generates a random fictional number that can be verified - // using the 424242 code. Allowing 10^5 combinations should be enough - // entropy for e2e purposes - // https://clerk.com/docs/testing/e2e-testing#phone-numbers - phoneNumber: withPhoneNumber ? faker.phone.number('+1###55501##') : undefined, + phoneNumber: withPhoneNumber ? fakerPhoneNumber() : undefined, deleteIfExists: () => self.deleteIfExists({ email }), }; }, diff --git a/integration/tests/elements/next-sign-in.test.ts b/integration/tests/elements/next-sign-in.test.ts new file mode 100644 index 0000000000..c23f8f0fc0 --- /dev/null +++ b/integration/tests/elements/next-sign-in.test.ts @@ -0,0 +1,183 @@ +import { expect, test } from '@playwright/test'; + +import { appConfigs } from '../../presets'; +import type { FakeUser } from '../../testUtils'; +import { createTestUtils, testAgainstRunningApps } from '../../testUtils'; + +testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js Sign-In Flow @elements', ({ app }) => { + test.describe.configure({ mode: 'serial' }); + + let fakeUser: FakeUser; + + test.beforeAll(async () => { + const u = createTestUtils({ app }); + fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + await u.services.users.createBapiUser(fakeUser); + }); + + test.afterAll(async () => { + await fakeUser.deleteIfExists(); + await app.teardown(); + }); + + test.afterEach(async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.page.signOut(); + await u.page.context().clearCookies(); + }); + + test('sign in with email and password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.setIdentifier(fakeUser.email); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); + + test('sign in with email and instant password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); + + await u.po.expect.toBeSignedIn(); + }); + + test('sign in with email code', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.setIdentifier(fakeUser.email); + await u.po.signIn.continue(); + + await u.page.getByRole('button', { name: /use another method/i }).click(); + await u.po.signIn.getAltMethodsEmailCodeButton().click(); + await u.po.signIn.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signIn.continue(); + + await u.page.waitForAppUrl('/'); + await u.po.expect.toBeSignedIn(); + }); + + test('sign in with phone number and password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.page.getByRole('button', { name: /^use phone/i }).click(); + await u.po.signIn.getIdentifierInput().fill(fakeUser.phoneNumber); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); + + test('sign in only with phone number', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUserWithoutPassword = u.services.users.createFakeUser({ + fictionalEmail: true, + withPassword: false, + withPhoneNumber: true, + }); + await u.services.users.createBapiUser(fakeUserWithoutPassword); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + await u.page.getByRole('button', { name: /^use phone/i }).click(); + await u.po.signIn.getIdentifierInput().fill(fakeUserWithoutPassword.phoneNumber); + await u.po.signIn.continue(); + await u.po.signIn.fillTestOtpCode('Enter phone verification code'); + await page.waitForTimeout(2000); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + + await fakeUserWithoutPassword.deleteIfExists(); + }); + + test('sign in with username and password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.getIdentifierInput().fill(fakeUser.username); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); + + test('can reset password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUserWithPasword = u.services.users.createFakeUser({ + fictionalEmail: true, + withPassword: true, + }); + await u.services.users.createBapiUser(fakeUserWithPasword); + + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.getIdentifierInput().fill(fakeUserWithPasword.email); + await u.po.signIn.continue(); + await u.page.getByRole('button', { name: /^forgot password/i }).click(); + await u.po.signIn.getResetPassword().click(); + await u.po.signIn.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signIn.continue(); + + await u.po.signIn.setPassword(`${fakeUserWithPasword.password}_reset`); + await u.po.signIn.setPasswordConfirmation(`${fakeUserWithPasword.password}_reset`); + await u.po.signIn.getResetPassword().click(); + await u.po.expect.toBeSignedIn(); + + await fakeUserWithPasword.deleteIfExists(); + }); + + test('cannot sign in with wrong password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + await u.po.signIn.getIdentifierInput().fill(fakeUser.email); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword('wrong-password'); + await u.po.signIn.continue(); + await expect(u.page.getByText(/^password is incorrect/i)).toBeVisible(); + + await u.po.expect.toBeSignedOut(); + }); + + test('cannot sign in with wrong password but can sign in with email', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + await u.po.signIn.getIdentifierInput().fill(fakeUser.email); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword('wrong-password'); + await u.po.signIn.continue(); + + await expect(u.page.getByText(/^password is incorrect/i)).toBeVisible(); + + await u.page.getByRole('button', { name: /use another method/i }).click(); + await u.po.signIn.getAltMethodsEmailCodeButton().click(); + await u.po.signIn.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); +}); diff --git a/integration/tests/elements/next-sign-up.test.ts b/integration/tests/elements/next-sign-up.test.ts new file mode 100644 index 0000000000..652c179af7 --- /dev/null +++ b/integration/tests/elements/next-sign-up.test.ts @@ -0,0 +1,169 @@ +import { expect, test } from '@playwright/test'; + +import { appConfigs } from '../../presets'; +import { createTestUtils, testAgainstRunningApps } from '../../testUtils'; + +testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js Sign-Up Flow @elements', ({ app }) => { + test.describe.configure({ mode: 'serial' }); + + test.afterAll(async () => { + await app.teardown(); + }); + + test('sign up with email and password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + + await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' }); + + await u.po.signUp.signUpWithEmailAndPassword({ + email: fakeUser.email, + password: fakeUser.password, + }); + + await u.po.signUp.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + + await u.page.waitForAppUrl('/'); + await u.po.expect.toBeSignedIn(); + + await fakeUser.deleteIfExists(); + }); + + test("can't sign up with weak password", async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + + await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' }); + + await u.po.signUp.signUpWithEmailAndPassword({ + email: fakeUser.email, + password: '12345', + }); + + // Check if password error is visible + await expect(u.page.getByText(/Passwords must be \d+ characters or more/i)).toBeVisible(); + + await u.po.expect.toBeSignedOut(); + + await fakeUser.deleteIfExists(); + }); + + test('can sign up with phone number', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + + await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' }); + + await u.po.signUp.signUp({ + email: fakeUser.email, + phoneNumber: fakeUser.phoneNumber, + password: fakeUser.password, + }); + + await u.po.signUp.fillTestOtpCode('Enter phone verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + await page.waitForTimeout(2000); + await u.po.signUp.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + + await u.po.expect.toBeSignedIn(); + await fakeUser.deleteIfExists(); + }); + + test('sign up with first name, last name, email, phone and password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + + await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' }); + + await u.po.signUp.signUp({ + username: fakeUser.username, + email: fakeUser.email, + phoneNumber: fakeUser.phoneNumber, + password: fakeUser.password, + }); + + await u.po.signUp.fillTestOtpCode('Enter phone verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + await u.po.signUp.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + + await u.po.expect.toBeSignedIn(); + + await fakeUser.deleteIfExists(); + }); + + test('sign up, sign out and sign in again', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + + await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' }); + + await u.po.signUp.signUp({ + username: fakeUser.username, + email: fakeUser.email, + phoneNumber: fakeUser.phoneNumber, + password: fakeUser.password, + }); + + await u.po.signUp.fillTestOtpCode('Enter phone verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + await u.po.signUp.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + + await u.po.expect.toBeSignedIn(); + + await u.page.evaluate(async () => { + await window.Clerk.signOut(); + }); + + await u.po.expect.toBeSignedOut(); + + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.setIdentifier(fakeUser.email); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + + await fakeUser.deleteIfExists(); + }); +}); diff --git a/integration/tests/elements/otp.test.ts b/integration/tests/elements/otp.test.ts new file mode 100644 index 0000000000..47b6da387f --- /dev/null +++ b/integration/tests/elements/otp.test.ts @@ -0,0 +1,232 @@ +import { expect, test } from '@playwright/test'; + +import { appConfigs } from '../../presets'; +import { createTestUtils, testAgainstRunningApps } from '../../testUtils'; + +testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elements', ({ app }) => { + test.describe.configure({ mode: 'parallel' }); + + test.afterAll(async () => { + await app.teardown(); + }); + + test.beforeEach(async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.page.goToRelative('/otp'); + }); + + const otpTypes = { + simpleOtp: 'simple-otp', + segmentedOtp: 'segmented-otp', + segmentedOtpWithProps: 'segmented-otp-with-props', + } as const; + + for (const otpType of [otpTypes.simpleOtp, otpTypes.segmentedOtp]) { + test.describe(`Type: ${otpType}`, () => { + test(`should receive correct standard props`, async ({ page }) => { + const otp = page.getByTestId(otpType); + + await expect(otp).toHaveAttribute('autocomplete', 'one-time-code'); + await expect(otp).toHaveAttribute('spellcheck', 'false'); + await expect(otp).toHaveAttribute('inputmode', 'numeric'); + await expect(otp).toHaveAttribute('maxlength', '6'); + await expect(otp).toHaveAttribute('minlength', '6'); + await expect(otp).toHaveAttribute('pattern', '[0-9]{6}'); + await expect(otp).toHaveAttribute('type', 'text'); + }); + + test(`should change the input value`, async ({ page }) => { + const otp = page.getByTestId(otpType); + + // Check that the input starts with an empty value + await expect(otp).toHaveValue(''); + + await otp.pressSequentially('1'); + await expect(otp).toHaveValue('1'); + + await otp.pressSequentially('23456'); + await expect(otp).toHaveValue('123456'); + }); + }); + } + + test.describe(`Type: ${otpTypes.simpleOtp}`, () => { + test(`should prevent typing greater than max length`, async ({ page }) => { + const otp = page.getByTestId(otpTypes.simpleOtp); + + await otp.pressSequentially('1234567'); + await expect(otp).toHaveValue('123456'); + }); + }); + + test.describe(`Type: ${otpTypes.segmentedOtp}`, () => { + test('renders hidden segments', async ({ page }) => { + const otpSegmentsWrapper = page.locator('.segmented-otp-wrapper'); + + await expect(otpSegmentsWrapper).toHaveAttribute('aria-hidden', 'true'); + // Check that 6 segments are rendered + await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(6); + }); + + test(`should prevent typing greater than max length`, async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('1234567'); + // With the segmented OTP we expect the last char to be replaced by any new input + await expect(otp).toHaveValue('123457'); + }); + + test(`should put values into segments`, async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + // Check initial state before any interaction + for (let i = 0; i < 6; i++) { + await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveText(''); + await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveAttribute('data-status', 'none'); + } + + await otp.pressSequentially('123456'); + + for (let i = 0; i < 6; i++) { + await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveText(`${i + 1}`); + } + }); + + test('should set hover status on segments', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.hover(); + for (let i = 0; i < 6; i++) { + await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveAttribute('data-status', 'hovered'); + } + }); + + test('should not set hover status on segments if they are focused', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('123'); + await otp.hover(); + for (let i = 0; i < 6; i++) { + await expect(page.getByTestId(`segmented-otp-${i}`)).not.toHaveAttribute('data-status', 'hovered'); + } + }); + + test('should set cursor and selected status on segments', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('12'); + + await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'none'); + await expect(page.getByTestId('segmented-otp-1')).toHaveAttribute('data-status', 'none'); + await expect(page.getByTestId('segmented-otp-2')).toHaveAttribute('data-status', 'cursor'); + + await otp.press('ArrowLeft'); + + await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'none'); + await expect(page.getByTestId('segmented-otp-1')).toHaveAttribute('data-status', 'selected'); + await expect(page.getByTestId('segmented-otp-2')).toHaveAttribute('data-status', 'none'); + + await otp.press('ArrowLeft'); + + await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'selected'); + await expect(page.getByTestId('segmented-otp-1')).toHaveAttribute('data-status', 'none'); + }); + + test('should replace selected segment with new input', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('12'); + + await otp.press('ArrowLeft'); + await otp.pressSequentially('1'); + await expect(otp).toHaveValue('11'); + }); + + test('should replace multi-selected segments with new input', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('12345'); + // Mark two segments to the left of the cursor + await otp.press('Shift+ArrowLeft'); + await otp.press('Shift+ArrowLeft'); + await expect(page.getByTestId('segmented-otp-3')).toHaveAttribute('data-status', 'selected'); + await expect(page.getByTestId('segmented-otp-4')).toHaveAttribute('data-status', 'selected'); + await otp.pressSequentially('1'); + + await expect(otp).toHaveValue('1231'); + + // Mark all segments + await otp.press('ControlOrMeta+a'); + await otp.pressSequentially('1'); + + await expect(otp).toHaveValue('1'); + }); + + test('should backspace char', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('123'); + await otp.press('Backspace'); + + await expect(otp).toHaveValue('12'); + await expect(page.getByTestId('segmented-otp-2')).toHaveAttribute('data-status', 'cursor'); + }); + + test('should backspace all chars with modifier', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('123'); + await otp.press('ControlOrMeta+Backspace'); + + await expect(otp).toHaveValue(''); + await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'cursor'); + }); + + test('should backspace selected char', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('123'); + await otp.press('ArrowLeft'); + await otp.press('ArrowLeft'); + await otp.press('Backspace'); + + await expect(otp).toHaveValue('13'); + }); + + test('should forward-delete char when pressing delete', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('1234'); + + await otp.press('ArrowLeft'); + await otp.press('ArrowLeft'); + await otp.press('Delete'); + + await expect(otp).toHaveValue('124'); + await otp.press('ArrowRight'); + await otp.press('Delete'); + await expect(otp).toHaveValue('12'); + }); + }); + + test.describe('Custom props', () => { + test('length', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtpWithProps); + const otpSegmentsWrapper = page.locator('.segmented-otp-with-props-wrapper'); + + await expect(otp).toHaveAttribute('maxlength', '4'); + await expect(otp).toHaveAttribute('minlength', '4'); + await expect(otp).toHaveAttribute('pattern', '[0-9]{4}'); + + // Check that only 4 segments are rendered + await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4); + }); + + test('passwordManagerOffset', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtpWithProps); + + // The computed styles are different on CI/local etc. so it's not use to check the exact value + await expect(otp).toHaveCSS('clip-path', /inset\(0px \d+\.\d+px 0px 0px\)/i); + }); + }); +}); diff --git a/integration/tests/elements/validate-password.test.ts b/integration/tests/elements/validate-password.test.ts new file mode 100644 index 0000000000..35f9f11e05 --- /dev/null +++ b/integration/tests/elements/validate-password.test.ts @@ -0,0 +1,69 @@ +import { expect, test } from '@playwright/test'; + +import { appConfigs } from '../../presets'; +import { createTestUtils, testAgainstRunningApps } from '../../testUtils'; + +testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Password Validation @elements', ({ app }) => { + test.describe.configure({ mode: 'parallel' }); + + test.afterAll(async () => { + await app.teardown(); + }); + + test.beforeEach(async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.page.goToRelative('/validate-password'); + }); + + test('should have initial "idle" state', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + + await expect(u.po.signIn.getPasswordInput()).toHaveAttribute('data-state', 'idle'); + await expect(page.getByTestId('state')).toHaveText('idle'); + }); + + test('should change state to "info" on focus', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.getPasswordInput().focus(); + + await expect(page.getByTestId('state')).toHaveText('info'); + }); + + test('should return codes and message with non-idle state', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.getPasswordInput().focus(); + + await expect(page.getByTestId('codes')).toHaveText('min_length'); + await expect(page.getByTestId('message')).toHaveText('Your password must contain 8 or more characters.'); + }); + + test('should return error when requirements are not met', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.setPassword('12345678'); + + await expect(page.getByTestId('state')).toHaveText('error'); + await expect(page.getByTestId('codes')).toHaveText('require_special_char'); + await expect(page.getByTestId('message')).toHaveText('Your password must contain a special character.'); + }); + + test('should return success when requirements are met', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.setPassword('12345678@'); + + await expect(page.getByTestId('state')).toHaveText('success'); + await expect(page.getByTestId('codes')).toHaveText(''); + await expect(page.getByTestId('message')).toHaveText('Your password meets all the necessary requirements.'); + }); + + test('should have working flow', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + + await expect(page.getByTestId('state')).toHaveText('idle'); + await u.po.signIn.setPassword('123'); + await expect(page.getByTestId('state')).toHaveText('info'); + await u.po.signIn.setPassword('12345678'); + await expect(page.getByTestId('state')).toHaveText('error'); + await u.po.signIn.setPassword('12345678@'); + await expect(page.getByTestId('state')).toHaveText('success'); + }); +}); diff --git a/integration/tests/sign-in-flow.test.ts b/integration/tests/sign-in-flow.test.ts index 8e3785c689..ddd2037bd7 100644 --- a/integration/tests/sign-in-flow.test.ts +++ b/integration/tests/sign-in-flow.test.ts @@ -117,7 +117,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign in f await fakeUserWithPasword.deleteIfExists(); }); - test('cant sign in with wrong password', async ({ page, context }) => { + test('cannot sign in with wrong password', async ({ page, context }) => { const u = createTestUtils({ app, page, context }); await u.po.signIn.goTo(); @@ -130,7 +130,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign in f await u.po.expect.toBeSignedOut(); }); - test('cant sign in with wrong password but can sign in with email', async ({ page, context }) => { + test('cannot sign in with wrong password but can sign in with email', async ({ page, context }) => { const u = createTestUtils({ app, page, context }); await u.po.signIn.goTo(); diff --git a/package-lock.json b/package-lock.json index 8416d9e69c..d8f35334ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "@emotion/jest": "^11.11.0", "@faker-js/faker": "^8.1.0", "@octokit/rest": "^20.0.2", - "@playwright/test": "^1.39.0", + "@playwright/test": "^1.44.0", "@testing-library/dom": "^8.19.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", @@ -9434,11 +9434,12 @@ } }, "node_modules/@playwright/test": { - "version": "1.40.1", + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz", + "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "playwright": "1.40.1" + "playwright": "1.44.0" }, "bin": { "playwright": "cli.js" @@ -19938,7 +19939,6 @@ "version": "15.4.5", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@expo/config": "~8.5.0" }, @@ -30974,11 +30974,12 @@ "license": "MIT" }, "node_modules/playwright": { - "version": "1.40.1", + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz", + "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.40.1" + "playwright-core": "1.44.0" }, "bin": { "playwright": "cli.js" @@ -30991,9 +30992,10 @@ } }, "node_modules/playwright-core": { - "version": "1.40.1", + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz", + "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==", "dev": true, - "license": "Apache-2.0", "bin": { "playwright-core": "cli.js" }, @@ -39659,23 +39661,6 @@ } } }, - "packages/elements/node_modules/@playwright/test": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz", - "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "playwright": "1.43.1" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=16" - } - }, "packages/elements/node_modules/@statelyai/inspect": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/@statelyai/inspect/-/inspect-0.3.1.tgz", @@ -39771,40 +39756,6 @@ } } }, - "packages/elements/node_modules/playwright": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz", - "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "playwright-core": "1.43.1" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=16" - }, - "optionalDependencies": { - "fsevents": "2.3.2" - } - }, - "packages/elements/node_modules/playwright-core": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz", - "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "playwright-core": "cli.js" - }, - "engines": { - "node": ">=16" - } - }, "packages/elements/node_modules/tslib": { "version": "2.4.1", "dev": true, @@ -40138,17 +40089,6 @@ "expo": "*" } }, - "packages/expo/node_modules/expo-auth-session/node_modules/expo-constants": { - "version": "15.4.5", - "dev": true, - "license": "MIT", - "dependencies": { - "@expo/config": "~8.5.0" - }, - "peerDependencies": { - "expo": "*" - } - }, "packages/expo/node_modules/expo-crypto": { "version": "12.8.1", "dev": true, @@ -40169,17 +40109,6 @@ "invariant": "^2.2.4" } }, - "packages/expo/node_modules/expo-linking/node_modules/expo-constants": { - "version": "15.4.5", - "dev": true, - "license": "MIT", - "dependencies": { - "@expo/config": "~8.5.0" - }, - "peerDependencies": { - "expo": "*" - } - }, "packages/expo/node_modules/tslib": { "version": "2.4.1", "license": "0BSD" @@ -40665,7 +40594,7 @@ }, "devDependencies": { "@clerk/eslint-config-custom": "*", - "@playwright/test": "^1.43.1", + "@playwright/test": "^1.44.0", "@types/node": "^18.17.0", "cypress": "^13.9.0", "tsup": "*", @@ -40687,21 +40616,6 @@ } } }, - "packages/testing/node_modules/@playwright/test": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz", - "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==", - "dev": true, - "dependencies": { - "playwright": "1.43.1" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=16" - } - }, "packages/testing/node_modules/dotenv": { "version": "16.4.5", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", @@ -40713,36 +40627,6 @@ "url": "https://dotenvx.com" } }, - "packages/testing/node_modules/playwright": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz", - "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==", - "dev": true, - "dependencies": { - "playwright-core": "1.43.1" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=16" - }, - "optionalDependencies": { - "fsevents": "2.3.2" - } - }, - "packages/testing/node_modules/playwright-core": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz", - "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==", - "dev": true, - "bin": { - "playwright-core": "cli.js" - }, - "engines": { - "node": ">=16" - } - }, "packages/themes": { "name": "@clerk/themes", "version": "2.1.7", diff --git a/package.json b/package.json index e026a4e9db..d2901305a9 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ ] }, "scripts": { - "build": "FORCE_COLOR=1 turbo build --concurrency=${TURBO_CONCURRENCY:-80%} --filter=!elements", + "build": "FORCE_COLOR=1 turbo build --concurrency=${TURBO_CONCURRENCY:-80%}", "bundlewatch": "turbo bundlewatch", "changeset": "changeset", "changeset:empty": "npm run changeset -- --empty", @@ -28,12 +28,13 @@ "release:canary": "changeset publish --tag canary --no-git-tag", "release:snapshot": "changeset publish --tag snapshot --no-git-tag", "release:verdaccio": "if [ \"$(npm config get registry)\" = \"https://registry.npmjs.org/\" ]; then echo 'Error: Using default registry' && exit 1; else TURBO_CONCURRENCY=1 npm run build && changeset publish --no-git-tag; fi", - "test": "FORCE_COLOR=1 turbo test --concurrency=${TURBO_CONCURRENCY:-80%} --filter=!elements", + "test": "FORCE_COLOR=1 turbo test --concurrency=${TURBO_CONCURRENCY:-80%}", "test:cache:clear": "FORCE_COLOR=1 turbo test:cache:clear --continue --concurrency=${TURBO_CONCURRENCY:-80%}", "test:integration:ap-flows": "npm run test:integration:base -- --grep @ap-flows", "test:integration:base": "DEBUG=1 npx playwright test --config integration/playwright.config.ts", "test:integration:cleanup": "DEBUG=1 npx playwright test --config integration/playwright.cleanup.config.ts", "test:integration:deployment:nextjs": "DEBUG=1 npx playwright test --config integration/playwright.deployments.config.ts", + "test:integration:elements": "E2E_APP_ID=elements.* npm run test:integration:base -- --grep @elements", "test:integration:express": "E2E_APP_ID=express.* npm run test:integration:base -- --grep @express", "test:integration:generic": "E2E_APP_ID=react.vite.* npm run test:integration:base -- --grep @generic", "test:integration:nextjs": "E2E_APP_ID=next.appRouter.* npm run test:integration:base -- --grep @nextjs", @@ -56,7 +57,7 @@ "@emotion/jest": "^11.11.0", "@faker-js/faker": "^8.1.0", "@octokit/rest": "^20.0.2", - "@playwright/test": "^1.39.0", + "@playwright/test": "^1.44.0", "@testing-library/dom": "^8.19.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", diff --git a/packages/elements/examples/nextjs/e2e/example.spec.ts b/packages/elements/examples/nextjs/e2e/example.spec.ts deleted file mode 100644 index edda257802..0000000000 --- a/packages/elements/examples/nextjs/e2e/example.spec.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('has component from @clerk/elements', async ({ page }) => { - await page.goto('/'); - await expect(page.getByText('Hello World!')).toBeVisible(); -}); diff --git a/packages/elements/examples/nextjs/package.json b/packages/elements/examples/nextjs/package.json index 6426a827bd..f8ea924bdf 100644 --- a/packages/elements/examples/nextjs/package.json +++ b/packages/elements/examples/nextjs/package.json @@ -6,7 +6,6 @@ "build": "next build", "dev": "next dev", "dev:debug": "NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG=true next dev", - "e2e": "playwright test", "lint": "next lint", "start": "next start" }, @@ -22,7 +21,6 @@ "react-dom": "^18" }, "devDependencies": { - "@playwright/test": "^1.43", "@types/node": "^18", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/packages/elements/examples/nextjs/playwright.config.ts b/packages/elements/examples/nextjs/playwright.config.ts deleted file mode 100644 index 268caf4280..0000000000 --- a/packages/elements/examples/nextjs/playwright.config.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { defineConfig, devices } from '@playwright/test'; -import path from 'path'; - -// eslint-disable-next-line turbo/no-undeclared-env-vars -const PORT = process.env.PORT || 3000; -const baseURL = `http://localhost:${PORT}`; - -// Reference: https://playwright.dev/docs/test-configuration -export default defineConfig({ - timeout: 30 * 1000, - testDir: path.join(__dirname, 'e2e'), - retries: 2, - outputDir: 'test-results/', - webServer: { - command: 'npm run dev', - url: baseURL, - timeout: 120 * 1000, - reuseExistingServer: !process.env.CI, // eslint-disable-line turbo/no-undeclared-env-vars - }, - use: { - baseURL, - trace: 'retry-with-trace', - - // https://playwright.dev/docs/api/class-browser#browser-new-context - // contextOptions: { - // ignoreHTTPSErrors: true, - // }, - }, - projects: [ - { - name: 'Desktop Chrome', - use: { - ...devices['Desktop Chrome'], - }, - }, - { - name: 'Desktop Firefox', - use: { - ...devices['Desktop Firefox'], - }, - }, - { - name: 'Desktop Safari', - use: { - ...devices['Desktop Safari'], - }, - }, - { - name: 'Mobile Chrome', - use: { - ...devices['Pixel 5'], - }, - }, - { - name: 'Mobile Safari', - use: devices['iPhone 12'], - }, - ], -}); diff --git a/packages/elements/src/react/common/form/index.tsx b/packages/elements/src/react/common/form/index.tsx index 7aae2cb166..8e748c7c5f 100644 --- a/packages/elements/src/react/common/form/index.tsx +++ b/packages/elements/src/react/common/form/index.tsx @@ -494,7 +494,8 @@ type FormInputProps = | RadixFormControlProps | ({ type: 'otp'; render: OTPInputProps['render'] } & Omit) | ({ type: 'otp'; render?: undefined } & OTPInputProps) - | ({ type: 'password' } & PasswordInputProps); + // Usecase: Toggle the visibility of the password input, therefore 'password' and 'text' are allowed + | ({ type: 'password' | 'text' } & PasswordInputProps); /** * Handles rendering of `` elements within Clerk's flows. Supports special `type` prop values to render input types that are unique to authentication and user management flows. Additional props will be passed through to the `` element. diff --git a/packages/testing/package.json b/packages/testing/package.json index a1e0f0877f..99803c71dd 100644 --- a/packages/testing/package.json +++ b/packages/testing/package.json @@ -68,7 +68,7 @@ }, "devDependencies": { "@clerk/eslint-config-custom": "*", - "@playwright/test": "^1.43.1", + "@playwright/test": "^1.44.0", "@types/node": "^18.17.0", "cypress": "^13.9.0", "tsup": "*", diff --git a/turbo.json b/turbo.json index bb45b8b0b1..227523ef09 100644 --- a/turbo.json +++ b/turbo.json @@ -165,6 +165,12 @@ "env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS"], "inputs": ["integration/**"], "outputMode": "new-only" + }, + "//#test:integration:elements": { + "dependsOn": ["^@clerk/nextjs#build", "^@clerk/elements#build"], + "env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS"], + "inputs": ["integration/**"], + "outputMode": "new-only" } } } From b91e0ef4036d215da09d144f85b0a5ef2afe6cba Mon Sep 17 00:00:00 2001 From: Tom Milewski Date: Fri, 24 May 2024 19:09:07 -0400 Subject: [PATCH 09/11] fix(clerk-js): Validate protocol on window navigation --- .changeset/unlucky-pumpkins-learn.md | 5 +++++ packages/clerk-js/src/core/clerk.ts | 8 +++++++- packages/clerk-js/src/utils/windowNavigate.ts | 9 ++++++++- 3 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 .changeset/unlucky-pumpkins-learn.md diff --git a/.changeset/unlucky-pumpkins-learn.md b/.changeset/unlucky-pumpkins-learn.md new file mode 100644 index 0000000000..f5d9e1ba33 --- /dev/null +++ b/.changeset/unlucky-pumpkins-learn.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Validate protocol on window navigation diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 2982f17faf..d960772146 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -780,7 +780,13 @@ export class Clerk implements ClerkInterface { return; } - const toURL = new URL(to, window.location.href); + let toURL = new URL(to, window.location.href); + + if (toURL.protocol !== 'http:' && toURL.protocol !== 'https:') { + console.warn('Clerk: Not a valid protocol. Redirecting to /'); + toURL = new URL('/', window.location.href); + } + const customNavigate = options?.replace && this.#options.routerReplace ? this.#options.routerReplace : this.#options.routerPush; diff --git a/packages/clerk-js/src/utils/windowNavigate.ts b/packages/clerk-js/src/utils/windowNavigate.ts index a184a943ac..1d440882d8 100644 --- a/packages/clerk-js/src/utils/windowNavigate.ts +++ b/packages/clerk-js/src/utils/windowNavigate.ts @@ -1,6 +1,13 @@ export const CLERK_BEFORE_UNLOAD_EVENT = 'clerk:beforeunload'; export function windowNavigate(to: URL | string): void { + let toURL = new URL(to, window.location.href); + + if (toURL.protocol !== 'http:' && toURL.protocol !== 'https:') { + console.warn('Clerk: Not a valid protocol. Redirecting to /'); + toURL = new URL('/', window.location.href); + } + window.dispatchEvent(new CustomEvent(CLERK_BEFORE_UNLOAD_EVENT)); - window.location.href = typeof to === 'string' ? to : to.href; + window.location.href = toURL.href; } From 9a3d4f9b4aeaa1a41af85ce20618daab5479020f Mon Sep 17 00:00:00 2001 From: Clerk Cookie <136073014+clerk-cookie@users.noreply.github.com> Date: Fri, 24 May 2024 20:05:22 -0400 Subject: [PATCH 10/11] ci(repo): Version packages (#3441) Co-authored-by: github-actions[bot] --- .changeset/healthy-turtles-compete.md | 5 ----- .changeset/unlucky-pumpkins-learn.md | 5 ----- package-lock.json | 12 ++++++------ packages/chrome-extension/CHANGELOG.md | 7 +++++++ packages/chrome-extension/package.json | 4 ++-- packages/clerk-js/CHANGELOG.md | 6 ++++++ packages/clerk-js/package.json | 2 +- packages/elements/CHANGELOG.md | 6 ++++++ packages/elements/package.json | 2 +- packages/expo/CHANGELOG.md | 7 +++++++ packages/expo/package.json | 4 ++-- 11 files changed, 38 insertions(+), 22 deletions(-) delete mode 100644 .changeset/healthy-turtles-compete.md delete mode 100644 .changeset/unlucky-pumpkins-learn.md diff --git a/.changeset/healthy-turtles-compete.md b/.changeset/healthy-turtles-compete.md deleted file mode 100644 index 9654483c7a..0000000000 --- a/.changeset/healthy-turtles-compete.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@clerk/elements': patch ---- - -Update the TypeScript type of `` to allow the `validatePassword` prop also on `type="text"` (in addition to `type="password"`) diff --git a/.changeset/unlucky-pumpkins-learn.md b/.changeset/unlucky-pumpkins-learn.md deleted file mode 100644 index f5d9e1ba33..0000000000 --- a/.changeset/unlucky-pumpkins-learn.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@clerk/clerk-js': patch ---- - -Validate protocol on window navigation diff --git a/package-lock.json b/package-lock.json index d8f35334ae..27dd1efeb6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39018,10 +39018,10 @@ }, "packages/chrome-extension": { "name": "@clerk/chrome-extension", - "version": "1.0.14", + "version": "1.0.15", "license": "MIT", "dependencies": { - "@clerk/clerk-js": "5.5.1", + "@clerk/clerk-js": "5.5.2", "@clerk/clerk-react": "5.2.1", "@clerk/shared": "2.2.1", "webextension-polyfill": "^0.10.0" @@ -39067,7 +39067,7 @@ }, "packages/clerk-js": { "name": "@clerk/clerk-js", - "version": "5.5.1", + "version": "5.5.2", "license": "MIT", "dependencies": { "@clerk/localizations": "2.4.3", @@ -39620,7 +39620,7 @@ }, "packages/elements": { "name": "@clerk/elements", - "version": "0.5.0", + "version": "0.5.1", "license": "MIT", "dependencies": { "@radix-ui/react-form": "^0.0.3", @@ -40029,10 +40029,10 @@ }, "packages/expo": { "name": "@clerk/clerk-expo", - "version": "1.1.6", + "version": "1.1.7", "license": "MIT", "dependencies": { - "@clerk/clerk-js": "5.5.1", + "@clerk/clerk-js": "5.5.2", "@clerk/clerk-react": "5.2.1", "@clerk/shared": "2.2.1", "base-64": "^1.0.0", diff --git a/packages/chrome-extension/CHANGELOG.md b/packages/chrome-extension/CHANGELOG.md index 3148ebfab4..f608b2b526 100644 --- a/packages/chrome-extension/CHANGELOG.md +++ b/packages/chrome-extension/CHANGELOG.md @@ -1,5 +1,12 @@ # Change Log +## 1.0.15 + +### Patch Changes + +- Updated dependencies [[`b91e0ef40`](https://github.com/clerk/javascript/commit/b91e0ef4036d215da09d144f85b0a5ef2afe6cba)]: + - @clerk/clerk-js@5.5.2 + ## 1.0.14 ### Patch Changes diff --git a/packages/chrome-extension/package.json b/packages/chrome-extension/package.json index 715ac863cc..d34fbd802e 100644 --- a/packages/chrome-extension/package.json +++ b/packages/chrome-extension/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/chrome-extension", - "version": "1.0.14", + "version": "1.0.15", "description": "Clerk SDK for Chrome extensions", "keywords": [ "auth", @@ -44,7 +44,7 @@ "test:coverage": "jest --collectCoverage && open coverage/lcov-report/index.html" }, "dependencies": { - "@clerk/clerk-js": "5.5.1", + "@clerk/clerk-js": "5.5.2", "@clerk/clerk-react": "5.2.1", "@clerk/shared": "2.2.1", "webextension-polyfill": "^0.10.0" diff --git a/packages/clerk-js/CHANGELOG.md b/packages/clerk-js/CHANGELOG.md index ae7f11a684..bcd7e9e1cd 100644 --- a/packages/clerk-js/CHANGELOG.md +++ b/packages/clerk-js/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 5.5.2 + +### Patch Changes + +- Validate protocol on window navigation by [@tmilewski](https://github.com/tmilewski) + ## 5.5.1 ### Patch Changes diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json index 9da6d6e2dc..3f83057c4b 100644 --- a/packages/clerk-js/package.json +++ b/packages/clerk-js/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/clerk-js", - "version": "5.5.1", + "version": "5.5.2", "description": "Clerk JS library", "keywords": [ "clerk", diff --git a/packages/elements/CHANGELOG.md b/packages/elements/CHANGELOG.md index 6a49792779..1d8da9a4c5 100644 --- a/packages/elements/CHANGELOG.md +++ b/packages/elements/CHANGELOG.md @@ -1,5 +1,11 @@ # @clerk/elements +## 0.5.1 + +### Patch Changes + +- Update the TypeScript type of `` to allow the `validatePassword` prop also on `type="text"` (in addition to `type="password"`) ([#3394](https://github.com/clerk/javascript/pull/3394)) by [@LekoArts](https://github.com/LekoArts) + ## 0.5.0 ### Minor Changes diff --git a/packages/elements/package.json b/packages/elements/package.json index 422bba6763..0915f12b90 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/elements", - "version": "0.5.0", + "version": "0.5.1", "description": "Clerk Elements", "keywords": [ "clerk", diff --git a/packages/expo/CHANGELOG.md b/packages/expo/CHANGELOG.md index c6dded898c..1a2ae0f7d8 100644 --- a/packages/expo/CHANGELOG.md +++ b/packages/expo/CHANGELOG.md @@ -1,5 +1,12 @@ # Change Log +## 1.1.7 + +### Patch Changes + +- Updated dependencies [[`b91e0ef40`](https://github.com/clerk/javascript/commit/b91e0ef4036d215da09d144f85b0a5ef2afe6cba)]: + - @clerk/clerk-js@5.5.2 + ## 1.1.6 ### Patch Changes diff --git a/packages/expo/package.json b/packages/expo/package.json index 778962ab53..7b73c6a96f 100644 --- a/packages/expo/package.json +++ b/packages/expo/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/clerk-expo", - "version": "1.1.6", + "version": "1.1.7", "description": "Clerk React Native/Expo library", "keywords": [ "react", @@ -39,7 +39,7 @@ "publish:local": "npx yalc push --replace --sig" }, "dependencies": { - "@clerk/clerk-js": "5.5.1", + "@clerk/clerk-js": "5.5.2", "@clerk/clerk-react": "5.2.1", "@clerk/shared": "2.2.1", "base-64": "^1.0.0", From 6fbf87094761c8e6e273579dd2ea386e70478613 Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Mon, 27 May 2024 13:09:25 +0300 Subject: [PATCH 11/11] chore(repo): Update navigation.test to use a long running app (#3439) --- .changeset/serious-turtles-rhyme.md | 2 + .github/workflows/ci.yml | 2 +- integration/presets/longRunningApps.ts | 2 +- .../src/app/hash/sign-in/[[...page]]/page.tsx | 9 +++ .../testUtils/testAgainstRunningApps.ts | 12 +++- integration/tests/navigation.test.ts | 63 +------------------ package.json | 2 +- 7 files changed, 26 insertions(+), 66 deletions(-) create mode 100644 .changeset/serious-turtles-rhyme.md create mode 100644 integration/templates/next-app-router/src/app/hash/sign-in/[[...page]]/page.tsx diff --git a/.changeset/serious-turtles-rhyme.md b/.changeset/serious-turtles-rhyme.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/serious-turtles-rhyme.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index f56e11a435..c7fc84ce4c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -129,7 +129,7 @@ jobs: strategy: matrix: - test-name: ['generic', 'nextjs', 'express', 'quickstart', 'ap-flows', 'elements'] + test-name: [ 'generic', 'nextjs', 'express', 'quickstart', 'ap-flows', 'elements' ] test-project: ['chrome'] steps: diff --git a/integration/presets/longRunningApps.ts b/integration/presets/longRunningApps.ts index 3b9b2fcd86..1a3199f133 100644 --- a/integration/presets/longRunningApps.ts +++ b/integration/presets/longRunningApps.ts @@ -28,7 +28,7 @@ export const createLongRunningApps = () => { return { getByPattern: (patterns: Array) => { - const res = new Set(...patterns.map(pattern => apps.filter(app => idMatchesPattern(app.id, pattern)))); + const res = new Set(patterns.map(pattern => apps.filter(app => idMatchesPattern(app.id, pattern))).flat()); if (!res.size) { const availableIds = configs.map(c => `\n- ${c.id}`).join(''); throw new Error(`Could not find long running app with id ${patterns}. The available ids are: ${availableIds}`); diff --git a/integration/templates/next-app-router/src/app/hash/sign-in/[[...page]]/page.tsx b/integration/templates/next-app-router/src/app/hash/sign-in/[[...page]]/page.tsx new file mode 100644 index 0000000000..ebd4b5dca0 --- /dev/null +++ b/integration/templates/next-app-router/src/app/hash/sign-in/[[...page]]/page.tsx @@ -0,0 +1,9 @@ +import { SignIn } from '@clerk/nextjs'; + +export default function Page() { + return ( +
+ +
+ ); +} diff --git a/integration/testUtils/testAgainstRunningApps.ts b/integration/testUtils/testAgainstRunningApps.ts index 9638be2487..2b8c67752d 100644 --- a/integration/testUtils/testAgainstRunningApps.ts +++ b/integration/testUtils/testAgainstRunningApps.ts @@ -10,6 +10,7 @@ import { parseEnvOptions } from '../scripts'; type RunningAppsParams = { withEnv?: EnvironmentConfig | EnvironmentConfig[]; + withPattern?: string[]; }; /** @@ -20,12 +21,15 @@ type RunningAppsParams = { */ const runningApps = (params: RunningAppsParams = {}) => { const withEnv = [params.withEnv].flat().filter(Boolean); + const withPattern = (params.withPattern || []).flat().filter(Boolean); const { appIds, appUrl, appPk, appSk, clerkApiUrl } = parseEnvOptions(); + if (appIds.length) { // if appIds are provided, we only return the apps with the given ids const filter = app => (withEnv.length ? withEnv.includes(app.env) : true); - return appConfigs.longRunningApps.getByPattern(appIds).filter(filter); + return appConfigs.longRunningApps.getByPattern(withPattern.length ? withPattern : appIds).filter(filter); } + // if no appIds are provided, it means that the user is running an app manually // so, we return the app with the given env const env = environmentConfig() @@ -33,11 +37,12 @@ const runningApps = (params: RunningAppsParams = {}) => { .setEnvVariable('private', 'CLERK_SECRET_KEY', appSk) .setEnvVariable('private', 'CLERK_API_URL', clerkApiUrl) .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', appPk); + return [longRunningApplication({ id: 'standalone', env, serverUrl: appUrl, config: applicationConfig() })]; }; -export const testAgainstRunningApps = - (runningAppsParams: RunningAppsParams) => (title: string, cb: (p: { app: Application }) => void) => { +export function testAgainstRunningApps(runningAppsParams: RunningAppsParams) { + return (title: string, cb: (p: { app: Application }) => void) => { test.describe(title, () => { runningApps(runningAppsParams).forEach(app => { test.describe(`${app.name}`, () => { @@ -46,3 +51,4 @@ export const testAgainstRunningApps = }); }); }; +} diff --git a/integration/tests/navigation.test.ts b/integration/tests/navigation.test.ts index 0f2cdb3fc3..e7332d3028 100644 --- a/integration/tests/navigation.test.ts +++ b/integration/tests/navigation.test.ts @@ -1,70 +1,13 @@ import { test } from '@playwright/test'; -import type { Application } from '../models/application'; -import { appConfigs } from '../presets'; import type { FakeUser } from '../testUtils'; -import { createTestUtils } from '../testUtils'; +import { createTestUtils, testAgainstRunningApps } from '../testUtils'; -test.describe('navigation modes @generic', () => { +testAgainstRunningApps({ withPattern: ['next.appRouter.withEmailCodes'] })('navigation modes @generic', ({ app }) => { test.describe.configure({ mode: 'serial' }); - let app: Application; let fakeUser: FakeUser; test.beforeAll(async () => { - app = await appConfigs.next.appRouter - .clone() - .addFile( - 'src/app/provider.tsx', - () => `'use client' -import { ClerkProvider } from "@clerk/nextjs"; - -export function Provider({ children }: { children: any }) { - return ( - - {children} - - ) -}`, - ) - .addFile( - 'src/app/layout.tsx', - () => `import './globals.css'; -import { Inter } from 'next/font/google'; -import { Provider } from './provider'; - -const inter = Inter({ subsets: ['latin'] }); - -export const metadata = { - title: 'Create Next App', - description: 'Generated by create next app', -}; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - - ); -}`, - ) - .addFile( - 'src/app/hash/sign-in/page.tsx', - () => ` -import { SignIn } from '@clerk/nextjs'; - -export default function Page() { - return ( - - ); -}`, - ) - .commit(); - await app.setup(); - await app.withEnv(appConfigs.envs.withEmailCodes); - await app.dev(); - const m = createTestUtils({ app }); fakeUser = m.services.users.createFakeUser(); await m.services.users.createBapiUser(fakeUser); @@ -105,7 +48,7 @@ export default function Page() { await u.po.expect.toBeSignedIn(); }); - test('sign in with path routing navigates to previous page', async ({ page, context }) => { + test.skip('sign in with path routing navigates to previous page', async ({ page, context }) => { const u = createTestUtils({ app, page, context }); await u.po.signIn.goTo(); await u.po.signIn.waitForMounted(); diff --git a/package.json b/package.json index d2901305a9..a58dafb7d3 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "test:integration:deployment:nextjs": "DEBUG=1 npx playwright test --config integration/playwright.deployments.config.ts", "test:integration:elements": "E2E_APP_ID=elements.* npm run test:integration:base -- --grep @elements", "test:integration:express": "E2E_APP_ID=express.* npm run test:integration:base -- --grep @express", - "test:integration:generic": "E2E_APP_ID=react.vite.* npm run test:integration:base -- --grep @generic", + "test:integration:generic": "E2E_APP_ID=react.vite.*,next.appRouter.withEmailCodes npm run test:integration:base -- --grep @generic", "test:integration:nextjs": "E2E_APP_ID=next.appRouter.* npm run test:integration:base -- --grep @nextjs", "test:integration:quickstart": "E2E_APP_ID=quickstart.* npm run test:integration:base -- --grep @quickstart", "test:integration:remix": "echo 'placeholder'",