From e70fe1592bc22733c392ac4029ddc177ee9930d7 Mon Sep 17 00:00:00 2001 From: Jay Patel Date: Fri, 2 Oct 2026 18:39:30 +0530 Subject: [PATCH] Move the frontend to @clerk/react (Clerk Core 3) --- package.json | 2 +- pnpm-lock.yaml | 66 ++++++++-------------------- src/app/main.tsx | 6 +-- src/features/auth/AccountButton.tsx | 2 +- src/features/auth/AuthBridge.tsx | 2 +- src/features/auth/UpgradeModal.tsx | 2 +- src/features/auth/clerkAppearance.ts | 10 ++--- 7 files changed, 31 insertions(+), 59 deletions(-) diff --git a/package.json b/package.json index f72c179..1916e91 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@clerk/backend": "^3.12.0", - "@clerk/clerk-react": "^5.61.9", + "@clerk/react": "^6.0.0", "@dnd-kit/core": "^6.3.1", "@dnd-kit/sortable": "^10.0.0", "@dnd-kit/utilities": "^3.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 903fe51..7285ba1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,9 +11,9 @@ importers: '@clerk/backend': specifier: ^3.12.0 version: 3.12.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8) - '@clerk/clerk-react': - specifier: ^5.61.9 - version: 5.61.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@clerk/react': + specifier: ^6.0.0 + version: 6.17.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@dnd-kit/core': specifier: ^6.3.1 version: 6.3.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8) @@ -91,7 +91,7 @@ importers: version: 3.6.0 zustand: specifier: ^5.0.14 - version: 5.0.14(@types/react@19.2.17)(react@19.2.8)(use-sync-external-store@1.6.0(react@19.2.8)) + version: 5.0.14(@types/react@19.2.17)(react@19.2.8) devDependencies: '@tailwindcss/postcss': specifier: ^4.3.3 @@ -693,16 +693,16 @@ packages: resolution: {integrity: sha512-AyrNvel4KcLSjQCf6wXKXtzz7VZbpIuM4lNkA3Tsfs0CAT+XKJiV3HyrJKgpGnL29K3TeWeYfzPbQvL/Gcy59g==} engines: {node: '>=20.9.0'} - '@clerk/clerk-react@5.61.9': - resolution: {integrity: sha512-PRIodE1QVem/eV3wrjicJJiJ2pkGiZfI6t1vekE/+04cIHciXyvUezQ/468gGPl31xd7BiCNO3uKNM14TXEKZQ==} - engines: {node: '>=18.17.0'} + '@clerk/react@6.17.4': + resolution: {integrity: sha512-rWpdpePDf7BrQQ+vN8yO4qeH6WxehHHa3rmg3+cxyLz/0Oy9bt8MrEDzvWnkUGZPQ4RYW5n64sytf8Ry0jGyUw==} + engines: {node: '>=20.9.0'} peerDependencies: react: ^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0 react-dom: ^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0 - '@clerk/shared@3.47.8': - resolution: {integrity: sha512-cPURU1it/Eal4uXO9SOcHzw9sfE6Opi21W8EJUg+Ri80Q6JKtK8qBmyOpIyqgf09EanexhTzS4xrmYlvn2p7Iw==} - engines: {node: '>=18.17.0'} + '@clerk/shared@4.25.6': + resolution: {integrity: sha512-d7Yhi0T5QE0/NCm0ZHgokQMrWHjOCPqU5few3C6Fujw8VR6w16wdAEcGJPS1xo47SXMr8DptXwDE9myyHj71MQ==} + engines: {node: '>=20.9.0'} peerDependencies: react: ^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0 react-dom: ^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0 @@ -712,8 +712,8 @@ packages: react-dom: optional: true - '@clerk/shared@4.25.6': - resolution: {integrity: sha512-d7Yhi0T5QE0/NCm0ZHgokQMrWHjOCPqU5few3C6Fujw8VR6w16wdAEcGJPS1xo47SXMr8DptXwDE9myyHj71MQ==} + '@clerk/shared@4.37.1': + resolution: {integrity: sha512-kzUuDJW1PKKrH7szqfhBf1RaXgfJPQLrZMrxg9rgyUP+RMElhmBGJUB+7/0Wkkfyv0G3UyVBDu3NR1wXfx0XdQ==} engines: {node: '>=20.9.0'} peerDependencies: react: ^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0 @@ -2405,9 +2405,6 @@ packages: resolution: {integrity: sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==} engines: {node: '>=20'} - csstype@3.1.3: - resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} - csstype@3.2.3: resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} @@ -3756,11 +3753,6 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - swr@2.3.4: - resolution: {integrity: sha512-bYd2lrhc+VarcpkgWclcUi92wYCpOgMws9Sd1hG1ntAu0NEy+14CbotuFjshBU2kt9rYj9TSmDcybpxpeTU1fg==} - peerDependencies: - react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} @@ -3936,11 +3928,6 @@ packages: '@types/react': optional: true - use-sync-external-store@1.6.0: - resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - vite-node@3.2.4: resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} @@ -4910,31 +4897,29 @@ snapshots: - react - react-dom - '@clerk/clerk-react@5.61.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@clerk/react@6.17.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@clerk/shared': 3.47.8(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@clerk/shared': 4.37.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8) react: 19.2.8 react-dom: 19.2.8(react@19.2.8) tslib: 2.8.1 - '@clerk/shared@3.47.8(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@clerk/shared@4.25.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - csstype: 3.1.3 + '@tanstack/query-core': 5.101.4 dequal: 2.0.3 glob-to-regexp: 0.4.1 js-cookie: 3.0.7 - std-env: 3.10.0 - swr: 2.3.4(react@19.2.8) optionalDependencies: react: 19.2.8 react-dom: 19.2.8(react@19.2.8) - '@clerk/shared@4.25.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@clerk/shared@4.37.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@tanstack/query-core': 5.101.4 dequal: 2.0.3 glob-to-regexp: 0.4.1 - js-cookie: 3.0.7 + js-cookie: 3.0.8 optionalDependencies: react: 19.2.8 react-dom: 19.2.8(react@19.2.8) @@ -6261,8 +6246,6 @@ snapshots: css-tree: 3.2.1 lru-cache: 11.5.2 - csstype@3.1.3: {} - csstype@3.2.3: {} data-urls@6.0.1: @@ -7644,12 +7627,6 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - swr@2.3.4(react@19.2.8): - dependencies: - dequal: 2.0.3 - react: 19.2.8 - use-sync-external-store: 1.6.0(react@19.2.8) - symbol-tree@3.2.4: {} tailwind-merge@3.6.0: {} @@ -7811,10 +7788,6 @@ snapshots: optionalDependencies: '@types/react': 19.2.17 - use-sync-external-store@1.6.0(react@19.2.8): - dependencies: - react: 19.2.8 - vite-node@3.2.4(@types/node@26.1.1)(jiti@2.7.0)(lightningcss@1.33.0)(terser@5.49.0)(tsx@4.23.1): dependencies: cac: 6.7.14 @@ -8106,8 +8079,7 @@ snapshots: yallist@3.1.1: {} - zustand@5.0.14(@types/react@19.2.17)(react@19.2.8)(use-sync-external-store@1.6.0(react@19.2.8)): + zustand@5.0.14(@types/react@19.2.17)(react@19.2.8): optionalDependencies: '@types/react': 19.2.17 react: 19.2.8 - use-sync-external-store: 1.6.0(react@19.2.8) diff --git a/src/app/main.tsx b/src/app/main.tsx index 529408f..7e19182 100644 --- a/src/app/main.tsx +++ b/src/app/main.tsx @@ -42,15 +42,15 @@ async function render() { let content: ReactNode; if (CLERK_KEY) { // Dynamic import keeps Clerk out of the initial bundle for self-hosted installs - const { ClerkProvider } = await import("@clerk/clerk-react"); + const { ClerkProvider } = await import("@clerk/react"); content = ( // ClerkErrorBoundary catches invalid keys, network failures, or any other // Clerk init error and falls back to local-only mode automatically. {routes}}> {routes} diff --git a/src/features/auth/AccountButton.tsx b/src/features/auth/AccountButton.tsx index a607cca..e24edc6 100644 --- a/src/features/auth/AccountButton.tsx +++ b/src/features/auth/AccountButton.tsx @@ -1,5 +1,5 @@ import { useState, type ReactNode } from "react"; -import { useAuth, useClerk, useUser } from "@clerk/clerk-react"; +import { useAuth, useClerk, useUser } from "@clerk/react"; import { HiOutlineUser, HiOutlineCloud, diff --git a/src/features/auth/AuthBridge.tsx b/src/features/auth/AuthBridge.tsx index e240e62..3f403d5 100644 --- a/src/features/auth/AuthBridge.tsx +++ b/src/features/auth/AuthBridge.tsx @@ -1,5 +1,5 @@ import { useEffect } from "react"; -import { useAuth, useUser } from "@clerk/clerk-react"; +import { useAuth, useUser } from "@clerk/react"; import { useAuthStore } from "@/features/auth/stores"; import { useSettingsStore } from "@/features/settings/stores"; import { syncSettingsFromCloud } from "@/lib/settings"; diff --git a/src/features/auth/UpgradeModal.tsx b/src/features/auth/UpgradeModal.tsx index 64e1201..3691cea 100644 --- a/src/features/auth/UpgradeModal.tsx +++ b/src/features/auth/UpgradeModal.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { useAuth } from "@clerk/clerk-react"; +import { useAuth } from "@clerk/react"; import { Dialog, DialogContent, diff --git a/src/features/auth/clerkAppearance.ts b/src/features/auth/clerkAppearance.ts index 1c4245d..3eeecbe 100644 --- a/src/features/auth/clerkAppearance.ts +++ b/src/features/auth/clerkAppearance.ts @@ -7,12 +7,12 @@ export const clerkAppearance = { variables: { colorPrimary: "var(--primary)", - colorTextOnPrimaryBackground: "var(--primary-foreground)", + colorPrimaryForeground: "var(--primary-foreground)", colorBackground: "var(--background)", - colorInputBackground: "var(--background)", - colorInputText: "var(--foreground)", - colorText: "var(--foreground)", - colorTextSecondary: "var(--muted-foreground)", + colorInput: "var(--background)", + colorInputForeground: "var(--foreground)", + colorForeground: "var(--foreground)", + colorMutedForeground: "var(--muted-foreground)", colorDanger: "var(--destructive)", colorNeutral: "var(--foreground)", colorShimmer: "var(--muted)",