Mostrar perfil activo y editar perfil

En este documento se explicará cómo leer las cookies del servidor para mostrar el usuario autenticado en la Barra de Navegación, y cómo guardar los clientes en la tabla de clientes de Supabase y en Brevo

Mostrar el usuario autenticado en la Barra de Navegación

Nav.astro

En el frontmatter, se leen los datos del usuario autenticado desde las cookies y se guarda el nombre del usuario desde los metadatos de la cuenta de Google.

<span id="usuario">{textoUsuario}</span> hace que Astro renderice el valor adecuado en el HTML directamente desde el servidor.

Editar datos del Perfil y guardarlos en Supabase (y en Brevo)

Paso 1: Página de Perfil

En Nav el perfil se accede desde el botón Perfil (ver linea 89 de Nav.astro)

Deberéis adaptar el código, es una muestra. Con este formulario, enviamos los datos mediante POST a la API Endpoint de Astro crear.ts:

perfil.astro

Paso 2: Endpoint (archivo crear.ts)

crear.ts

Este archivo recibe los datos del formulario y los inserta en la tabla de clientes, si el usuario está autenticado. Sólo hay que asegurarse de tener configurado el pool de conexiones con pg.:

Datos importantes

  1. SQL 100% Estándar y Migrable: La consulta INSERT INTO ... ON CONFLICT funciona en cualquier motor PostgreSQL (sea en Supabase, AWS o en propio servidor).
  2. Seguridad (Evita Inyección SQL): Se usan parámetros posicionados ($1, $2, $3, $4).
  3. Sincronización: Si el cliente ya existía en la tabla, el ON CONFLICT actualiza sus datos en lugar de lanzar un error.

En PostgreSQL, la palabra clave EXCLUDED se usa dentro de una cláusula ON CONFLICT ... DO UPDATE para hacer referencia a los nuevos valores que se intentan insertar con la instrucción INSERT cuando hay conflicto (el registro ya existe). Es como decir Es decirle a la base de datos:

"Intenta insertar este cliente. Pero si su ID ya existe, edita la fila existente y sustituye su nombre y teléfono viejos por los nuevos valores que acabo de mandar en esta petición (EXCLUDED)."

Alias de rutas en el archivo tsconfig.json

Esto permite importar funciones desde cualquier archivo .ts del proyecto (esté donde esté, sin usar direcciones relativas) usando la @:

tsconfig.json