Configurar Supabase Auth con email y contraseña

Suplatsigram deja de ser totalmente pública y pasa a identificar usuarios con Supabase Auth. Aquí verás cómo activar el flujo clásico de email y contraseña, preparar registro y inicio de sesión, y aplicar validaciones básicas para evitar correos o contraseñas inválidas. Además, aprenderás a enriquecer al usuario con metadata como username y rol, y a reconocer opciones clave del dashboard de Supabase.

¿Cómo activar Supabase Auth y qué opciones clave configurar?

Configura la autenticación desde el apartado de authentication en el dashboard. Puedes crear usuarios por invitación (envía email para aceptar) o registrarlos directamente con correo y contraseña. Si marcas la autoconfirmación, no se enviará correo de verificación.

• Permitir registro de nuevos usuarios. Activar o desactivar según necesidad.
• Permitir link manual para el proyecto. Útil para flujos personalizados.
• Permitir logueos anónimos. Opción para pruebas o accesos limitados.
• Enviar email de confirmación al registrarse. Recomendado si no usas autoconfirmación.
• Proveedores de login: email, teléfono y sociales (Apple, Azure, etc.). Requiere configurar cada provider.
• Políticas de seguridad: manejo de role level security por tabla. Se trabajará más adelante.

Ejemplo práctico: al crear un usuario de prueba en el panel con autoconfirmación, podrás iniciar sesión de inmediato con ese correo y contraseña, y verás datos como ID, email, fecha de creación, último acceso y si el email está verificado.

¿Cómo se implementa el flujo de registro con validaciones y metadata?

Desde la interfaz, el registro solicita username, email y contraseña. Si no hay autoconfirmación, se envía un correo para validar la cuenta y se muestra el mensaje «Registro exitoso. Revisa tu correo electrónico para confirmar tu cuenta».

¿Qué validaciones básicas aplicar?

• Verificar que las contraseñas existan y coincidan.
• Validar formato del email.
• Comprobar que el username sea único: si no existe, se devuelve un 404 como señal de que puede usarse.

¿Cómo registrar desde la interfaz y confirmar el email?

• Completar username, email y contraseña.
• Enviar el registro a Supabase.
• Recibir el correo de confirmación por defecto de Supabase y confirmar con el enlace.
• Ser redirigido a la aplicación local en localhost:3000.

¿Qué es la metadata del usuario y para qué sirve?

La metadata permite adjuntar datos personalizados como username y rol. Si registras desde el dashboard, lo habitual es obtener solo provider y email verificado. Si registras desde el cliente, puedes incluir campos extra para identificar mejor a cada usuario.

Ejemplo (pseudocódigo del registro):

// handleSubmit (registro)
if (!password || password !== repeatPassword) return mostrarError('Contraseña inválida.');
const disponible = await verificarUsername(username); // 404 si no existe, permitido.
if (!disponible) return mostrarError('El usuario ya existe.');

const { error } = await supabase.auth.registrar({
  email,
  password,
  options: {
    data: { username, rol }
  }
});

if (error) return mostrarError(error.message);
mostrarMensaje('Registro exitoso. Revisa tu correo para confirmar tu cuenta.');

¿Cómo funciona el inicio de sesión y la lectura de datos?

El login con contraseña requiere los campos email y password. Tras autenticarse, puedes leer los datos del usuario y su metadata para mostrarlos o guardarlos.

¿Qué parámetros requiere el login con password?

• email: correo registrado.
• password: contraseña asociada.

¿Qué datos devuelve Supabase tras iniciar sesión?

• Estado del email: verificado o no.
• Identificadores: ID del usuario, proveedor, último acceso.
• Campos por defecto: email, teléfono (vacío si no se usa).
• Metadata: por ejemplo, username y rol cuando se agregó desde el cliente.

Ejemplo (pseudocódigo del login):

// handleSubmit (login)
const { error, user } = await supabase.auth.loginConPassword({ email, password });
if (error) return mostrarError(error.message);

const meta = user.user_metadata; // username, rol, etc.
console.log('Usuario logueado:', user);
console.log('Metadata:', meta);
mostrarMensaje('Inicio de sesión exitoso.');

Habilidades y conceptos reforzados:

• Configuración de Supabase Auth en dashboard y cliente.
• Flujo de registro con verificación por correo y autoconfirmación.
• Validaciones: contraseñas, formato de email y unicidad de username con 404.
• Manejo de metadata para enriquecer el perfil (username, rol).
• Conocimiento de providers y opciones de login (email, teléfono, sociales).
• Introducción a role level security para proteger tablas por usuario.

¿Quieres que revisemos tus validaciones o la estructura de tu metadata? Cuéntame qué campo personalizado necesitas y lo vemos paso a paso.