Construindo UIs Personalizadas com a Integração do PropelAuth

Com o nosso recente lançamento do Servidor MCP de Integração PropelAuth, queríamos testá-lo junto com nosso registro de componentes shadcn, construindo alguns dos componentes mais únicos e …interessantes para substituir as páginas hospedadas do PropelAuth.

O servidor MCP de Integração não apenas ajuda você a começar a usar o PropelAuth o mais rápido possível, mas também pode ajudá-lo a construir versões personalizadas de suas páginas de login e inscrição, como esta:

Ou talvez você esteja construindo um aplicativo voltado para a GenZ e, como eu, você seja um Millennial fora de sintonia. Nosso servidor MCP e seu agente de IA favorito podem ajudá-lo a construir o que quer que seja isso?

Eu sei o que você está pensando - você nunca confiaria em um site que pede seu “Identificador de Vibe” e “Molho Secreto” para autenticar. Mas como sabemos que o PropelAuth está fazendo todo o trabalho nos bastidores, podemos confiar que é seguro e protegido. Vamos começar!

Instalando o Servidor MCP de Integração PropelAuth

Vamos começar conectando o Servidor MCP de Integração PropelAuth ao seu agente de IA favorito. Neste exemplo, usaremos o Claude Desktop. Se você estiver usando uma ferramenta diferente, confira nossa documentação de instalação aqui.

No aplicativo Claude Desktop, clique no ícone + → Conectores → Gerenciar conectores:

No próximo menu, clique novamente no ícone + seguido de Adicionar conector personalizado. Quando solicitado, nomeie o conector como “PropelAuth” e insira “https://mcp.propelauth.com/mcp” como a URL.

E você está pronto! Agora você pode começar a construir seus componentes de UI personalizados.

Construindo Páginas de Login

Este guia assume que você já integrou o PropelAuth em seu projeto. Se você ainda não fez isso, confira nosso guia de início rápido aqui.

Com o servidor de Integração PropelAuth, criar suas próprias páginas de login e inscrição personalizadas não poderia ser mais fácil. Primeiro, vamos desativar as páginas de login e inscrição hospedadas navegando até o Painel do PropelAuth, clicando em Aparência, seguido de Construa sua própria UI.

Vamos desativar as páginas de Inscrição e Login e definir o redirecionamento de inscrição para {YOUR_APP_URL}[?signup=true](<http://localhost:5173/?signup=true>). Isso fará com que funções do PropelAuth, como redirectToSignupPage, ainda redirecionem para nossa página de inscrição personalizada.

Agora podemos começar a construir! Usando o servidor MCP de Integração PropelAuth com seu Agente de IA, simplesmente faça um prompt como este para que ele comece a construir suas páginas de login e inscrição:

PropelAuth, construa uma página de inscrição e login que use login e inscrição por email e senha, links mágicos e SSO Empresarial. Use um estilo que combine com o restante do meu projeto.

Se o servidor MCP estiver configurado corretamente, você deverá ver um prompt como este pedindo permissão para consultar o servidor de Integração. Dependendo do seu prompt, você também verá mais alguns para cada método de login que você especificou.

Cada resposta do servidor de Integração retornará documentação e instruções ao seu agente sobre como configurar corretamente as APIs frontend do PropelAuth em seu projeto, como instalar a biblioteca @propelauth/frontend-apis-react e criar um provedor de contexto de login.

Quando Claude terminar, você deverá ter uma página de login e inscrição funcionando!

Este é um ótimo começo, mas ainda não terminamos. Embora isso cuide da primeira parte do login e inscrição