Upgrade Clerk to use Clerk Core 2

packages/auth-providers/clerk/api/package.json

@@ -39,7 +39,7 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@clerk/clerk-sdk-node": "4.13.21"
+    "@clerk/clerk-sdk-node": "5.0.52"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.16.4",

packages/auth-providers/clerk/api/src/decoder.ts

@@ -8,25 +8,26 @@ export const authDecoder: Decoder = async (token: string, type: string) => {
     return null
   }
 
-  const { users, verifyToken } = await import('@clerk/clerk-sdk-node')
+  const { verifyToken, createClerkClient } = await import(
+    '@clerk/clerk-sdk-node'
+  )
 
   try {
-    const issuer = (iss: string) =>
-      iss.startsWith('https://clerk.') || iss.includes('.clerk.accounts')
-
-    const jwtPayload = await verifyToken(token, {
-      issuer,
+    const options = {
       apiUrl: process.env.CLERK_API_URL || 'https://api.clerk.dev',
       jwtKey: process.env.CLERK_JWT_KEY,
-      apiKey: process.env.CLERK_API_KEY,
       secretKey: process.env.CLERK_SECRET_KEY,
-    })
+    }
+
+    const jwtPayload = await verifyToken(token, options)
 
     if (!jwtPayload.sub) {
       return Promise.reject(new Error('Session invalid'))
     }
 
-    const user = await users.getUser(jwtPayload.sub)
+    const clerkClient = createClerkClient(options)
+
+    const user = await clerkClient.users.getUser(jwtPayload.sub)
 
     return {
       ...user,
@@ -49,14 +50,9 @@ export const clerkAuthDecoder: Decoder = async (
   const { verifyToken } = await import('@clerk/clerk-sdk-node')
 
   try {
-    const issuer = (iss: string) =>
-      iss.startsWith('https://clerk.') || iss.includes('.clerk.accounts')
-
     const jwtPayload = await verifyToken(token, {
-      issuer,
       apiUrl: process.env.CLERK_API_URL || 'https://api.clerk.dev',
       jwtKey: process.env.CLERK_JWT_KEY,
-      apiKey: process.env.CLERK_API_KEY,
       secretKey: process.env.CLERK_SECRET_KEY,
     })
 

packages/auth-providers/clerk/setup/src/setupHandler.ts

@@ -16,7 +16,7 @@ export const handler = async ({ force: forceArg }: Args) => {
     authDecoderImport: `import { clerkAuthDecoder as authDecoder } from '@redwoodjs/auth-clerk-api'`,
     provider: 'clerk',
     webPackages: [
-      '@clerk/clerk-react@^4',
+      '@clerk/clerk-react@^5',
       `@redwoodjs/auth-clerk-web@${version}`,
     ],
     apiPackages: [`@redwoodjs/auth-clerk-api@${version}`],

packages/auth-providers/clerk/setup/src/templates/web/auth.rsc.tsx.template

@@ -22,9 +22,7 @@ const ClerkStatusUpdater = () => {
   return null
 }
 
-type ClerkOptions =
-  | { publishableKey: string; frontendApi?: never }
-  | { publishableKey?: never; frontendApi: string }
+type ClerkOptions = { publishableKey: string }
 
 interface Props {
   children: React.ReactNode
@@ -39,7 +37,8 @@ const ClerkProviderWrapper = ({
   return (
     <ClerkProvider
       {...clerkOptions}
-      navigate={(to) => reauthenticate().then(() => navigate(to))}
+      routerPush={(to) => reauthenticate().then(() => navigate(to))}
+      routerPush={(to) => reauthenticate().then(() => navigate(to, { replace: true }))}
     >
       {children}
       <ClerkStatusUpdater />
@@ -49,12 +48,8 @@ const ClerkProviderWrapper = ({
 
 export const AuthProvider = ({ children }: Props) => {
   const publishableKey = process.env.CLERK_PUBLISHABLE_KEY
-  const frontendApi =
-    process.env.CLERK_FRONTEND_API_URL || process.env.CLERK_FRONTEND_API
 
-  const clerkOptions: ClerkOptions = publishableKey
-    ? { publishableKey }
-    : { frontendApi }
+  const clerkOptions: ClerkOptions = { publishableKey }
 
   return (
     <ClerkRwAuthProvider>

packages/auth-providers/clerk/web/package.json

@@ -52,8 +52,8 @@
     "@redwoodjs/auth": "workspace:*"
   },
   "devDependencies": {
-    "@clerk/clerk-react": "4.32.3",
-    "@clerk/types": "3.65.3",
+    "@clerk/clerk-react": "5.12.0",
+    "@clerk/types": "4.26.0",
     "@redwoodjs/framework-tools": "workspace:*",
     "@types/react": "^18.2.55",
     "concurrently": "8.2.2",
@@ -64,7 +64,7 @@
     "vitest": "2.0.5"
   },
   "peerDependencies": {
-    "@clerk/clerk-react": "4.32.3"
+    "@clerk/clerk-react": "5.12.0"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
 }

packages/cli-helpers/src/auth/__tests__/__snapshots__/authTasks.test.ts.snap

@@ -316,7 +316,11 @@ export const AuthProvider = ({ children }: Props) => {
   }
 
   return (
-    <ClerkProvider frontendApi={frontendApi} navigate={(to) => navigate(to)}>
+    <ClerkProvider
+      publishableKey={frontendApi}
+      routerPush={(to) => navigate(to)}
+      routerReplace={(to) => navigate(to, { replace: true })}
+    >
       <ClerkRwAuthProvider>
         <ClerkLoaded>{children}</ClerkLoaded>
         <ClerkStatusUpdater />

packages/cli-helpers/src/auth/__tests__/mockFsFiles.ts

@@ -111,7 +111,11 @@ export const AuthProvider = ({ children }: Props) => {
   }
 
   return (
-    <ClerkProvider frontendApi={frontendApi} navigate={(to) => navigate(to)}>
+    <ClerkProvider
+      publishableKey={frontendApi}
+      routerPush={(to) => navigate(to)}
+      routerReplace={(to) => navigate(to, { replace: true })}
+    >
       <ClerkRwAuthProvider>
         <ClerkLoaded>{children}</ClerkLoaded>
         <ClerkStatusUpdater />