Edge Functions para notificaciones automáticas

Clase 16 de 17 • Curso de Supabase Avanzado

Resumen

Construye un flujo de notificaciones robusto con Supabase combinando Edge Functions y Realtime. Sin depender del frontend, la base de datos dispara un webhook que invoca una función en el backend para registrar likes y comments, y notificar al usuario con precisión.

¿Qué arquitectura de notificaciones se implementa con Supabase?

Este diseño se basa en eventos automáticos: Supabase detecta un like o comment, llama a una Edge Function y persiste una notificación, que luego se consume en tiempo real desde la interfaz.

La base de datos dispara un webhook hacia la Edge Function al ocurrir el evento.
La función recibe: usuario que interactúa, post afectado, dueño del post y, si aplica, el mensaje.
Se puede enviar un correo, guardar notificación interna o mostrar un toast en el panel del usuario.
En la UI se añade una campanita de notificaciones que refleja cambios en tiempo real con Realtime.
Ventajas clave: patrón profesional, robusto y reactivo que desacopla el frontend del procesamiento de eventos.

¿Cómo crear la tabla de notificaciones con Realtime activado?

Se crea desde el editor de SQL en el panel de Supabase. La sentencia define la tabla y activa la publicación en Realtime desde el propio script, siguiendo las recomendaciones de escalabilidad.

Campos esenciales: ID, user ID (referencia a la tabla out users), actor ID, tipo de notificación (like/comment), post destino, mensaje del comment y fecha de creación.
Se agrega un índice para mejorar rendimiento en consultas.
Se habilita la publicación a Realtime para esta tabla, de modo que la UI reciba actualizaciones en vivo.
Resultado visible en el panel: la tabla Notifications aparece con Realtime activado sin pasos manuales extra.

¿Cómo se implementa y despliega la Edge Function en Deno?

Las Edge Functions de Supabase corren en Deno (no en Node). Se parte de una plantilla que usa serve de Deno, create client de Supabase, maneja headers de CORS y responde a métodos HTTP como OPTIONS y POST. Tras nombrarla (por ejemplo, send notification), se despliega y queda disponible vía URL HTTP con estadísticas, invocaciones y logs.

¿Cómo validar y construir el payload?

Tipo: like o comment.
Identificadores: post ID, actor ID y post owner ID.
Mensaje: cuerpo del comentario cuando el tipo es comment.
Validación: si falta un dato, responde con error y estado 400.
Regla esencial: no notificar si el actor es el dueño del post.
Obtención de contexto: consulta el perfil para conseguir el nombre de usuario del actor y construir el mensaje a guardar.
Inserción: usa el cliente de Supabase para crear el registro en la tabla Notifications con select() y single() y manejo de errores.
Seguridad: el cliente usa secrets configuradas en el entorno del proyecto.

¿Cómo conectar el frontend y consumir en tiempo real?

En la página principal (app/page.tsx), las funciones handle like y handle comment invocan la Edge Function send notification tras un like o al publicar un comentario.
Cuerpo de la invocación: tipo, post ID, actor ID, post owner ID y, si aplica, el mensaje.
En la campanita (notification bell), la UI se suscribe por Realtime a un canal de cambios de Postgres: escucha insert en la tabla Notifications filtrando por el usuario logueado.
Lógica de lectura: si read es false, se muestra la burbuja; al marcar como leída, cambia a true y desaparece.
Flujo completo: evento → función → inserción → Realtime → UI actualizada.

¿Qué métricas y estados puedes revisar tras el despliegue?

La función queda accesible por URL HTTP, con panel de uso: últimos 15 min, 1 h, 3 h y 1 día.
En Invocations aparecen llamadas separadas: OPTIONS y POST.
Se evidencia el payload: tipo comment, post ID y el mensaje guardado para la notificación.
Los logs ayudan a depurar errores de despliegue o respuesta.
Estado de lectura: read: false al llegar; true después de marcar como leída en la interfaz.
Persistencia paralela: el comentario va a la tabla de comments; la notificación se guarda en Notifications.

¿Te gustaría profundizar en algún paso o ver el patrón aplicado a otros eventos del producto? Cuéntame en los comentarios cómo integrarías correos, toasts o notificaciones internas en tu caso.

Stiven Ramírez Arango

student•

Sentencia SQL para crear la tabla de notificaciones:

CREATE TABLE notifications (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  actor_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  type TEXT NOT NULL CHECK (type IN ('like', 'comment')),
  post_id UUID NOT NULL REFERENCES public.posts(id),
  message TEXT,
  read BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE INDEX idx_notifications_user_id ON notifications(user_id);
ALTER PUBLICATION supabase_realtime ADD TABLE notifications;

cristhian joel Acevedo Tipian

student•

falta el codigo de la edge function

Wilzon Mariño Bueno

student•

nadie lo ve XD

se olvidó de ingresar

Erasmo Hernández

teacher•

Ya está agregado acá en la sección de comentarios :)

Stiven Ramírez Arango

student•

Edge functions es una maravilla, los eventos backend a flor de piel.

Quica Espi Puig

student•

No se hacen los posts de las notificaciones por esto: {"code":401,"message":"Missing authorization header"}

Quica, el error {"code":401,"message":"Missing authorization header"} indica que la solicitud a tu Edge Function no incluye la cabecera de autorización necesaria. Las Edge Functions de Supabase requieren autenticación para ser invocadas. Debes asegurarte de que tu frontend envíe un token de autenticación válido junto con la solicitud a la función. Esto se hace típicamente incluyendo el token en la cabecera Authorization.

