Crie seu app rapidamente e lide com fluxos de login usando Cursor e Logto
Aprenda como criar um app de galeria de fotos com vibe code usando o Cursor e adicione login com o Logto em minutos. Da interface à autenticação, é rápido, simples e com o poder da IA.
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.
Vibe coding está se tornando popular graças a ferramentas poderosas como Cursor e Windsurf. Mesmo com pouca experiência, você pode criar seu próprio app rapidamente.
Para muitos desenvolvedores e criadores, configurar fluxos de login pode ser complicado. Mas com o MCP e os recursos de contexto inteligente embutidos nas IDEs modernas, adicionar autenticação ao seu app já não é mais uma tarefa complexa, mesmo que você não seja um desenvolvedor.
Neste tutorial, vou mostrar para você:
Como criar um web app usando vibe coding no Cursor.
Como adicionar autenticação (fluxos de login) com Logto para proteger seu conteúdo.
Primeiro, basta abrir um chat no Cursor e digitar o comando:
“Crie um app de página única usando Next.js Page Router.”
O Cursor cuida do resto e gera para mim.
Vamos transformar isso em uma galeria de fotos. Ele me ajuda a buscar várias fotos do Unsplash e organizá-las para mim.
Adicione autenticação ao seu app de galeria de fotos#
Tradicionalmente, você teria que ler a documentação manualmente e estudar o SDK para concluir a integração.
Mas com o Cursor, você pode aproveitar totalmente a IA para tornar o processo muito mais fluido e rápido.
Você pode adicionar um fluxo de login para proteger seu app. O Cursor aceita prompts sensíveis ao contexto, assim você pode adicionar a documentação do Logto como referência. Isso permite integrar facilmente a autenticação usando o Logto SDK para Next.js (Page Router).
Como você pode ver, ele faz referência ao guia de Quick Start para indicar o que fazer em seguida. No segundo passo, me pede para configurar parâmetros como appId, endpoint e outros. Para obter esses valores, é preciso ir em Logto Cloud e registrar um novo app.
Ele também pede para inserir http://localhost:3000/api/auth/callback/logto como URI de redirecionamento.
Insira o Redirect URI no console do Logto Cloud
Pegue esses valores e salve no seu arquivo de configuração.
Então, basta passar o App ID, App Secret e endpoint do Logto para o Cursor, e ele atualiza o código para mim.
Agora, executo o servidor e obtenho uma página inicial simples de Entrar. Quando clico em Entrar, sou redirecionado para a página de login do Logto.
É isso aí! O redirecionamento para a página de login do Logto funcionou!
A tela inicial estava muito básica, então pedi para o Cursor melhorar o design.
Veja o que ele me retornou.
Agora é hora de testar o fluxo completo.
Aliás, o Logto já vem com serviço de e-mail integrado, permitindo que você passe por todo o processo de verificação de e-mail facilmente.
Depois de completar o fluxo, você está autenticado com sucesso e pode ver seu ID de usuário na tela.
Agora vamos verificar se esse usuário foi adicionado ao Console do Logto…
Uhuu! Lá está! 🎉
Graças à documentação do Logto, boas práticas e ao estilo Copilot de codificação, a integração é simples mesmo para quem tem pouca experiência técnica. Configurar um fluxo de login não é mais uma tarefa pesada ou tediosa.
Isso é apenas um pequeno exemplo prático. O Logto está desenvolvendo servidores MCP que rodam diretamente dentro da sua IDE, permitindo a interação com o Console do Logto e a Management API sem sair do seu ambiente de desenvolvimento.
Com isso, você poderá:
Criar e gerenciar usuários
Acessar logs
Configurar e gerenciar fluxos de login
Projetar e gerenciar autorização (por exemplo, recursos de API, permissões e papéis)
Gerenciar aplicativos e recursos
E muito mais
Fique ligado! Com o poder da IA e da infraestrutura robusta do Logto, integrar autenticação deixou de ser um desafio!
Insira o Redirect URI no console do Logto Cloud
Pegue esses valores e salve no seu arquivo de configuração.
