Programação expressa usando o Cursor e Logto para criar rapidamente a tua app e gerir fluxos de login

Programação expressa está a tornar-se popular graças a ferramentas poderosas como o Cursor e o Windsurf. Mesmo com pouca experiência, podes criar rapidamente a tua própria app.

Para muitos programadores e criadores, configurar fluxos de login pode ser complicado. Mas com o MCP e as funcionalidades de contexto integradas nos IDEs modernos, adicionar autenticação à tua app já não é uma tarefa complexa, mesmo que não sejas um programador.

Neste tutorial, vou mostrar-te:

1. Como criar uma aplicação web usando programação expressa no Cursor.
2. Como adicionar autenticação (fluxos de login) com o Logto para proteger o teu conteúdo.

Criar uma app de galeria de fotos no Cursor#

Primeiro, só preciso de abrir um chat no Cursor e escrever o pedido:

“Cria uma aplicação de página única usando Next.js Page Router.” O Cursor trata do resto e gera tudo para mim.

Vamos transformá-la numa app de galeria de fotos. Ajuda-me a obter várias fotos do Unsplash e organizá-las por mim.

Adicionar autenticação à tua app de galeria de fotos#

Tradicionalmente, terias de ler a documentação manualmente e explorar o SDK para concluir a integração. Mas com o Cursor, podes aproveitar totalmente a IA para tornar o processo muito mais simples e rápido.

Adicionar documentação do Logto como contexto#

Podes adicionar um fluxo de login para proteger a tua app. O Cursor suporta prompts sensíveis ao contexto, por isso podes adicionar a documentação do Logto como referência. Isto permite-te integrar facilmente a autenticação usando o Logto SDK para Next.js (Page Router).

Concluir a integração#

Como podes ver, ele faz referência ao guia de início rápido para te dizer o que fazer a seguir. No segundo passo, pede-me para configurar definições como appId, endpoint e assim por diante. Para obter estes valores, tenho de ir ao Logto Cloud e registar uma nova app.

Também me pede para introduzir http://localhost:3000/api/auth/callback/logto como o URI de redirecionamento.

Introduz o Redirect URI na consola do Logto Cloud

Obtém esses valores e guarda-os no teu ficheiro de configuração.

Por isso, só forneço o App ID, App Secret e endpoint do Logto ao Cursor, e ele atualiza o código para mim.

Agora, executo o servidor e obtenho uma página inicial simples de Iniciar sessão. Quando clico em Iniciar sessão, redireciona-me para a página de login do Logto.

É isso! Redirecionou com sucesso para a página de login do Logto!

Refinar a interface e testar todo o fluxo#

O ecrã inicial estava demasiado básico, por isso pedi ao Cursor para melhorar o design.

Eis o que me deu.

Agora é hora de testar todo o fluxo.

Por falar nisso, o Logto vem com um serviço de email integrado, por isso podes passar por todo o processo de verificação de email imediatamente.

Depois de concluir o fluxo, inicias sessão com sucesso e consegues ver o teu ID de utilizador apresentado no ecrã.

Agora vamos ver se este utilizador foi adicionado à Console do Logto… Fixe! Está lá! 🎉

Graças à documentação, boas práticas e à codificação estilo Copilot do Logto, a integração é simples mesmo para quem tem pouca experiência técnica. Configurar um fluxo de login já não é uma tarefa pesada ou aborrecida.

Próximas iterações#

Este é apenas um pequeno exemplo prático. O Logto está activamente a construir servidores MCP que correm diretamente dentro do teu IDE, permitindo interagires com a Logto Console e a Management API sem precisares de sair do ambiente de desenvolvimento. Com isto, vais poder:

1. Criar e gerir utilizadores
2. Obter registos
3. Configurar e gerir os teus fluxos de login
4. Conceber e gerir autorização (ex: recursos API, permissões e papéis)
5. Gerir aplicações e recursos
6. E muito mais

Fica atento(a), com o poder da IA e a infraestrutura robusta da Logto, a integração de autenticação já não é um desafio!