Skip to content

Commit

Permalink
(users/metadata) fix: next.js app router code and remove page router …
Browse files Browse the repository at this point in the history 
…code (#1758)
  • Loading branch information
@victoriaxyz @alexisintech
victoriaxyz authored and alexisintech committed Dec 6, 2024
1 parent 812e11c commit 072c290
Showing 1 changed file with 78 additions and 184 deletions.
262 changes: 78 additions & 184 deletions docs/users/metadata.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,44 +22,24 @@ Private metadata is only accessible by the backend, which makes this useful for

<Tabs items={["Next.js", "Node", "Go", "Ruby", "cURL"]}>
<Tab>
<CodeBlockTabs options={["App Router", "Pages Router"]}>
```ts {{ filename: 'app/route/private.ts' }}
import { NextResponse } from 'next/server'
import { clerkClient } from '@clerk/nextjs/server'
```ts {{ filename: 'app/private/route.ts' }}
import { NextRequest, NextResponse } from 'next/server'
import { clerkClient } from '@clerk/nextjs/server'

export async function POST() {
const { stripeId, userId } = await body.json()
export async function POST(request: NextRequest) {
const { stripeId, userId } = await request.json()

const client = await clerkClient()
const client = await clerkClient()

await client.users.updateUserMetadata(userId, {
privateMetadata: {
stripeId: stripeId,
},
})
return NextResponse.json({ success: true })
}
```

```ts {{ filename: 'pages/api/private.ts' }}
import { clerkClient } from '@clerk/nextjs/server'
import { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { stripeId, userId } = req.body

const client = await clerkClient()

await client.users.updateUserMetadata(userId, {
privateMetadata: {
stripeId: stripeId,
},
})
await client.users.updateUserMetadata(userId, {
privateMetadata: {
stripeId: stripeId,
},
})

res.status(200).json({ success: true })
}
```
</CodeBlockTabs>
return NextResponse.json({ success: true })
}
```
</Tab>

<Tab>
Expand Down Expand Up @@ -135,36 +115,20 @@ You can retrieve the private metadata for a user by using the JavaScript Backend

<Tabs items={["Next.js", "Node", "cURL", "Go", "Ruby"]}>
<Tab>
<CodeBlockTabs options={["App Router", "Pages Router"]}>
```ts {{ filename: 'app/private/route.ts' }}
import { NextResponse } from 'next/server'
import { clerkClient } from '@clerk/nextjs/server'

export async function GET(request: Request) {
const { stripeId, userId } = await request.body.json()

const client = await clerkClient()

const user = await client.users.getUser(userId)
return NextResponse.json(user.privateMetadata)
}
```
```ts {{ filename: 'app/private/route.ts' }}
import { NextRequest, NextResponse } from 'next/server'
import { clerkClient } from '@clerk/nextjs/server'

```ts {{ filename: 'pages/api/private.ts' }}
import { clerkClient } from '@clerk/nextjs/server'
import { NextApiRequest, NextApiResponse } from 'next'
export async function GET(request: NextRequest) {
const { userId } = await request.json()

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { userId } = await req.body.json()
const client = await clerkClient()

const client = await clerkClient()
const user = await client.users.getUser(userId)

const user = await client.users.getUser(userId)

res.status(200).json(user.privateMetadata)
}
```
</CodeBlockTabs>
return NextResponse.json(user.privateMetadata)
}
```
</Tab>

<Tab>
Expand Down Expand Up @@ -224,44 +188,24 @@ Public metadata is accessible by both the frontend and the backend, but can only

<Tabs items={["Next.js", "Node", "Go", "Ruby", "cURL"]}>
<Tab>
<CodeBlockTabs options={["App Router", "Pages Router"]}>
```ts {{ filename: 'app/route/public.ts' }}
import { NextResponse } from 'next/server'
import { clerkClient } from '@clerk/nextjs/server'

export async function POST() {
const { role, userId } = await body.json()

const client = await clerkClient()

await client.users.updateUserMetadata(userId, {
publicMetadata: {
role,
},
})
return NextResponse.json({ success: true })
}
```
```ts {{ filename: 'app/public/route.ts' }}
import { NextRequest, NextResponse } from 'next/server'
import { clerkClient } from '@clerk/nextjs/server'

```ts {{ filename: 'pages/api/public.ts' }}
import { clerkClient } from '@clerk/nextjs/server'
import { NextApiRequest, NextApiResponse } from 'next'
export async function POST(request: NextRequest) {
const { stripeId, userId } = await request.json()

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { role, userId } = req.body
const client = await clerkClient()

const client = await clerkClient()

await client.users.updateUserMetadata(userId, {
publicMetadata: {
role,
},
})
await client.users.updateUserMetadata(userId, {
privateMetadata: {
stripeId: stripeId,
},
})

res.status(200).json({ success: true })
}
```
</CodeBlockTabs>
return NextResponse.json({ success: true })
}
```
</Tab>

<Tab>
Expand Down Expand Up @@ -355,44 +299,24 @@ The following examples demonstrate how to update `unsafeMetadata` using [the Bac

<Tabs items={["Next.js", "Node", "Go", "Ruby", "cURL"]}>
<Tab>
<CodeBlockTabs options={["App Router", "Pages Router"]}>
```ts {{ filename: 'app/route/private.ts' }}
import { NextResponse } from 'next/server'
import { clerkClient } from '@clerk/nextjs/server'
```ts {{ filename: 'app/unsafe/route.ts' }}
import { NextRequest, NextResponse } from 'next/server'
import { clerkClient } from '@clerk/nextjs/server'

export async function POST() {
const { stripeId, userId } = await body.json()
export async function POST(request: NextRequest) {
const { userId } = await request.json()

const client = await clerkClient()
const client = await clerkClient()

await client.users.updateUserMetadata(userId, {
unsafeMetadata: {
birthday: '11-30-1969',
},
})
return NextResponse.json({ success: true })
}
```

```ts {{ filename: 'pages/api/private.ts' }}
import { clerkClient } from '@clerk/nextjs/server'
import { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { stripeId, userId } = req.body

const client = await clerkClient()

await client.users.updateUserMetadata(userId, {
unsafeMetadata: {
birthday: '11-30-1969',
},
})
await client.users.updateUserMetadata(userId, {
unsafeMetadata: {
birthday: '11-30-1969',
},
})

res.status(200).json({ success: true })
}
```
</CodeBlockTabs>
return NextResponse.json({ success: true })
}
```
</Tab>

<Tab>
Expand Down Expand Up @@ -464,62 +388,32 @@ The following examples demonstrate how to update `unsafeMetadata` using [the Bac

<Tabs items={["Next.js", "React", "Remix", "JavaScript"]}>
<Tab>
<CodeBlockTabs options={["App Router", "Pages Router"]}>
```tsx {{ filename: 'app/route/unsafe.tsx' }}
'use client'
import { useUser } from '@clerk/nextjs'
import { useState } from 'react'

export default function UnSafePage() {
const { user } = useUser()
const [birthday, setBirthday] = useState('')

return (
<div>
<input type="text" value={birthday} onChange={(e) => setBirthday(e.target.value)} />
<button
onClick={() => {
user.update({
unsafeMetadata: {
birthday,
},
})
}}
>
Update Birthday
</button>
</div>
)
}
```

```tsx {{ filename: 'pages/unsafe.tsx' }}
import { useUser } from '@clerk/nextjs'
import { useState } from 'react'

export default function UnSafePage() {
const { user } = useUser()
const [birthday, setBirthday] = useState('')

return (
<div>
<input type="text" value={birthday} onChange={(e) => setBirthday(e.target.value)} />
<button
onClick={() => {
user.update({
unsafeMetadata: {
birthday,
},
})
}}
>
Update Birthday
</button>
</div>
)
}
```
</CodeBlockTabs>
```tsx {{ filename: 'app/unsafe/route.tsx' }}
'use client'
import { useUser } from '@clerk/nextjs'
import { useState } from 'react'

export default function UnSafePage() {
const { user } = useUser()
const [birthday, setBirthday] = useState('')

return (
<div>
<input type="text" value={birthday} onChange={(e) => setBirthday(e.target.value)} />

<button
onClick={() => {
user?.update({
unsafeMetadata: { birthday },
})
}}
>
Update birthday
</button>
</div>
)
}
```
</Tab>

<Tab>
Expand Down

0 comments on commit 072c290

Please sign in to comment.