Implementando WebAuthn no Next.js: Um Guia Prático

Bem-vindo de volta à nossa série sobre WebAuthn. Em nossos artigos anteriores, cobrimos os fundamentos do WebAuthn, e um guia 101. Se você está nos acompanhando agora, sinta-se à vontade para conferir estas peças fundamentais para se atualizar.

Hoje, vamos arregaçar as mangas para colocar a teoria em prática. Vamos explorar o poder do Next.js com o novo recurso "Ações de Servidor". Nosso objetivo? Implementar WebAuthn em uma aplicação Next.js e nos preparar para o WebAuthn.

Antes de mergulharmos no mar de código, aqui está uma visão do que espera por você no final da jornada - um site de demonstração totalmente funcional. Explore-o para ver o WebAuthn em ação e para ter um gostinho do que você estará construindo. Neste site de demonstração, você pode registrar novos usuários e fazer login com as chaves de acesso recém-registradas.

E para aqueles que preferem um mapa em mãos, não se preocupe! Todo o código que discutiremos está disponível em um repositório público no GitHub. Este repositório é seu guia companheiro, oferecendo o código-fonte completo da nossa implementação.

Pronto para embarcar nesta aventura emocionante? Vamos começar!

Pré-requisitos#

Antes de começarmos, vamos garantir que temos tudo que precisamos:

1. Um Projeto Next.js: Se você ainda não configurou um projeto Next.js, aqui está um guia rápido para começar.
2. Biblioteca Simple WebAuthn: Vários pacotes para ajudar a reduzir o trabalho necessário para incorporar WebAuthn em um site. Use seu gerenciador de pacotes favorito para instalar @simplewebauthn/browser, @simplewebauthn/server e @simplewebauthn/typescript-types
3. Armazenamento de Sessão: Usaremos o armazenamento de sessão para gerenciar desafios WebAuthn. Usaremos o KV da vercel para conseguir isso.
4. Um Banco de Dados de Usuário: Um local para armazenar as chaves de acesso registradas dos nossos usuários. Para simplificar, também usaremos o KV da vercel para demonstrar.

Agora, com nossas ferramentas e materiais em mãos, estamos prontos para começar a construir.

Implementando o armazenamento de sessão com o KV da Vercel#

Configurando o armazenamento KV#

É fácil inicializar um armazenamento KV tanto em produção quanto no desenvolvimento local, siga este guia para conectar um armazenamento KV ao seu projeto e puxar os valores de ambiente: https://vercel.com/docs/storage/vercel-kv/quickstart

Implementar funções de gerenciamento de sessão#

Exportamos 2 funções:

• getCurrentSession: Usa o helper de cookies do Next.js para criar uma sessão para a solicitação atual e retorna o valor.
• updateCurrentSession: Salva dados na sessão atual.

Implementando banco de dados de usuário com o KV da Vercel#

De forma semelhante à nossa implementação de sessão, vamos implementar um banco de dados de usuários simples.

Criamos funções para encontrar usuário por email e atualizar dados do usuário por email. Lembre-se, isso é apenas para demonstração, no produto real, os dados do usuário geralmente são mantidos em um banco de dados.

Preparando funções WebAuthn#

Antes de prosseguirmos, vamos ver o diagrama de fluxo de registro e autenticação:

Como você pode ver, precisamos preparar 2 funções:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

Semelhante ao registro, o login requer 2 funções:

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

Aqui está o código:

Construir a página da web#

Completamos a preparação, vamos construir a página:

Conclusão#

Parabéns por navegar pelas complexidades de implementar WebAuthn em uma aplicação Next.js. Ao concluir, é importante abordar algumas considerações cruciais para sua implantação em um ambiente de produção.

Considerações Importantes para Implantação em Produção#

1. Ajuste do Identificador de Usuário: Neste tutorial, usamos um endereço de email como identificador de usuário. No entanto, em um cenário de produção, você pode precisar usar um identificador diferente, como um userId ou username.
2. Integração com Banco de Dados: Enquanto utilizamos o KV da Vercel como uma demonstração simples de gerenciamento de dados de sessão e usuário, uma aplicação do mundo real deve integrar um sistema de banco de dados mais robusto (como PostgreSQL, MongoDB, etc.)
3. Personalização das Opções WebAuthn: As opções de WebAuthn que exploramos são um ponto de partida. Dependendo dos requisitos e políticas de segurança da sua aplicação, você pode precisar ajustar essas configurações. Consulte a documentação do WebAuthn e a documentação da biblioteca Simple WebAuthn para orientação sobre a personalização dessas opções para atender suas necessidades específicas.

Obrigado por se juntar a nós nesta aventura educacional. Mesmo neste exemplo mínimo, integrar WebAuthn não é uma tarefa simples, há outra opção, experimente WebAuthn no MFA da Logto: