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

Bem-vindo de volta à nossa série sobre WebAuthn. Nos nossos artigos anteriores, cobrimos os fundamentos do WebAuthn, e um guia 101. Se estás a juntar-te a nós agora, não hesites em verificar estes conteúdos fundamentais para te atualizares.

Hoje, vamos arregaçar as mangas para colocar a teoria em prática. Vamos aproveitar o poder do Next.js com o novo recurso “Server Actions”. O nosso objectivo? Implementar WebAuthn numa aplicação Next.js e nos prepararmos para WebAuthn.

Antes de mergulharmos no mundo do código, aqui está uma visão do que te aguarda no final da jornada - um site de demonstração totalmente funcional. Explora-o para ver o WebAuthn em ação e obter uma ideia do que irás construir. Neste site de demonstração, podes registar novos utilizadores e fazer login com as chaves de acesso recém-registadas.

E para aqueles que preferem ter um mapa em mãos, temos tudo pronto para ti! Todo o código que discutiremos está disponível num repositório público GitHub. Este repositório é o teu guia de acompanhamento, oferecendo o código fonte completo de nossa implementação.

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

Pré-requisitos#

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

1. Um Projeto Next.js: Se ainda não configuraste um projeto Next.js, aqui está um guia rápido para te iniciares.
2. Biblioteca Simple WebAuthn: Vários pacotes para ajudar a reduzir a quantidade de trabalho necessário para incorporar WebAuthn num site. Usa o teu gestor 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 gerir os desafios do WebAuthn. Usaremos KV da vercel para alcançar isso.
4. Uma Base de Dados de Utilizadores: Um local para armazenar as chaves de acesso registadas dos nossos utilizadores. 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 armazenamento de sessão com KV da Vercel#

Configurando armazenamento KV#

É fácil inicializar um armazenamento KV tanto em produção quanto em desenvolvimento local. Siga este guia para conectar uma loja KV ao teu projeto e obter os valores do ambiente: https://vercel.com/docs/storage/vercel-kv/quickstart

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

Exportámos 2 funções:

• getCurrentSession: Usar o auxiliar de cookies do Next.js para criar uma sessão para o pedido atual e retornar o valor.
• updateCurrentSession: Guardar dados na sessão atual.

Implementando base de dados de utilizadores com KV da Vercel#

De forma semelhante à nossa implementação de sessão, vamos implementar uma base de dados de utilizadores simples.

Criámos funções para encontrar o utilizador por email e atualizar os dados do utilizador por email. Lembra-te, isto é apenas para demonstração, num produto real, os dados do utilizador são guardados normalmente numa base de dados.

Preparando funções WebAuthn#

Antes de prosseguirmos, vejamos o diagrama do fluxo de registo e autenticação:

Como podes ver, precisamos preparar 2 funções:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

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

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

Aqui está o código:

Construir a página web#

Concluímos a preparação, vamos construir a página:

Conclusão#

Parabéns por navegares através das complexidades de implementar WebAuthn numa aplicação Next.js. Ao terminarmos, é importante abordar algumas considerações cruciais para o seu uso num ambiente de produção.

Considerações Chave para Desdobramento em Produção#

1. Ajuste do Identificador do Utilizador: Neste tutorial, usamos um endereço de email como identificador do utilizador. No entanto, num cenário de produção, poderás precisar usar um identificador diferente, como um userId ou username.
2. Integração com Base de Dados: Embora tenhamos utilizado o KV da Vercel como uma demonstração simples de gestão de sessões e dados de utilizadores, uma aplicação do mundo real deve integrar um sistema de base de dados mais robusto (como PostgreSQL, MongoDB, etc.).
3. Personalizando Opções WebAuthn: As opções de WebAuthn que explorámos são um ponto de partida. Dependendo dos requisitos da tua aplicação e políticas de segurança, poderás precisar ajustar essas configurações. Consulta a documentação do WebAuthn e a documentação da biblioteca Simple WebAuthn para orientação sobre como personalizar essas opções para atender às tuas necessidades específicas.

Obrigado por te juntares a nós nesta aventura educacional. Mesmo neste exemplo mínimo, integrar o WebAuthn não é uma tarefa simples, existe outra opção, tenta o WebAuthn no MFA da Logto: