Configurar Supabase Auth con email y contraseña es el paso que transforma tu PlatziGram de una app anónima a una plataforma con identidad real para cada usuario. Aquí aprenderás a activar el flujo de registro, iniciar sesión con credenciales y dejar la base lista para conectarla al front-end.

Esta guía es para desarrolladores que ya iniciaron su proyecto en Supabase y quieren añadir autenticación clásica antes de avanzar con perfiles, posts o likes.

¿Cómo activar la autenticación en el dashboard de Supabase?

Dentro del dashboard, el apartado Authentication concentra todas las opciones para registrar y administrar usuarios. Si ya hay cuentas creadas, aparecerán listadas con su identificador, email, proveedor y fecha de creación [01:00].

Desde ahí puedes crear usuarios de dos formas:

• Enviar una invitación por correo para que la persona complete el registro.
• Crear el usuario manualmente con email y contraseña, marcando la opción de autoconfirmar para evitar enviar el correo de verificación.

Para el ejemplo se creó test@test.com con contraseña y autoconfirmación activada. Al refrescar, el usuario aparece con su ID, email, proveedor email y la fecha en que se creó.

¿Qué es Supabase Auth? Es el sistema de autenticación integrado de Supabase que permite registrar e iniciar sesión usando email, teléfono o proveedores externos como Google, Apple o Azure, sin construir tu propio backend.

¿Qué configuraciones de registro ofrece Supabase Auth?

Supabase Auth incluye un panel de configuraciones para controlar quién entra y cómo lo hace. Puedes activar o desactivar el registro de usuarios nuevos, permitir el link manual al proyecto, habilitar logueos anónimos y decidir si se envía un email de confirmación al registrarse [02:30].

Entre los proveedores de login disponibles encontrarás:

• Email y teléfono como métodos directos.
• Cuentas sociales como Apple, Azure y otras integraciones nativas.
• Third party auth con Firebase, Clerk, Workos, Auth0 y Amazon Cognito.

Cada proveedor externo requiere que inicies sesión en su consola para validarlo y activarlo en tu proyecto. Además del registro, Supabase ofrece políticas de row level security por tabla, un tema que se profundiza más adelante en el curso.

¿Cómo se construye el flujo de registro desde la interfaz?

El registro desde el cliente es más rico que el del dashboard, porque puedes enviar metadata personalizada junto al email y la contraseña. En el ejemplo se registró el usuario suplazigram@gmail.com con nombre de usuario Su Platzi Gram [04:10].

El flujo en el código vive dentro de la carpeta auth y arranca en la función handleSubmit. Esta función realiza tres tareas clave:

1. Valida que las contraseñas coincidan entre los dos campos del formulario.
2. Verifica si el username ya existe mediante una función util; si responde 404, el nombre está disponible.
3. Llama a supabase.auth.signUp enviando email, password y un objeto options con la metadata.

js await supabase.auth.signUp({ email, password, options: { data: { username, role } } })

El 404 que aparece en consola no es un error real: es la confirmación de que el username está libre para usarse.

¿Por qué llega un correo de confirmación?

Cuando registras desde la interfaz sin marcar autoconfirmación en el código, Supabase envía un email default pidiendo validar la cuenta. Al hacer clic en el link, el usuario es redirigido a localhost:3000, que es la app en construcción.

¿Qué diferencia hay entre crear un usuario en el dashboard y desde la interfaz? En el dashboard solo puedes pasar email y password. Desde la interfaz puedes añadir metadata personalizada como username y role, que quedan accesibles en user_metadata.

¿Cómo funciona el inicio de sesión con email y contraseña?

La función handleSubmit del login es más simple que la del registro. Maneja los estados de carga y mensajes, y termina llamando a supabase.auth.signInWithPassword con los dos parámetros obligatorios: email y password [07:20].

js const { data, error } = await supabase.auth.signInWithPassword({ email, password })

Al recibir respuesta, el código extrae la metadata usando user.user_metadata. Ahí aparecen los campos personalizados que enviaste en el registro, como el username Su Platzi Gram y el role.

La consola muestra el mensaje inicio de sesión exitoso junto con el ID del usuario, el email, la fecha de confirmación, si es anónimo, la última vez que se logueó y el rol authenticated. El campo teléfono queda vacío porque no se completó.

¿Qué validaciones básicas no deben faltar?

Antes de enviar cualquier dato a Supabase conviene revisar tres cosas en el cliente:

• Que ambas contraseñas hagan match.
• Que el username sea único mediante la consulta previa.
• Que el formato del email sea válido para evitar registros con direcciones inválidas.

Estas validaciones evitan llamadas innecesarias y mejoran la experiencia. La metadata que envíes aquí es la que define qué tan robusto será tu sistema de identidad: cuanta más información asocies al usuario, mejor podrás separar perfiles, asignar permisos o personalizar la experiencia.

Con esta base ya puedes registrar usuarios reales, validar credenciales y leer su metadata. ¿Cómo planeas estructurar la metadata de tus usuarios en tu propio proyecto? Cuéntalo en los comentarios.