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
  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, useUser } from '@clerk/nextjs'

export default function Page() {
  // Use `useAuth()` to access the authentication context,
  // including the user's session claims, like `metadata`
  const { isLoaded, userId, sessionClaims } = useAuth()
  // Use `useUser()` to access the `User` object,
  // which contains properties like `firstName`, `lastName`, and `publicMetadata`
  const { user } = useUser()

  const [birthday, setBirthday] = useState('')
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName] = 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(() => {
    if (user) {
      setFirstName(user.firstName || '')
      setLastName(user.lastName || '')
      // Retrieve the user's birthday from the session token's claims under the `birthday` key
      setBirthday(sessionClaims?.birthday || '')
    }
  }, [user, 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')
      }

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

  async function updateUserField(field: 'firstName' | 'lastName', value: string) {
    try {
      await user?.update({
        [field]: value,
      })
      return { success: true }
    } catch (err: any) {
      return { error: err.message || `Failed to update ${field}` }
    }
  }

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

    const updates = []

    // Check which fields have been modified and need updating
    if (firstName !== (user?.firstName || '')) {
      updates.push(updateUserField('firstName', firstName))
    }

    if (lastName !== (user?.lastName || '')) {
      updates.push(updateUserField('lastName', lastName))
    }

    if (birthday !== (sessionClaims?.metadata?.birthday || '')) {
      updates.push(updateUserBirthday(birthday))
    }

    // If no fields have been filled or modified, show error
    if (updates.length === 0) {
      setError('Please fill in at least one field to update')
      setStatus('error')
      return
    }

    try {
      // Execute all updates in parallel
      const results = await Promise.all(updates)

      // Check if any updates failed
      const failedUpdates = results.filter((result) => result.error)

      if (failedUpdates.length > 0) {
        setError(failedUpdates.map((r) => r.error).join(', '))
        setStatus('error')
      } else {
        user?.reload() // Refresh the session and the User object
        setStatus('success')
      }
    } catch (err: any) {
      setError(err.message || 'Failed to update user information')
      setStatus('error')
    }
  }

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

  // Check if the user is authenticated
  if (!userId) return <div>Not authenticated</div>

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

      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="firstName">First Name:</label>
          <input
            id="firstName"
            type="text"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="lastName">Last Name:</label>
          <input
            id="lastName"
            type="text"
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
          />
        </div>

        <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'}
        </button>
      </form>

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