Wilzon Mariño Bueno

student•

No has compartido el codigo

Erasmo Hernández

teacher•

Lo acabo de agregar al comentario anterior! Disculpa la tardanza :)

Erasmo Hernández

teacher•

Acá dejo el código de la Edge Function:

import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2";

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

serve(async (req) => {
  // Handle CORS
  if (req.method === "OPTIONS") {
    return new Response("ok", { headers: corsHeaders });
  }

  try {
    const { type, post_id, actor_id, post_owner_id, comment_body } = await req.json();

    // Validar datos
    if (!type || !post_id || !actor_id || !post_owner_id) {
      return new Response(
        JSON.stringify({ error: "Faltan datos requeridos" }),
        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
      );
    }

    // No notificar si es el mismo usuario
    if (actor_id === post_owner_id) {
      return new Response(
        JSON.stringify({ message: "No se notifica al mismo usuario" }),
        { headers: { ...corsHeaders, "Content-Type": "application/json" } }
      );
    }

    const supabase = createClient(
      Deno.env.get("SUPABASE_URL")!,
      Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!
    );

    // Obtener username del actor
    const { data: actorProfile } = await supabase
      .from("profiles")
      .select("username")
      .eq("id", actor_id)
      .single();

    const actorUsername = actorProfile?.username || "Alguien";

    // Crear mensaje
    let message = "";
    if (type === "like") {
      message = `@${actorUsername} le dio like a tu post`;
    } else if (type === "comment") {
      const preview = comment_body?.substring(0, 40) || "";
      message = `@${actorUsername} comentó: "${preview}${comment_body?.length > 40 ? "..." : ""}"`;
    }

    // Insertar notificación
    const { data, error } = await supabase
      .from("notifications")
      .insert({
        user_id: post_owner_id,
        actor_id,
        type,
        post_id,
        message,
        read: false,
      })
      .select()
      .single();

    if (error) {
      console.error("Error creando notificación:", error);
      return new Response(
        JSON.stringify({ error: error.message }),
        { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
      );
    }

    return new Response(
      JSON.stringify({ success: true, notification: data }),
      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
    );
  } catch (error) {
    console.error("Error:", error);
    return new Response(
      JSON.stringify({ error: "Error interno" }),
      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
    );
  }
});

CREATE TABLE notifications (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  actor_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  type TEXT NOT NULL CHECK (type IN ('like', 'comment')),
  post_id UUID NOT NULL REFERENCES public.posts(id),
  message TEXT,
  read BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE INDEX idx_notifications_user_id ON notifications(user_id);
ALTER PUBLICATION supabase_realtime ADD TABLE notifications;

import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2";

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

serve(async (req) => {
  // Handle CORS
  if (req.method === "OPTIONS") {
    return new Response("ok", { headers: corsHeaders });
  }

  try {
    const { type, post_id, actor_id, post_owner_id, comment_body } = await req.json();

    // Validar datos
    if (!type || !post_id || !actor_id || !post_owner_id) {
      return new Response(
        JSON.stringify({ error: "Faltan datos requeridos" }),
        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
      );
    }

    // No notificar si es el mismo usuario
    if (actor_id === post_owner_id) {
      return new Response(
        JSON.stringify({ message: "No se notifica al mismo usuario" }),
        { headers: { ...corsHeaders, "Content-Type": "application/json" } }
      );
    }

    const supabase = createClient(
      Deno.env.get("SUPABASE_URL")!,
      Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!
    );

    // Obtener username del actor
    const { data: actorProfile } = await supabase
      .from("profiles")
      .select("username")
      .eq("id", actor_id)
      .single();

    const actorUsername = actorProfile?.username || "Alguien";

    // Crear mensaje
    let message = "";
    if (type === "like") {
      message = `@${actorUsername} le dio like a tu post`;
    } else if (type === "comment") {
      const preview = comment_body?.substring(0, 40) || "";
      message = `@${actorUsername} comentó: "${preview}${comment_body?.length > 40 ? "..." : ""}"`;
    }

    // Insertar notificación
    const { data, error } = await supabase
      .from("notifications")
      .insert({
        user_id: post_owner_id,
        actor_id,
        type,
        post_id,
        message,
        read: false,
      })
      .select()
      .single();

    if (error) {
      console.error("Error creando notificación:", error);
      return new Response(
        JSON.stringify({ error: error.message }),
        { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
      );
    }

    return new Response(
      JSON.stringify({ success: true, notification: data }),
      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
    );
  } catch (error) {
    console.error("Error:", error);
    return new Response(
      JSON.stringify({ error: "Error interno" }),
      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
    );
  }
});

Edge Functions para notificaciones automáticas

Revision y Preparacion de Proyecto

Funciones avanzadas de Supabase en producción

Revisión del proyecto Suplatzigram en producción

Refactor de Platzigram: código profesional

Autenticación

Configurar Supabase Auth con email y contraseña

Tabla profiles en Supabase: datos sociales vs autenticación

Perfiles editables con Supabase y storage

CRUD de la aplicación

Crear posts como usuario autenticado

Likes y comentarios en Supabase con SQL

Seguridad avanzada

Row-Level Security en Supabase paso a paso

Dashboard con Supabase Realtime

Supabase Realtime: dashboard en vivo sin recargar

Cómo conectar Supabase real time al frontend

Emails y Resend para Suplatzigram

Migrar emails de Supabase a Resend

Configurar Recent como proveedor SMTP en Supabase

Correos transaccionales con Resend y Supabase

MCP y Edge Functions

MCP de Supabase: conecta tu base de datos con IA