Perfiles editables con Supabase y storage

Crea perfiles reales y usables con Supabase en Suplaxigram: edición de datos públicos, cambio de avatar con storage y una vista de perfil lista para el front-end. Aquí se ve cómo validar sesión, leer/escribir en la tabla profiles y manejar permisos, todo con una UI clara y enfoque práctico.

¿Qué construimos: perfiles editables con Supabase y storage?

Implementamos un flujo completo de perfil: editar datos, subir avatar al storage y mostrar un perfil público con username, foto y biografía. Así, cada usuario ve y actualiza su información, y el front-end puede renderizar pantallas más personales y sociales.

¿Cómo se gestiona el avatar en el storage?

• Se sube la imagen al bucket de imágenes en carpetas: posts y profile.
• Se obtiene la URL pública y se guarda en la tabla profiles.
• Si el storage permite subir pero la base de datos no permite escribir, se pueden generar cargas duplicadas. Ocurrió porque la imagen se subió, falló el guardado del perfil y el flujo volvió a intentar subirla.

¿Por qué ocurrió el error 403 y qué hicimos?

• Apareció un 403 por permisos en la tabla profiles.
• Ya se habían ajustado políticas para posts, pero no para profiles.
• Se desactivó temporalmente el role level security en profiles para permitir la escritura desde el front-end.
• Más adelante se configurarán políticas adecuadas para evitar estos escenarios.

¿Qué estructura de código usamos en profile, edit y page.tsx?

• Carpeta principal: profile/.
• Subruta de edición: profile/edit con su página.
• En page.tsx se obtiene el usuario con la función de autenticación get user de Supabase y se renderiza la UI con los datos del perfil.

¿Cómo funciona la carga y lectura del perfil?

La lógica parte validando la sesión. Si no hay sesión, se marca el fin del loading, se setea un error y se hace un return para no continuar. Si existe sesión, se consulta la tabla profiles por ID igual al user ID y se pinta la UI con los datos recuperados.

¿Cómo validamos el username y su unicidad?

• Reglas: requerido, sin espacios, mínimo 3 y máximo 20 caracteres, solo letras, números y guion bajo.
• Se usa un regex que verifica exactamente esas condiciones.
• Se consulta profiles para ver si el username ingresado ya existe. Si no existe, está disponible y se continúa.
• No pueden existir dos usuarios con el mismo username.

¿Qué pasa si no hay sesión activa?

• Se detecta la ausencia de sesión al inicio del flujo.
• Se detiene la ejecución y se redirige, evitando cargar la UI de edición o perfil.

¿Qué habilidades y conceptos aplicas aquí?

Dominas un flujo típico de perfiles con Supabase orientado a productos sociales: lectura, creación condicional, actualización y permisos, todo conectado al front-end.

• Consulta por ID del usuario en profiles. Se lee un único registro y se maneja el error de no encontrado.
• Creación automática del perfil. Si no existe, se inserta con user ID, username desde la metadata y avatar URL en null.
• Manejo de sesión. Validación temprana, control de loading y retorno anticipado.
• Subida de avatar al storage. Organización en bucket de imágenes y obtención de URL para la UI.
• Permisos y 403. Diferencia entre permisos de storage y de base de datos; uso temporal de role level security apagado en profiles.
• Validación de username. Reglas con regex y verificación de unicidad en la base de datos.
• Estructura del código. Carpeta profile con edit y page.tsx, separación clara entre vista pública y edición.
• Depuración de flujos. Identificación de cargas duplicadas cuando el storage permite subir pero la tabla bloquea escribir.

¿Te gustaría que agreguemos enlaces, filtros por usuario o estadísticas en la vista pública del perfil? Deja tus preguntas o ideas en los comentarios.