Cómo crear perfiles editables con Supabase storage

Construir perfiles sólidos en Supabase es clave para una experiencia social fluida. Aquí verás cómo habilitar la edición del perfil, cambiar el avatar con storage y renderizar una vista pública en Suplaxigram, cuidando permisos, validaciones y la lógica de sesión. Todo se centra en la tabla profiles, el bucket de imágenes y una UI reactiva que responde al estado del usuario.

¿Cómo se habilita un perfil editable con Supabase y storage?

La meta es que cada usuario tenga username, foto de perfil y biografía visibles. Desde el front-end, se presenta una vista pública y una página de edición con campos para avatar y nombre de usuario.

• Vista de perfil con avatar y username visibles.
• Botón de editar que lleva a la página de edición.
• Carga de imagen al storage en el bucket de imágenes (carpetas: posts y profile).
• Actualización de la fila en la tabla profiles con la URL del avatar.

La interfaz comprueba primero si hay sesión activa. Si no la hay, detiene el flujo y marca el fin de loading. Si sí existe, consulta el perfil en la tabla profiles usando el user ID de la sesión y pinta la UI con los datos disponibles.

¿Qué pasa si el perfil no existe aún?

Cuando un usuario recién se registra, puede que aún no exista la fila en profiles. Al visitar la página de perfil:

• Se crea automáticamente la fila con: ID = user ID, username desde la metadata del usuario y avatar_url en null.
• La UI no muestra errores: simplemente consume esa data inicial.

¿Cómo se refleja el avatar cargado?

Tras guardar, la imagen queda almacenada en el bucket de imágenes, carpeta profile. La URL pública que se guarda en profiles corresponde a ese archivo en storage. Al recargar, la UI muestra el avatar actualizado.

¿Qué errores de permisos (403) y RLS afectan a profiles?

Al intentar guardar por primera vez, aparece un error 403: es un tema de permisos y políticas. En posts ya estaba resuelto, pero en profiles seguía activo el role level security (RLS).

• El 403 indica: se pudo subir al storage, pero no escribir en la base de datos.
• Resultado: se sube la misma imagen dos veces porque se reintenta la carga sin completar la escritura en profiles.
• Solución temporal: desactivar RLS en la tabla profiles desde el panel de Supabase para permitir la escritura desde el front-end.

Con RLS desactivado, el flujo termina en “perfil actualizado” y la fila en profiles muestra el ID del usuario y la URL del avatar. Más adelante, se implementarán políticas finas para no dejarlo abierto.

¿Dónde quedan los archivos?

En storage, dentro del bucket de imágenes. Se organizan por carpetas: posts y profile. Allí queda la imagen del avatar. La URL copiada corresponde exactamente a la que se guarda en la tabla y que la UI usa para renderizar.

¿Cómo funciona la lógica en page.tsx y la edición del username?

La carpeta profile contiene la página pública y una subcarpeta edit con su propia página. Ambas importan la librería de Supabase y consultan datos del usuario.

• page.tsx: llama a la función de autenticación para obtener el usuario actual y su sesión. Si hay sesión, busca el perfil por user ID en profiles.
• Manejo de errores: se controla el caso en que no haya sesión o el perfil aún no exista.
• Flujo de creación: si no existe perfil, se crea con datos desde la metadata y avatar_url en null.

¿Cómo se valida el username con regex?

En la página de edición, se definen reglas claras para el username:

• Requerido y sin espacios.
• Longitud: mínimo 3 y máximo 20 caracteres.
• Permitidos: letras, números y guion bajo.
• Validación con regex que impide caracteres no permitidos.

Estas validaciones pueden moverse a utils, pero se mantienen visibles para comprender el control de entrada.

¿Cómo se verifica la disponibilidad del username?

No pueden existir dos usuarios con el mismo username. Por eso:

• Se consulta la tabla profiles buscando coincidencias exactas con el valor introducido en la UI.
• Si no hay resultados o hay error de “no existe”, el nombre está disponible.
• Si existe, se notifica y no se permite continuar.

Una vez validado y disponible, se actualiza el perfil y la UI refleja el cambio. El proceso contempla tanto la lectura del perfil como la actualización tras la verificación.

¿Qué habilidades y conceptos se aplican aquí?

• Gestión de sesión y estado: comprobar sesión antes de consultar datos.
• Consultas condicionadas en Supabase: filtrar por user ID en profiles.
• Manejo de errores: corta el flujo si no hay sesión o hay error de permisos.
• Storage de archivos: subir avatar al bucket y guardar la URL en la base.
• Políticas y RLS: entender cómo el role level security bloquea escrituras.
• Validación de formularios: aplicar regex y reglas de negocio al username.
• UI reactiva: refrescar vista según éxito o error al actualizar.

¿Te gustaría proponer validaciones extra para el username o reglas RLS más seguras? Comparte ideas y casos reales en los comentarios.