Actualización de sesión en NextAuth

Aunque había muchos artículos sobre la implementación de inicio de sesión, había pocos sobre la actualización de la información de la sesión.

Así que aquí va un intento de documentar la actualización de la sesión.

Nuevamente, consultaremos la documentación oficial de NextAuth.

El orden de actualización de la información de la sesión es el siguiente.

1. Actualización y activación de la sesión con update de useSession

2. Reconfiguración del jwt según el activador en authConfig

3. Actualizar la página después de la actualización

Veamos primero el código.

1. Actualización de la sesión

El ejemplo en la documentación oficial es el siguiente.

import { useSession } from "next-auth/react";

export default function Page() {
  const { data: session, status, update } = useSession();

  if (status === "authenticated") {
    return (
      <>
        <p>Signed in as {session.user.name}</p>
        // Enviar valores de actualización al lado del servidor
        <button onClick={() => update({ name: "John Doe" })}>Edit name</button>
        // Suponga que ya ha actualizado los valores en el servidor. Solo ejecuta el activador. // Todos
        `useSession().data` es actualizado.
        <button onClick={() => update()}>Edit name</button>
      </>
    );
  }

  return <a href="/api/auth/signin">Sign in</a>;
}

Si solo quieres hacerlo de manera sencilla, agrega un objeto como parámetro a update.

Lo apliqué a mi sitio web.

Reducí y comenté los códigos innecesarios.

"use client";

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function Profile() {
  const router = useRouter();
  const { update } = useSession();

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    // Crear datos de formulario e inyectar datos
    const formData = new FormData();
    formData.append("nickName", value);

    // Actualización del backend a través de fetch de API
    const res = await fetch("/api/editProfile", {
      method: "POST",
      body: formData,
    });
    const resJson = await res.json();

    // Si tiene éxito, actualiza la sesión con update y ejecuta el activador
    if (resJson.success === "success") {
      // Crear datos estructurados como objeto y actualizar.
      const updateObj: Record<string, string | boolean> = {};
      userInputTable.forEach((each: userInputTableObj) => {
        updateObj[each.name] = each.value as string;
      });

      // Esperar actualización antes de actualizar la página
      await update(updateObj);

      // Actualización de navbar con la actualización de sesión
      router.refresh();
    }
  }
  return (
    <form onSubmit={(e) => handleSubmit(e)}>
      <input
        // userInput.value está configurado aproximadamente con useState
        value={userInput.value}
        onChange={(e) => handleChange(e)}
      />
        <button type="submit">Registrarse</button>
    </form>
  );
}

La clave es actualizar la información de la sesión con un objeto en update.

Renovemos el token con la sesión actualizada.

2. AuthOptions

La documentación oficial básicamente lo describe de la siguiente manera.

Entre los parámetros de NextAuth, se proporciona una opción jwt a través de callbacks.

Cuando ocurre un activador de actualización y session.name está presente, se actualiza el token.

...
export default NextAuth({
  // omitido ...
  callbacks: {
    jwt({ token, trigger, session }) {
        // La sesión puede ser un objeto arbitrario, por lo que se necesita verificación.
      if (trigger === "update" && session?.name) {
        token.name = session.name
      }
      return token
    }
  }
})

No hubo mucho que cambiar, así que lo apliqué tal como estaba.

Ahora, la actualización de la sesión ha terminado.

3. Probar

Probemos cambiando el apodo del perfil después de iniciar sesión.

Cambié el apodo para verificar si el perfil del navbar implementado con SSR cambiaba correctamente.

Parece funcionar bien.

4. Conclusión

La actualización de la sesión fue más fácil de implementar de lo esperado.

Busqué mucho, pero al final siempre vuelvo a la documentación oficial.

Si algo no funciona bien, recomiendo leer la documentación oficial detenidamente.