After updating a user object, the new data is not immediately reflected in my NextJS 14 app

[akkisagiraju]

Hello everyone,

I'm using PocketBase as the backend for my NextJS 14 app. I'm using the app router in my project.

Here's the problem. Whenever I enter a new name in the input field and submit the form, the patch request is successfully processed and I can see that the value is actually updated on the admin panel. But the cookie stored in the browser has the old data and as a result getCurrentUser() is returning the old data of the user.

The relevant pieces of my code:
app/api/users/[userId]/route.ts

import { z } from "zod"
import { userNameSchema } from "@/lib/validations/user"
import { getCurrentUser } from "@/lib/session"
import db from "@/lib/db"

const routeContextSchema = z.object({
  params: z.object({
    userId: z.string(),
  }),
})

export async function PATCH(
  req: Request,
  context: z.infer<typeof routeContextSchema>
) {
  try {
    // Validate the route context.
    const { params } = routeContextSchema.parse(context)
    const user = await getCurrentUser()

    // Ensure user is authentication and has access to this user.
    if (!user || params.userId !== user?.id) {
      return new Response(null, { status: 403 })
    }

    // Get the request body and validate it.
    const body = await req.json()
    const payload = userNameSchema.parse(body)

    // Update the user.
    await db.client.collection('users').update(user.id, payload);
    
    return new Response(null, { status: 200 })
  } catch (error) {
    if (error instanceof z.ZodError) {
      return new Response(JSON.stringify(error.issues), { status: 422 })
    }

    return new Response(null, { status: 500 })
  }
}

lib/session.ts

import { cookies } from "next/headers"
import db from "./db"

export async function getCurrentUser() {
  const cookieStore = cookies()

  const result = db.getUser(cookieStore)

  return result as any
}

lib/db.ts

import PocketBase from "pocketbase"
import { ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies"
import { env } from "@/env.mjs"

export const POCKET_BASE_URL = env.NEXT_PUBLIC_POCKETBASE_API_URL

export class DatabaseClient {
  // the instance of PocketBase
  client: PocketBase

  constructor() {
    // instantiate PocketBase before we use
    this.client = new PocketBase(POCKET_BASE_URL)
  }

  // authenticate handles the authentication of the user
  async authenticate(email: string, password: string) {
    try {
      const result = await this.client
        .collection("users")
        .authWithPassword(email, password)
      // If there is no token in the result, it means something went wrong
      if (!result?.token) {
        throw new Error("Invalid email or password")
      }
      return result
    } catch (err) {
      throw new Error("Invalid email or password")
    }
  }

  // register handles the creation of a new user
  async register(email: string, password: string) {
    try {
      // provide only the minimum required fields by user create method
      const result = await this.client.collection("users").create({
        email,
        password,
        passwordConfirm: password,
      })

      return result
    } catch (err) {}
  }

  // isAuthenticated takes cookieStore from the request to check for the required tokens in the cookie
  async isAuthenticated(cookieStore: ReadonlyRequestCookies) {
    const cookie = cookieStore.get("pb_auth")
    if (!cookie) {
      return false
    }

    // loadFromCookie applies the cookie data before checking the user is authenticated
    this.client.authStore.loadFromCookie(cookie?.value || "")
    return this.client.authStore.isValid || false
  }

  // getUser is similar to isAuthenticated, the only difference is the returned data type
  async getUser(cookieStore: ReadonlyRequestCookies) {
    const cookie = cookieStore.get("pb_auth")
    if (!cookie) {
      return false
    }

    this.client.authStore.loadFromCookie(cookie?.value || "")
    const user = this.client.authStore.model
    return user
  }

  async logout() {
    this.client.authStore.clear()
  }
}

// create an instance of the DatabaseClient that can be used throughout the app.
export const db = new DatabaseClient()

export default db

This is the form on the UI

export function UserNameForm({ user, className, ...props }: UserNameFormProps) {
  const router = useRouter()
  const {
    handleSubmit,
    register,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(userNameSchema),
    defaultValues: {
      name: user?.name || "",
    },
  })
  const [isSaving, setIsSaving] = React.useState<boolean>(false)

  async function onSubmit(data: FormData) {
    setIsSaving(true)

    const response = await fetch(`/api/users/${user.id}`, {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name: data.name,
      }),
    })

    setIsSaving(false)

    if (!response?.ok) {
      return toast({
        title: "Something went wrong.",
        description: "Your name was not updated. Please try again.",
        variant: "destructive",
      })
    }

    toast({
      description: "Your name has been updated.",
    })

    router.refresh()
  }

  return (
    <form
      className={cn(className)}
      onSubmit={handleSubmit(onSubmit)}
      {...props}
    >
      <Card>
        <CardHeader>
          <CardTitle>Your Name</CardTitle>
          <CardDescription>
            Please enter your full name or a display name you are comfortable
            with.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-1">
            <Label className="sr-only" htmlFor="name">
              Name
            </Label>
            <Input
              id="name"
              className="w-[400px]"
              size={32}
              {...register("name")}
            />
            {errors?.name && (
              <p className="px-1 text-xs text-red-600">{errors.name.message}</p>
            )}
          </div>
        </CardContent>
        <CardFooter>
          <button
            type="submit"
            className={cn(buttonVariants(), className)}
            disabled={isSaving}
          >
            {isSaving && (
              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
            )}
            <span>Save</span>
          </button>
        </CardFooter>
      </Card>
    </form>
  )
}

Please help me fix this.

Thank you.

[akkisagiraju]

Here's the login route.

import db from "@/lib/db"
import { cookies } from "next/headers"
import { NextResponse } from "next/server"

export async function POST(request: Request) {
  try {
    const { email, password } = await request.json()
    const result = await db.authenticate(email, password)
    const { record, token } = result
    record.token = token
    cookies().set("pb_auth", db.client.authStore.exportToCookie())

    return NextResponse.json(record)
  } catch (err: any) {
    return new Response(
      JSON.stringify({ error: err.message || err.toString() }),
      {
        status: 500,
        headers: {
          "Content-Type": "application/json",
        },
      }
    )
  }
}

And this how I'm getting the currentUser to pass the object to the UserNameForm.

import { getCurrentUser } from "@/lib/session"
import { DashboardHeader } from "@/components/header"
import { DashboardShell } from "@/components/shell"
import { UserNameForm } from "@/components/user-name-form"

export const metadata = {
  title: "Settings",
  description: "Manage account and website settings.",
}

export default async function SettingsPage() {
  const user = await getCurrentUser()

  return (
    <DashboardShell>
      <DashboardHeader
        heading="Settings"
        text="Manage account and website settings."
      />
      <div className="grid gap-10">
        <UserNameForm user={{ id: user.id, name: user.name || "" }} />
      </div>
    </DashboardShell>
  )
}

[TheJoshDotDev]

You could attempt to refresh the the authStore after you updating the user. After doing that you could export to cookie once more and update the nextjs cookie. Below is a snippet on how to refresh the the authstore

try {
      // get an up-to-date auth store state by verifying and refreshing the loaded auth model (if any)
      pb.authStore.isValid && await pb.collection('users').authRefresh();
  } catch (_) {
      // clear the auth store on failed refresh
      pb.authStore.clear();
  }