Force a session token refresh

import { auth, clerkClient } from '@clerk/nextjs/server'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(req: NextRequest) {
  // Use `req.json()` to parse the request body
  const { birthday } = await req.json()

  // Use `auth()` to access the current user's ID
  const { userId } = await auth()

  // Protect the route by checking if the user is signed in
  if (!userId) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 })
  }

  // Use `clerkClient()` to access the Clerk client
  // The Clerk client gives you access to Clerk Backend API resources,
  // such as the `users` resource, which includes methods for managing users
  const client = await clerkClient()

  // Use the Backend SDK's `updateUserMetadata()` method to update the user's birthday
  await client.users.updateUserMetadata(userId, {
    publicMetadata: {
      birthday,
    },
  })

  return NextResponse.json({ success: true }, { status: 200 })
}

'use client'
import { useState, useEffect } from 'react'
import { useAuth } from '@clerk/nextjs'

export default function Page() {
  // Use `useAuth()` to access the authentication context,
  // including the user's session claims
  const { isLoaded, userId, sessionClaims, getToken } = useAuth()

  const [birthday, setBirthday] = useState('')
  const [status, setStatus] = useState<'loading' | 'success' | 'error' | null>(null)
  const [error, setError] = useState<string | null>(null)

  // Update state once the user's data loads
  useEffect(() => {
    // Retrieve the user's birthday from the session token's claims under the `birthday` key
    setBirthday((sessionClaims?.birthday as string) || '')
  }, [sessionClaims])

  async function updateUserBirthday(birthday: string) {
    try {
      const response = await fetch('/api/update-user-metadata', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ birthday }),
      })

      const result = await response.json()

      if (!response.ok) {
        throw new Error(result.error || 'Failed to update birthday')
      }

      // Force token refresh
      // so that the token is updated with the new birthday metadata
      await getToken({ skipCache: true })

      return { success: true }
    } catch (err: any) {
      return { error: err.message || 'Failed to update birthday' }
    }
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setStatus('loading')
    setError(null)

    // Check if the birthday has been modified
    if (birthday === (sessionClaims?.birthday || '')) {
      setError('Please enter a new birthday to update')
      setStatus('error')
      return
    }

    try {
      const result = await updateUserBirthday(birthday)

      if (result.error) {
        setError(result.error)
        setStatus('error')
      } else {
        setStatus('success')
      }
    } catch (err: any) {
      setError(err.message || 'Failed to update birthday')
      setStatus('error')
    }
  }

  // Check if Clerk has loaded
  if (!isLoaded) return <div>Loading...</div>

  // Check if the user is authenticated
  if (!userId) return <div>Sign in to view your profile</div>

  return (
    <div style={{ maxWidth: 400, margin: '2rem auto' }}>
      <h1>Update Your Birthday</h1>

      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="birthday">Birthday (YYYY-MM-DD):</label>
          <input
            id="birthday"
            type="date"
            value={birthday}
            onChange={(e) => setBirthday(e.target.value)}
          />
        </div>

        <button type="submit" disabled={status === 'loading'}>
          {status === 'loading' ? 'Updating...' : 'Update Birthday'}
        </button>
      </form>

      {status === 'success' && <p style={{ color: 'green' }}>Birthday updated successfully!</p>}
      {status === 'error' && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}