Skip to content

Commit fc0c99e

Browse files
Tobbejustinadkins
Tobbe
and
justinadkins
authored
feat(deps): Upgrade to Clerk Core v2 and Clerk React v5 (#99)
This PR updates redwood's usage of Clerk authentication to [Clerk Core 2](https://clerk.com/docs/upgrade-guides/core-2/overview) which was introduced back in April 2024 as the new major version for Clerk. Core 1 which is currently being used by CedarJS will lose long term support in Q1 2025. Core 2 also brings with it a lot of nice UI updates with @clerk/[email protected] seeing considerable improvements. Huge shoutouts to @justinadkins who got started on this PR over at the Redwood repo Notable breaking changes: - The `frontendApi` prop is no longer supported on `<ClerkProvider>` - The `process.env.CLERK_FRONTEND_API_URL` and `process.env.CLERK_FRONTEND_API` env vars are no longer used (Only `process.env.CLERK_PUBLISHABLE_KEY` is used) - The `process.env.CLERK_API_KEY` env var is no longer used on the api side. See https://clerk.com/docs/upgrade-guides/core-2/overview for more details --------- Co-authored-by: Justin Adkins <[email protected]> Co-authored-by: Justin Adkins <[email protected]>
1 parent f7fafab commit fc0c99e

File tree

10 files changed

+177
-282
lines changed

10 files changed

+177
-282
lines changed

‎.changesets/99.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
- feat(deps): Upgrade to Clerk Core v2 and Clerk React v5 (#99) by @Tobbe
2+
3+
This PR updates redwood's usage of Clerk authentication to [Clerk Core 2](https://clerk.com/docs/upgrade-guides/core-2/overview) which was introduced back in April 2024 as the new major version for Clerk.
4+
5+
Notable breaking changes:
6+
7+
- The `frontendApi` prop is no longer supported on `<ClerkProvider>`
8+
- The `process.env.CLERK_FRONTEND_API_URL` and `process.env.CLERK_FRONTEND_API` env vars are no longer used (Only `process.env.CLERK_PUBLISHABLE_KEY` is used)
9+
- The `process.env.CLERK_API_KEY` env var is no longer used on the api side.
10+
11+
See https://clerk.com/docs/upgrade-guides/core-2/overview for more details

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"test:watch": "vitest watch"
4040
},
4141
"dependencies": {
42-
"@clerk/clerk-sdk-node": "4.13.21"
42+
"@clerk/clerk-sdk-node": "5.0.52"
4343
},
4444
"devDependencies": {
4545
"@arethetypeswrong/cli": "0.18.1",

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,26 @@ export const authDecoder: Decoder = async (token: string, type: string) => {
88
return null
99
}
1010

11-
const { users, verifyToken } = await import('@clerk/clerk-sdk-node')
11+
const { createClerkClient, verifyToken } = await import(
12+
'@clerk/clerk-sdk-node'
13+
)
1214

1315
try {
14-
const issuer = (iss: string) =>
15-
iss.startsWith('https://clerk.') || iss.includes('.clerk.accounts')
16-
17-
const jwtPayload = await verifyToken(token, {
18-
issuer,
16+
const options = {
1917
apiUrl: process.env.CLERK_API_URL || 'https://api.clerk.dev',
2018
jwtKey: process.env.CLERK_JWT_KEY,
21-
apiKey: process.env.CLERK_API_KEY,
2219
secretKey: process.env.CLERK_SECRET_KEY,
23-
})
20+
}
21+
22+
const jwtPayload = await verifyToken(token, options)
2423

2524
if (!jwtPayload.sub) {
2625
return Promise.reject(new Error('Session invalid'))
2726
}
2827

29-
const user = await users.getUser(jwtPayload.sub)
28+
const clerkClient = createClerkClient(options)
29+
30+
const user = await clerkClient.users.getUser(jwtPayload.sub)
3031

3132
return {
3233
...user,
@@ -49,14 +50,9 @@ export const clerkAuthDecoder: Decoder = async (
4950
const { verifyToken } = await import('@clerk/clerk-sdk-node')
5051

5152
try {
52-
const issuer = (iss: string) =>
53-
iss.startsWith('https://clerk.') || iss.includes('.clerk.accounts')
54-
5553
const jwtPayload = await verifyToken(token, {
56-
issuer,
5754
apiUrl: process.env.CLERK_API_URL || 'https://api.clerk.dev',
5855
jwtKey: process.env.CLERK_JWT_KEY,
59-
apiKey: process.env.CLERK_API_KEY,
6056
secretKey: process.env.CLERK_SECRET_KEY,
6157
})
6258

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const handler = async ({ force: forceArg }: Args) => {
1616
authDecoderImport: `import { clerkAuthDecoder as authDecoder } from '@cedarjs/auth-clerk-api'`,
1717
provider: 'clerk',
1818
webPackages: [
19-
'@clerk/clerk-react@^4',
19+
'@clerk/clerk-react@^5',
2020
`@cedarjs/auth-clerk-web@${version}`,
2121
],
2222
apiPackages: [`@cedarjs/auth-clerk-api@${version}`],

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

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,7 @@ const ClerkStatusUpdater = () => {
2222
return null
2323
}
2424

25-
type ClerkOptions =
26-
| { publishableKey: string; frontendApi?: never }
27-
| { publishableKey?: never; frontendApi: string }
25+
type ClerkOptions = { publishableKey: string }
2826

2927
interface Props {
3028
children: React.ReactNode
@@ -39,7 +37,8 @@ const ClerkProviderWrapper = ({
3937
return (
4038
<ClerkProvider
4139
{...clerkOptions}
42-
navigate={(to) => reauthenticate().then(() => navigate(to))}
40+
routerPush={(to) => reauthenticate().then(() => navigate(to))}
41+
routerReplace={(to) => reauthenticate().then(() => navigate(to, { replace: true }))}
4342
>
4443
{children}
4544
<ClerkStatusUpdater />
@@ -49,16 +48,10 @@ const ClerkProviderWrapper = ({
4948

5049
export const AuthProvider = ({ children }: Props) => {
5150
const publishableKey = process.env.CLERK_PUBLISHABLE_KEY
52-
const frontendApi =
53-
process.env.CLERK_FRONTEND_API_URL || process.env.CLERK_FRONTEND_API
54-
55-
const clerkOptions: ClerkOptions = publishableKey
56-
? { publishableKey }
57-
: { frontendApi }
5851

5952
return (
6053
<ClerkRwAuthProvider>
61-
<ClerkProviderWrapper clerkOptions={clerkOptions}>
54+
<ClerkProviderWrapper clerkOptions={{ publishableKey }}>
6255
{children}
6356
</ClerkProviderWrapper>
6457
</ClerkRwAuthProvider>

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

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,7 @@ const ClerkStatusUpdater = () => {
2020
return null
2121
}
2222

23-
type ClerkOptions =
24-
| { publishableKey: string; frontendApi?: never }
25-
| { publishableKey?: never; frontendApi: string }
23+
type ClerkOptions = { publishableKey: string }
2624

2725
interface Props {
2826
children: React.ReactNode
@@ -37,7 +35,8 @@ const ClerkProviderWrapper = ({
3735
return (
3836
<ClerkProvider
3937
{...clerkOptions}
40-
navigate={(to) => reauthenticate().then(() => navigate(to))}
38+
routerPush={(to) => reauthenticate().then(() => navigate(to))}
39+
routerReplace={(to) => reauthenticate().then(() => navigate(to, { replace: true }))}
4140
>
4241
{children}
4342
<ClerkStatusUpdater />
@@ -47,16 +46,10 @@ const ClerkProviderWrapper = ({
4746

4847
export const AuthProvider = ({ children }: Props) => {
4948
const publishableKey = process.env.CLERK_PUBLISHABLE_KEY
50-
const frontendApi =
51-
process.env.CLERK_FRONTEND_API_URL || process.env.CLERK_FRONTEND_API
52-
53-
const clerkOptions: ClerkOptions = publishableKey
54-
? { publishableKey }
55-
: { frontendApi }
5649

5750
return (
5851
<ClerkRwAuthProvider>
59-
<ClerkProviderWrapper clerkOptions={clerkOptions}>
52+
<ClerkProviderWrapper clerkOptions={{ publishableKey }}>
6053
{children}
6154
</ClerkProviderWrapper>
6255
</ClerkRwAuthProvider>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@
5353
},
5454
"devDependencies": {
5555
"@cedarjs/framework-tools": "workspace:*",
56-
"@clerk/clerk-react": "4.32.4",
57-
"@clerk/types": "3.65.4",
56+
"@clerk/clerk-react": "5.31.7",
57+
"@clerk/types": "4.59.2",
5858
"@types/react": "^18.2.55",
5959
"concurrently": "8.2.2",
6060
"publint": "0.3.12",
@@ -64,7 +64,7 @@
6464
"vitest": "2.1.9"
6565
},
6666
"peerDependencies": {
67-
"@clerk/clerk-react": "4.32.4"
67+
"@clerk/clerk-react": "5.12.0"
6868
},
6969
"gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
7070
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,11 @@ export const AuthProvider = ({ children }: Props) => {
316316
}
317317
318318
return (
319-
<ClerkProvider frontendApi={frontendApi} navigate={(to) => navigate(to)}>
319+
<ClerkProvider
320+
publishableKey={frontendApi}
321+
routerPush={(to) => navigate(to)}
322+
routerReplace={(to) => navigate(to, { replace: true })}
323+
>
320324
<ClerkRwAuthProvider>
321325
<ClerkLoaded>{children}</ClerkLoaded>
322326
<ClerkStatusUpdater />

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,11 @@ export const AuthProvider = ({ children }: Props) => {
111111
}
112112
113113
return (
114-
<ClerkProvider frontendApi={frontendApi} navigate={(to) => navigate(to)}>
114+
<ClerkProvider
115+
publishableKey={frontendApi}
116+
routerPush={(to) => navigate(to)}
117+
routerReplace={(to) => navigate(to, { replace: true })}
118+
>
115119
<ClerkRwAuthProvider>
116120
<ClerkLoaded>{children}</ClerkLoaded>
117121
<ClerkStatusUpdater />

0 commit comments

Comments
 (0)