Usando Bolt.New y Logto para crear rápidamente tus propios flujos de inicio de sesión personalizados
Aprende cómo usar Bolt.new para crear una aplicación full-stack con autenticación Logto. Desde configurar flujos de inicio de sesión hasta crear un panel flotante de login y habilitar accesos sociales, esta guía cubre tanto la configuración como la personalización.
GuamianProduct & Design
Deja de perder semanas en la autenticación de usuarios
Lanza aplicaciones seguras más rápido con Logto. Integra la autenticación de usuarios en minutos y concéntrate en tu producto principal.
Bolt.new es una herramienta basada en navegador para generar y ejecutar aplicaciones web full-stack al instante. Construida sobre la tecnología WebContainer de StackBlitz, proporciona a los desarrolladores un entorno limpio y preconfigurado que incluye Next.js (App Router), Tailwind CSS, Supabase, Prisma y ShadCN UI. Todo el entorno corre localmente en el navegador, sin instalaciones, sin pasos de compilación en la nube ni necesidad de registro.
A diferencia de las herramientas que se centran en la asistencia mediante IA dentro de un proyecto existente, Bolt.new se enfoca en el inicio del proceso de desarrollo. Elimina la sobrecarga de configurar la estructura, las dependencias y los servidores locales del proyecto, permitiéndote pasar de la idea al prototipo funcional en segundos.
¿En qué se diferencia Bolt.new de Cursor o Lovable?#
Mientras que herramientas como Cursor y Lovable funcionan como copilotos de IA dentro de tu editor de código, Bolt.new se centra en otra cosa: la generación y ejecución instantánea de proyectos full-stack.
Cursor mejora los flujos de trabajo de VS Code con IA, ayudándote a editar o generar código en tu entorno existente.
Bolt.new crea una aplicación funcional desde cero basada en un prompt o plantilla, y la ejecuta al instante en el navegador usando WebContainers.
No depende de herramientas locales ni de máquinas virtuales en la nube. Todo ocurre en el navegador con soporte nativo para Node.js, gestión de paquetes y desarrollo full-stack. Es ideal para prototipado rápido y experimentación local, especialmente en contextos de proyectos de IA o SaaS.
Bolt.new está pensado para desarrolladores que suelen comenzar desde cero, tales como:
Indie hackers que validan ideas de producto
Constructores IA probando flujos de trabajo o integrando modelos
Fundadores prototipando MVPs
Ingenieros creando herramientas internas o demos
Estos usuarios normalmente están cómodos con el stack web moderno y prefieren herramientas que sean rápidas, limpias y no impongan demasiada opinión. Bolt.new no es un builder visual ni una plataforma de tutoriales. Requiere un conocimiento básico de React y desarrollo full-stack, pero elimina la fricción inicial.
Bolt.new fue creado por el equipo de StackBlitz, una empresa fundada en 2017 por Eric Simons y Albert Pai. StackBlitz fue pionera con WebContainers, un runtime nativo de navegador basado en WebAssembly capaz de ejecutar entornos Node.js directamente en el navegador. Esto eliminó la necesidad de servidores en la nube o instalaciones locales al desarrollar aplicaciones modernas en JavaScript.
En 2023, StackBlitz enfrentó un punto de inflexión. El crecimiento se había ralentizado y el equipo exploró un camino más radical: combinar WebContainers con IA para generar aplicaciones funcionales a partir de instrucciones en lenguaje natural.
Este experimento se convirtió en Bolt.new, que se lanzó públicamente en octubre de 2024. En pocas semanas consiguió mucha tracción entre los desarrolladores por su simplicidad y velocidad. Combinaba todo lo construido por StackBlitz durante años: aislamiento del runtime, instalación rápida de dependencias y entornos compartibles, con una interfaz IA que comprendía objetivos comunes de desarrollo.
Bolt.new marcó un cambio en las herramientas de desarrollo: en vez de solo escribir código más rápido, los desarrolladores podían ahora empezar con código que ya está funcionando, adaptado a su intención.
Guía: Usa Logto y Bolt.New para agregar una experiencia de inicio de sesión personalizada#
En este ejemplo, usé Bolt.new para crear una app de CMS. Omití la fase de prompt y fui directo al grano: pedí al agente que construya un CMS con Logto como proveedor de autenticación.
Siguiendo las instrucciones, necesitaba proporcionar dos datos clave:
Logto endpoint
App ID
Como la app es una aplicación React de una sola página, no se necesita un secreto de app. El agente manejó el resto: instaló el Logto React SDK más reciente, configuró los componentes de autenticación y conectó todo.
Para completar la configuración, fui a la Consola Logto Cloud, creé una nueva aplicación de una sola página y copié el endpoint de Logto y el App ID en Bolt.new.
Luego configura los Redirect URIs y las URIs de redirección post-cierre de sesión.
Un detalle importante: como Bolt.new es basado en navegador y no un IDE local, no puedes usar http://localhost:3000/ como tu URI de redirección. En su lugar, asegúrate de usar la URL de previsualización que aparece en la pestaña del navegador de Bolt.new.
Personaliza la experiencia de inicio de sesión preconstruida de Logto#
Logto ofrece un flujo de inicio de sesión preconstruido y configurable que puedes adaptar desde la Consola. Para comenzar, ve a Sign-in Experience > Sign-in & Sign-up y elige los métodos de acceso preferidos (correo, nombre de usuario, teléfono o login social).
Una vez configurado, al disparar el flujo de inicio de sesión los usuarios serán redirigidos a la página alojada de Logto con tus opciones seleccionadas. Todo el proceso de autenticación lo gestiona Logto y los usuarios vuelven a tu aplicación después de iniciar sesión.
Crea un panel flotante para el login sobre tu producto#
Ahora quiero ir un paso más allá y construir una experiencia de login más personalizada, similar a la de Perplexity. En vez de redirigir a otra página, pondré un panel flotante de inicio de sesión directamente encima de la interfaz de usuario del producto. Así los usuarios permanecen en contexto utilizando el flujo de autenticación de Logto por debajo.
Así que simplemente uso este prompt:
Quiero que la página de inicio de sesión se vea mejor, solo un panel flotante en la esquina inferior derecha. Con dos botones: uno para “Iniciar Sesión” y otro para “Crear Cuenta”. Cada botón debe redirigir a una pantalla diferente, gestionada por Logto. Usando la experiencia de primera pantalla documentada en Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
La parte interesante es que, al hacer clic en Iniciar Sesión, va directo a la página de acceso. Si haces clic en Crear Cuenta, abre directamente la pantalla para crear cuenta.
Puedes proporcionar al agente la documentación de acceso directo de Logto junto con un prompt tipo “añadir login social”. Así puedes saltarte la pantalla de bienvenida de Logto por defecto. Por ejemplo, al pulsar el botón Google Sign-In, se lanza directamente el flujo de autenticación de Google, ofreciendo a los usuarios un inicio de sesión más rápido y amigable.
Próxima actualización de Logto: integración auth impulsada por IA#
Esto es solo un ejemplo básico. Logto está desarrollando actualmente servidores MCP que funcionan directamente en tu IDE, permitiéndote interactuar con la Consola de Logto y la API de gestión sin dejar tu entorno de desarrollo.
Con esta configuración podrás:
Crear y gestionar usuarios
Ver y filtrar logs
Configurar los flujos de inicio de sesión y registro
Definir recursos de API, permisos y roles
Gestionar aplicaciones y ajustes de acceso
Y más
Al combinar herramientas locales con IA e infraestructura de Logto, la autenticación deja de ser un dolor de cabeza para integrarse y pasa a formar parte natural del flujo de desarrollo.
