Fix instantiation of clerkclient in nextjs examples (#1718)

Co-authored-by: victoria <[email protected]>

docs/authentication/social-connections/oauth.mdx

@@ -97,7 +97,9 @@ export async function GET() {
   // Get the OAuth access token for the user
   const provider = 'oauth_notion'
 
-  const clerkResponse = await clerkClient().users.getUserOauthAccessToken(userId, provider)
+  const client = await clerkClient()
+
+  const clerkResponse = await client.users.getUserOauthAccessToken(userId, provider)
 
   const accessToken = clerkResponse[0].token || ''
 

docs/custom-flows/user-impersonation.mdx

@@ -34,8 +34,10 @@ This guide will walk you through how to build a custom flow that handles user im
           return <p>You do not have permission to access this page.</p>
         }
 
+        const client = await clerkClient()
+
         // Fetch list of application's users using Clerk's Backend SDK
-        const users = await clerkClient.users.getUserList()
+        const users = await client.users.getUserList()
 
         // This page needs to be a server component to use clerkClient.users.getUserList()
         // You must pass the list of users to the client for the rest of the logic

docs/deployments/migrate-from-cognito.mdx

@@ -75,7 +75,7 @@ The provided script below lists your Cognito user pool users, calls
 [^1]: [`CreateUser`](/docs/reference/backend-api/tag/Users#operation/CreateUser){{ target: '_blank' }} has a rate limit rule of 20 requests per 10 seconds.
 
 ```ts {{ title: '~/cognito_to_clerk/main.ts' }}
-import { createClerkClient } from '@clerk/backend@'
+import { createClerkClient } from '@clerk/backend'
 import * as IDP from '@aws-sdk/client-cognito-identity-provider'
 
 // NOTE: The IAM user should have permissions roughly equivalent to AmazonCognitoReadOnly.

docs/guides/add-onboarding-flow.mdx

@@ -217,8 +217,10 @@ export const completeOnboarding = async (formData: FormData) => {
     return { message: 'No Logged In User' }
   }
 
+  const client = await clerkClient()
+
   try {
-    const res = await clerkClient().users.updateUser(userId, {
+    const res = await client.users.updateUser(userId, {
       publicMetadata: {
         onboardingComplete: true,
         applicationName: formData.get('applicationName'),

docs/references/backend/authenticate-request.mdx

@@ -153,8 +153,10 @@ It is recommended to set these options as [environment variables](/docs/deployme
 ```tsx
 import { clerkClient } from '@clerk/nextjs/server'
 
+const client = await clerkClient()
+
 export async function GET(req: Request) {
-  const { isSignedIn } = await clerkClient.authenticateRequest(req, {
+  const { isSignedIn } = await client.authenticateRequest(req, {
     authorizedParties: ['https://example.com'],
   })
 

docs/references/backend/overview.mdx

@@ -367,7 +367,9 @@ To access the [properties](/docs/references/nextjs/auth-object#auth-object-prope
         return Response.json({ error: 'Unauthorized' }, { status: 401 })
       }
 
-      const user = await (await clerkClient()).users.getUser(userId)
+      const client = await clerkClient()
+
+      const user = await client.users.getUser(userId)
 
       return Response.json({ user })
     }

docs/references/backend/sessions/get-token.mdx

@@ -64,7 +64,9 @@ _Token {
 
         const template = 'test'
 
-        const token = await clerkClient().sessions.getToken(sessionId, template)
+        const client = await clerkClient()
+
+        const token = await client.sessions.getToken(sessionId, template)
 
         console.log(token)
         /*
@@ -90,7 +92,9 @@ _Token {
 
         const template = 'test'
 
-        const token = await clerkClient().sessions.getToken(sessionId, template)
+        const client = await clerkClient()
+
+        const token = await client.sessions.getToken(sessionId, template)
 
         console.log(token)
         /*

docs/references/backend/user/update-user.mdx

@@ -302,7 +302,9 @@ _User {
         // The user attributes to update
         const params = { firstName: 'John', lastName: 'Wick' }
 
-        const updatedUser = await clerkClient.users.updateUser(userId, params)
+        const client = await clerkClient()
+
+        const updatedUser = await client.users.updateUser(userId, params)
 
         return res.status(200).json({ updatedUser })
       }

docs/references/nextjs/build-clerk-props.mdx

@@ -36,7 +36,9 @@ import { GetServerSideProps } from 'next'
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const { userId } = getAuth(ctx.req)
 
-  const user = userId ? await clerkClient().users.getUser(userId) : undefined
+  const client = await clerkClient()
+
+  const user = userId ? await client.users.getUser(userId) : undefined
 
   return { props: { ...buildClerkProps(ctx.req, { user }) } }
 }

docs/references/nextjs/get-auth.mdx

@@ -99,7 +99,9 @@ import type { NextApiRequest, NextApiResponse } from 'next'
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { userId } = getAuth(req)
 
-  const user = userId ? await clerkClient().users.getUser(userId) : null
+  const client = await clerkClient()
+
+  const user = userId ? await client.users.getUser(userId) : null
 
   return res.status(200).json({})
 }

docs/references/nextjs/read-session-data.mdx

@@ -132,7 +132,9 @@ Under the hood, `currentUser()` uses the [`clerkClient`](/docs/references/backen
         return res.status(401).json({ error: 'Unauthorized' })
       }
 
-      const user = await clerkClient().users.getUser(userId)
+      const client = await clerkClient()
+
+      const user = await client.users.getUser(userId)
 
       // use the user object to decide what data to return
 
@@ -173,7 +175,9 @@ Under the hood, `currentUser()` uses the [`clerkClient`](/docs/references/backen
     export const getServerSideProps: GetServerSideProps = async (ctx) => {
       const { userId } = getAuth(ctx.req)
 
-      const user = userId ? await clerkClient.users.getUser(userId) : undefined
+      const client = await clerkClient()
+
+      const user = userId ? await client.users.getUser(userId) : undefined
 
       return { props: { ...buildClerkProps(ctx.req, { user }) } }
     }

docs/references/nextjs/route-handlers.mdx

@@ -104,7 +104,9 @@ export async function POST(req: NextRequest) {
 
   const params = { firstName: 'John', lastName: 'Wick' }
 
-  const user = await clerkClient().users.updateUser(userId, params)
+  const client = await clerkClient()
+
+  const user = await client.users.updateUser(userId, params)
 
   return NextResponse.json({ user })
 }

docs/users/creating-users.mdx

@@ -26,7 +26,9 @@ To create users using the Clerk API, you can use the [`createUser()`](/docs/refe
 
     export async function POST() {
       try {
-        const user = await clerkClient.users.createUser({
+        const client = await clerkClient()
+
+        const user = await client.users.createUser({
           emailAddress: ['[email protected]'],
           password: 'password',
         })

docs/users/deleting-users.mdx

@@ -27,7 +27,8 @@ To delete users using the Clerk API, you can use the [`deleteUser()`](/docs/refe
       const userId = 'user_123'
 
       try {
-        await clerkClient().users.deleteUser(userId)
+        const client = await clerkClient()
+        await client.users.deleteUser(userId)
         return NextResponse.json({ message: 'User deleted' })
       } catch (error) {
         console.log(error)

docs/users/metadata.mdx

@@ -29,7 +29,10 @@ Private metadata is only accessible by the backend, which makes this useful for
 
       export async function POST() {
         const { stripeId, userId } = await body.json()
-        await clerkClient.users.updateUserMetadata(userId, {
+
+        const client = await clerkClient()
+
+        await client.users.updateUserMetadata(userId, {
           privateMetadata: {
             stripeId: stripeId,
           },
@@ -45,7 +48,9 @@ Private metadata is only accessible by the backend, which makes this useful for
       export default async function handler(req: NextApiRequest, res: NextApiResponse) {
         const { stripeId, userId } = req.body
 
-        await clerkClient.users.updateUserMetadata(userId, {
+        const client = await clerkClient()
+
+        await client.users.updateUserMetadata(userId, {
           privateMetadata: {
             stripeId: stripeId,
           },
@@ -138,7 +143,9 @@ You can retrieve the private metadata for a user by using the [`getUser`](/docs/
       export async function GET(request: Request) {
         const { stripeId, userId } = await request.body.json()
 
-        const user = await clerkClient.users.getUser(userId)
+        const client = await clerkClient()
+
+        const user = await client.users.getUser(userId)
         return NextResponse.json(user.privateMetadata)
       }
       ```
@@ -150,7 +157,9 @@ You can retrieve the private metadata for a user by using the [`getUser`](/docs/
       export default async function handler(req: NextApiRequest, res: NextApiResponse) {
         const { userId } = await req.body.json()
 
-        const user = await clerkClient.users.getUser(userId)
+        const client = await clerkClient()
+
+        const user = await client.users.getUser(userId)
 
         res.status(200).json(user.privateMetadata)
       }
@@ -223,7 +232,9 @@ Public metadata is accessible by both the frontend and the backend, but can only
       export async function POST() {
         const { role, userId } = await body.json()
 
-        await clerkClient.users.updateUserMetadata(userId, {
+        const client = await clerkClient()
+
+        await client.users.updateUserMetadata(userId, {
           publicMetadata: {
             role,
           },
@@ -239,7 +250,9 @@ Public metadata is accessible by both the frontend and the backend, but can only
       export default async function handler(req: NextApiRequest, res: NextApiResponse) {
         const { role, userId } = req.body
 
-        await clerkClient.users.updateUserMetadata(userId, {
+        const client = await clerkClient()
+
+        await client.users.updateUserMetadata(userId, {
           publicMetadata: {
             role,
           },
@@ -349,7 +362,10 @@ Updating this value overrides the previous value; it does not merge. To perform
 
       export async function POST() {
         const { stripeId, userId } = await body.json()
-        await clerkClient.users.updateUserMetadata(userId, {
+
+        const client = await clerkClient()
+
+        await client.users.updateUserMetadata(userId, {
           unsafeMetadata: {
             birthday: '11-30-1969',
           },
@@ -365,7 +381,9 @@ Updating this value overrides the previous value; it does not merge. To perform
       export default async function handler(req: NextApiRequest, res: NextApiResponse) {
         const { stripeId, userId } = req.body
 
-        await clerkClient.users.updateUserMetadata(userId, {
+        const client = await clerkClient()
+
+        await client.users.updateUserMetadata(userId, {
           unsafeMetadata: {
             birthday: '11-30-1969',
           },

docs/users/web3.mdx

@@ -75,7 +75,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       return res.status(401).json({ error: 'Unauthorized' })
     }
 
-    const user = userId ? await clerkClient.users.getUser(userId) : null
+    const client = await clerkClient()
+
+    const user = userId ? await client.users.getUser(userId) : null
 
     // Retrieve the user's web3Wallet
     const walletId = user ? user.primaryWeb3WalletId : null