Crie seu app rapidamente e lide com fluxos de login usando Cursor e Logto

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

1. Como criar um web app usando vibe coding no Cursor.
2. Como adicionar autenticação (fluxos de login) com Logto para proteger seu conteúdo.

Crie um app de galeria de fotos no Cursor#

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.

Adicione a documentação do Logto como contexto#

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).

Finalize a integração#

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!

Refine a interface e teste o fluxo completo#

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.

Iteração futura#

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

1. Criar e gerenciar usuários
2. Acessar logs
3. Configurar e gerenciar fluxos de login
4. Projetar e gerenciar autorização (por exemplo, recursos de API, permissões e papéis)
5. Gerenciar aplicativos e recursos
6. E muito mais

Fique ligado! Com o poder da IA e da infraestrutura robusta do Logto, integrar autenticação deixou de ser um desafio!