Usando Bolt.New e Logto para construir rapidamente seus próprios fluxos de login
Aprenda como usar o Bolt.new para construir um aplicativo full-stack com autenticação Logto. Da configuração dos fluxos de login à criação de um painel de login flutuante e habilitação de logins sociais, este guia cobre tanto a configuração quanto a personalização.
GuamianProduct & Design
Pare de perder semanas com autenticação de usuários
Lance aplicativos seguros mais rapidamente com o Logto. Integre a autenticação de usuários em minutos e concentre-se no seu produto principal.
Bolt.new é uma ferramenta baseada em navegador para gerar e executar aplicações web full-stack instantaneamente. Construída sobre a tecnologia WebContainer da StackBlitz, ela oferece aos desenvolvedores uma stack pré-configurada e limpa que inclui Next.js (App Router), Tailwind CSS, Supabase, Prisma e ShadCN UI. Todo o ambiente roda localmente no navegador, sem instalações, sem etapas de build na nuvem e sem necessidade de cadastro.
Diferente de ferramentas que focam em codificação assistida por IA dentro de um projeto existente, o Bolt.new foca no início do processo de desenvolvimento. Ele elimina o trabalho de configurar a estrutura do projeto, dependências e servidores locais, permitindo que você vá da ideia ao protótipo funcional em segundos.
Como o Bolt.new é diferente do Cursor ou Lovable?#
Enquanto ferramentas como o Cursor e o Lovable servem como copilotos de IA dentro do seu editor de código, o Bolt.new foca em algo totalmente diferente: geração e execução instantânea de projetos full-stack.
O Cursor aprimora fluxos de trabalho no VS Code com IA, te ajudando a editar ou gerar código no seu ambiente existente.
O Bolt.new cria um app funcional do zero com base num prompt ou template, e o executa instantaneamente no navegador usando WebContainers.
Não há dependência de ferramentas locais ou VMs remotas na nuvem. Tudo roda no navegador com suporte nativo a Node.js, gerenciamento de pacotes e desenvolvimento full-stack. Isso o torna particularmente adequado para prototipação rápida e experimentação local, especialmente em projetos de IA ou SaaS.
O Bolt.new foi projetado para desenvolvedores que frequentemente começam do zero, como:
Indie hackers validando ideias de produto
Builders de IA testando fluxos ou integrando modelos
Fundadores prototipando MVPs
Engenheiros criando ferramentas internas ou demos
Esses usuários costumam ter familiaridade com a stack web moderna e preferem ferramentas rápidas, limpas e sem muitas opiniões. O Bolt.new não é um construtor visual de sites ou plataforma guiada por tutorial. Ele assume conhecimento prático de React e desenvolvimento full-stack, mas elimina o atrito da configuração.
O Bolt.new foi criado pela equipe da StackBlitz, empresa fundada em 2017 por Eric Simons e Albert Pai. A StackBlitz foi pioneira dos WebContainers, um runtime de WebAssembly nativo do navegador e capaz de executar ambientes Node.js diretamente no navegador. Isso eliminou a necessidade de servidores na nuvem ou instalações locais para desenvolver aplicativos JavaScript modernos.
Em 2023, a StackBlitz enfrentou um ponto de virada. O crescimento havia desacelerado, e a equipe buscou uma direção mais radical: combinar WebContainers com IA para gerar aplicações totalmente funcionais a partir de prompts em linguagem natural.
Esse experimento se tornou o Bolt.new, que foi lançado publicamente em outubro de 2024. Em poucas semanas, ganhou destaque entre os desenvolvedores por sua simplicidade e velocidade. A ferramenta reuniu tudo que a StackBlitz havia construído ao longo dos anos — isolamento de runtime, instalação rápida de dependências e ambientes compartilháveis — com uma interface de IA que entendia objetivos comuns de desenvolvimento.
O Bolt.new marcou uma mudança nas ferramentas do desenvolvedor: em vez de apenas escrever código mais rápido, os desenvolvedores agora podiam começar com código já em execução, moldado de acordo com seu objetivo.
Guia: Use Logto e Bolt.New para adicionar uma experiência de login personalizada#
Neste exemplo, usei o Bolt.new para criar um app de CMS. Pulei a fase de prompt e fui direto ao ponto: pedi ao agente para construir um CMS com Logto como provedor de autenticação.
Segundo as instruções, precisei fornecer duas informações principais:
Endpoint do Logto
App ID
Como se trata de um aplicativo React de página única, não é necessário um segredo de app. O agente cuidou do resto: instalou o SDK React do Logto, configurou os componentes de autenticação e conectou tudo.
Para concluir a configuração, fui até o Logto Cloud Console, criei uma nova aplicação de página única e colei o endpoint do Logto e o App ID no Bolt.new.
Um detalhe importante: como o Bolt.new é baseado no navegador e não em um IDE local, você não pode usar http://localhost:3000/ como seu URI de redirecionamento. Em vez disso, use a URL de preview exibida na aba do navegador do Bolt.new.
Personalize a experiência de login pronta do Logto#
O Logto oferece um fluxo de login pré-construído e configurável que você pode personalizar no Console. Para começar, acesse Experiência de Login > Entrar & Cadastrar-se, então escolha seus métodos preferidos (como e-mail, nome de usuário, telefone ou login social).
Após configurado, acionar o fluxo de login redirecionará os usuários à página hospedada do Logto com as opções escolhidas. Todo o processo de autenticação é feito pelo Logto e os usuários retornam ao seu app após o login.
Crie um painel de login flutuante acima do seu produto#
Agora eu quero ir além e construir uma experiência de login ainda mais personalizada, semelhante ao que o Perplexity oferece. Em vez de redirecionar para outra página, vou colocar um painel de login flutuante diretamente sobre a interface do produto. Isso mantém o usuário no contexto, embora continue utilizando o fluxo de autenticação do Logto por trás.
Eu só precisei usar esse prompt:
Quero que a página de login fique melhor, apenas um painel flutuante no canto inferior direito. Com dois botões: um para "Entrar" e outro para "Criar Conta". Cada botão deve redirecionar para uma tela diferente, gerida pelo Logto. Usar a experiência de primeira tela documentada no Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
O legal é que, ao clicar em Entrar, você vai direto para a página de login. Se clicar em Criar Conta, abre direto a tela de cadastro.
Você pode fornecer ao agente a documentação de login direto do Logto junto com um prompt do tipo "adicionar fluxos de login social". Assim, você pula a tela padrão do Logto. Por exemplo, clicando no botão Entrar com o Google o fluxo de autenticação do Google é iniciado imediatamente, proporcionando ao usuário uma experiência de login mais ágil e amigável.
A próxima atualização do Logto trará integração de autenticação por IA#
Este é apenas um exemplo básico. O Logto está construindo atualmente servidores MCP que rodam diretamente dentro do seu IDE, te permitindo interagir com o Logto Console e Management API sem sair do seu ambiente de desenvolvimento.
Com essa configuração, você poderá:
Criar e gerenciar usuários
Visualizar e filtrar logs
Configurar fluxos de login e cadastro
Definir recursos de API, permissões e papéis
Gerenciar aplicativos e configurações de acesso
E mais
Combinando ferramentas locais com IA e infraestrutura Logto, autenticação não é mais um passo doloroso, mas sim parte natural do seu fluxo de desenvolvimento.
