Usando Bolt.New e Logto para construir rapidamente seus próprios fluxos de login

O que é Bolt.New#

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.

Para quem é o Bolt.new?#

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.

A história e evolução do Bolt.new#

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#

Registre um app no console do Logto#

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:

1. Endpoint do Logto
2. 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.

Depois, configure os URIs de Redirecionamento e os URIs de redirecionamento após o logout.

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.

Adicione fluxos sociais#

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á:

1. Criar e gerenciar usuários
2. Visualizar e filtrar logs
3. Configurar fluxos de login e cadastro
4. Definir recursos de API, permissões e papéis
5. Gerenciar aplicativos e configurações de acesso
6. 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.