Usar o Bolt.New e o Logto para criar rapidamente fluxos de login personalizados
Aprende a usar o Bolt.new para construir uma aplicação full-stack com autenticação Logto. Desde configurar fluxos de início de sessão até criar um painel de login flutuante e ativar logins sociais, este guia cobre tanto a configuração como a personalização.
Product & Design
O que é o Bolt.New
Bolt.new é uma ferramenta baseada no browser para gerar e executar aplicações web full-stack instantaneamente. Construída sobre a tecnologia WebContainer da StackBlitz, oferece aos programadores um stack limpo e pré-configurado que inclui Next.js (App Router), Tailwind CSS, Supabase, Prisma e ShadCN UI. Todo o ambiente corre localmente no browser, sem instalações, sem etapas de build na cloud e sem necessidade de registo.
Ao contrário de ferramentas que se focam em programação assistida por IA dentro de um projeto existente, o Bolt.new concentra-se no início do processo de desenvolvimento. Remove a sobrecarga de configurar a estrutura do projeto, dependências e servidores locais, permitindo que passes da ideia ao protótipo funcional em segundos.
Em que é que o Bolt.new é diferente do Cursor ou do Lovable?
Enquanto ferramentas como o Cursor e o Lovable servem como copilotos de IA dentro do editor de código, o Bolt.new tem outro foco: geração instantânea de projetos full-stack e execução imediata.
- O Cursor melhora o fluxo de trabalho do VS Code com IA, ajudando a editar ou gerar código no teu ambiente existente.
- O Bolt.new cria uma aplicação funcional do zero com base em um prompt ou template, e corre-a instantaneamente dentro do browser usando WebContainers.
Não há dependência de ferramentas locais nem de VMs remotas na cloud. Tudo corre no browser com suporte nativo para Node.js, gestão de pacotes e desenvolvimento full-stack. Isto torna-o especialmente indicado para prototipagem rápida e experimentação "local-first", em especial para contextos de projetos de IA ou SaaS.
Para quem é o Bolt.new?
O Bolt.new foi desenhado para programadores que costumam começar do zero, tais como:
- Indie hackers a validar ideias de produtos
- Criadores de IA a testar fluxos de trabalho ou a incorporar modelos
- Fundadores a prototipar MVPs
- Engenheiros a criar ferramentas internas ou demos
Estes utilizadores geralmente estão à vontade com o stack moderno da web e preferem ferramentas rápidas, limpas e sem opiniões forçadas. O Bolt.new não é um construtor visual de sites nem uma plataforma de tutoriais. Assume conhecimentos de React e desenvolvimento full-stack, mas remove obstáculos de configuração.
História e evolução do Bolt.new
O Bolt.new foi criado pela equipa por trás da StackBlitz, uma empresa fundada em 2017 por Eric Simons e Albert Pai. A StackBlitz foi pioneira nos WebContainers, um runtime WebAssembly nativo do browser, capaz de executar ambientes Node.js diretamente no browser. Isto eliminou a necessidade de servidores na cloud ou instalações locais ao desenvolver aplicações modernas em JavaScript.
Em 2023, a StackBlitz enfrentou um momento de viragem. O crescimento abrandou e a equipa explorou uma direção mais radical: combinar WebContainers com IA para gerar aplicações totalmente funcionais a partir de prompts em linguagem natural.
Esta experiência tornou-se o Bolt.new, lançado publicamente em outubro de 2024. Em poucas semanas, ganhou muita tração entre programadores, pela simplicidade e rapidez. A ferramenta combinou tudo o que a StackBlitz construiu ao longo dos anos — isolamento de runtime, instalação rápida de dependências e ambientes partilháveis — com uma interface de IA que compreendia objetivos comuns de desenvolvimento.
O Bolt.new marcou a mudança nas ferramentas de programação: em vez de apenas escrever código mais depressa, os programadores podiam agora começar com código já em execução, adaptado à sua intenção.
Guia: Usa Logto e Bolt.New para adicionar uma experiência de login personalizada
Regista uma aplicação na consola da Logto
Neste exemplo, usei o Bolt.new para criar uma app de CMS. Saltei a fase do prompt e fui direto ao assunto: pedi ao agente para construir um CMS com a Logto como fornecedor de autenticação.
Segundo as instruções, precisava de fornecer dois elementos chave:
Endpoint do LogtoID da App
Como a aplicação é React de página única, não é necessário segredo da app. O agente tratou do resto: instalou o Logto React SDK mais recente, configurou os componentes de autenticação e ligou tudo.
Para completar a configuração, fui à Logto Cloud Console, criei uma nova aplicação de página única e copiei o endpoint e o App ID do Logto para o Bolt.new.
Depois, configura os URIs de Redirecionamento e os URIs de redirecionamento após sign-out.
Um detalhe importante: como o Bolt.new funciona no browser e não num IDE local, não podes usar http://localhost:3000/ como URI de redirecionamento. Em vez disso, usa o URL de pré-visualização apresentado no separador do Bolt.new.
Personaliza a experiência de login pré-construída do Logto
O Logto dispõe de um fluxo de login pré-construído e configurável, que podes personalizar na consola. Para começar, vai a Sign-in Experience > Sign-in & Sign-up e escolhe os métodos preferidos (email, nome de utilizador, número de telefone ou login social).
Depois de configurado, ativar o fluxo de login redireciona os utilizadores para a página de login alojada da Logto com as opções selecionadas. Todo o processo de autenticação é gerido pelo Logto e os utilizadores voltam à app após iniciarem sessão.
Cria um painel de login flutuante sobre o teu produto
Agora quero ir um passo além e construir uma experiência de login mais personalizada, semelhante ao que a Perplexity oferece. Em vez de redirecionar para uma página separada, vou colocar um painel de login flutuante diretamente sobre a interface do produto. Isto mantém os utilizadores no contexto, mesmo continuando a usar o fluxo de autenticação do Logto por baixo.
Por isso, uso simplesmente este prompt:
Quero tornar a página de login mais apelativa, só um painel flutuante no canto inferior direito. Com dois botões: um para "Iniciar Sessão" e outro para "Criar Conta". Cada botão deve redirecionar para um ecrã diferente, gerido pelo Logto. Usar a experiência first-screen documentada no Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
A parte gira é que, ao clicares em Iniciar Sessão, vai direto para a página de login. Se clicares em Criar Conta, vai diretamente para o ecrã de criação de conta.
Adiciona fluxos sociais
Podes fornecer ao agente a documentação de login direto da Logto juntamente com um prompt como “adiciona fluxos de login social”. Assim podes ignorar o ecrã inicial padrão da Logto. Por exemplo, ao clicar no botão Google Sign-In inicias imediatamente o fluxo de autenticação da Google, proporcionando uma experiência de login mais rápida e amigável.
A próxima atualização do Logto vai suportar integração de autenticação com IA
Isto é apenas um exemplo básico. O Logto está atualmente a desenvolver servidores MCP que correm diretamente no teu IDE, permitindo-te interagir com a Logto Console e a Management API sem saíres do ambiente de desenvolvimento.
Com este setup, vais poder:
- Criar e gerir utilizadores
- Ver e filtrar logs
- Configurar fluxos de login e registo
- Definir recursos de API, permissões e papéis
- Gerir aplicações e definições de acesso
- E mais
Ao combinar ferramentas locais com IA e a infraestrutura Logto, a autenticação deixa de ser um passo doloroso de integração e passa a fazer parte do teu fluxo natural de desenvolvimento.