Segurança do Next.js 14+ com Middlewares

Salve o/

Preparado(a) para levar a segurança da sua aplicação Next.js 14+ para outro nível?

Hoje vamos mergulhar no mundo mágico das Middlewares e descobrir como elas podem transformar a forma como você protege suas rotas e dados.

Se você já se perguntou como manter seu dashboard de usuários protegido enquanto exibe suas páginas de marketing de forma pública, este artigo é para você!

Vamos explorar como configurar Middlewares para autenticação, proteger rotas específicas, redirecionar usuários não autorizados e muito mais.

Imagina só: você consegue controlar quem pode acessar cada pedacinho do seu site, garantindo que só usuários(as) autenticados(as) possam ver o que importa, enquanto curiosos ficam do lado de fora.

E tudo isso de uma maneira centralizada, usando o poder das Middlewares do Next.js.

Então, pega sua caneca de café, acomode-se confortavelmente, e vamos nessa jornada juntos(as) para dominar as Middlewares no Next.js 14+!

O que é Middleware afinal?

Antes de mergulharmos no código, vamos entender o que é uma Middleware. Pense na Middleware como uma sentinela no portão do seu castelo digital.

Ela verifica quem está entrando e saindo, garantindo que apenas os(as) convidados(as) certos(as) possam acessar áreas especiais, enquanto os(as) curiosos(as) ficam nos jardins públicos.

Em termos mais técnicos, Middleware é um pedaço de código que é executado antes que uma requisição seja completada, permitindo que você modifique a resposta ao reescrever, redirecionar, modificar headers ou até mesmo responder diretamente.

No Next.js, Middleware é essencial para proteger rotas específicas, realizar redirecionamentos baseados em condições, detectar bots e muito mais.

E o melhor de tudo, ela roda antes que o conteúdo cacheado e as rotas sejam correspondidos, garantindo uma camada adicional de segurança e controle.

Como criar uma middleware

Vamos colocar a mão na massa e criar uma Middleware básica para autenticação em uma aplicação Next.js. Siga os passos abaixo para configurar a Middleware e proteger suas rotas.

Crie um arquivo chamado middleware.ts ou middleware.js na raiz do seu projeto. Este será o coração da sua Middleware, onde toda a mágica acontecerá.

Dentro do arquivo middleware.ts, vamos incluir a lógica para verificar a autenticação do usuário.

Vamos checar se o usuário tem um token de autenticação válido e redirecioná-lo conforme necessário.

import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'
export function middleware(request: NextRequest) {
  const currentUser = request.cookies.get('currentUser')?.value
  // Se o usuário estiver autenticado e tentar acessar a página de login, redirecioná-lo para o dashboard
  if (currentUser && request.nextUrl.pathname === '/login') {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  // Se o usuário não estiver autenticado e tentar acessar qualquer página protegida, redirecioná-lo para a página de login
  if (!currentUser && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  // Permitir que a requisição continue para outras rotas não protegidas
  return NextResponse.next()
}
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}

Primeiro, importamos NextRequest e NextResponse do Next.js. Esses são fundamentais para manipular requisições e respostas.

Em seguida, verificamos se há um cookie chamado currentUser, que indica se o usuário está autenticado.

Quando o usuário está autenticado e tenta acessar a página de login (/login), redirecionamos ele para o dashboard (/dashboard).

Se ele já está logado, não faz sentido deixá-lo voltar para a página de login. Por outro lado, se o usuário não estiver autenticado e tentar acessar qualquer página dentro do dashboard (/dashboard), mandamos ele de volta para a página de login (/login). Isso garante que apenas pessoas autorizadas entrem em áreas restritas.

Se nenhuma dessas condições for atendida, permitimos que a requisição continue normalmente para outras rotas não protegidas.

Finalmente, configuramos as rotas usando o matcher para especificar quais devem ser protegidas pela Middleware.

Excluímos rotas de API, arquivos estáticos e imagens, garantindo que nossa Middleware não interfira com esses recursos.

NextResponse e Matcher

Agora que entendemos a lógica básica da nossa Middleware, vamos falar sobre alguns componentes-chave que utilizamos: NextResponse e matcher.

• NextResponse: É uma classe do Next.js que nos permite manipular a resposta da requisição. Usamos NextResponse.redirect para redirecionar o usuário para uma nova URL com base em certas condições. Além de redirecionamentos, NextResponse pode ser usado para definir headers, cookies e até responder diretamente a uma requisição.
• Matcher: O matcher é uma configuração que define quais rotas a Middleware deve proteger. No nosso exemplo, usamos um padrão que inclui todas as rotas, exceto as rotas de API, arquivos estáticos e imagens. Isso é feito para garantir que a Middleware seja aplicada apenas às páginas que realmente precisam de proteção.

Bibliotecas de autenticação

Implementar autenticação pode ser uma tarefa complexa, mas felizmente existem várias bibliotecas que podem simplificar esse processo no Next.js.

Vamos dar uma olhada em algumas das opções mais populares e como elas podem ajudar.

NextAuth.js: É uma solução de autenticação completa para Next.js que suporta várias estratégias de autenticação, incluindo OAuth, autenticação baseada em e-mail/senha, e autenticação com provedores como Google, Facebook, e GitHub. NextAuth.js facilita a integração com diversos provedores e gerencia tokens, sessões e callbacks de autenticação para você.

Auth0: Auth0 é uma plataforma de identidade que fornece autenticação e autorização como serviço. Ele suporta OAuth 2.0, OpenID Connect, e muitos outros padrões de autenticação. Com Auth0, você pode configurar autenticação social (como Google e Facebook), autenticação multifator (MFA), e Single Sign-On (SSO) com facilidade. Auth0 também oferece uma integração Next.js bem documentada.

Firebase Authentication: Parte do Firebase, essa solução permite que você adicione autenticação a seu aplicativo usando apenas algumas linhas de código. Firebase Authentication suporta várias formas de autenticação, incluindo e-mail/senha, telefone e provedores como Google e Facebook. É uma excelente opção para quem já está utilizando outras funcionalidades do Firebase em sua aplicação.

OAuth (Open Authorization): É um padrão aberto para autorização que permite que aplicativos obtenham acesso limitado a recursos de usuário sem expor as credenciais do usuário. Em vez disso, OAuth utiliza tokens de acesso para conceder permissões específicas a aplicativos.

Existem dois principais tipos de fluxo de OAuth:

• Authorization Code Flow: Utilizado principalmente para aplicativos web, onde o servidor do aplicativo redireciona o usuário para o provedor de autenticação (como Google ou Facebook). Após o usuário autenticar e autorizar o aplicativo, o provedor redireciona de volta para o servidor do aplicativo com um código de autorização, que pode ser trocado por um token de acesso.

• Implicit Flow: Utilizado para aplicativos de cliente único (Single Page Applications), onde o token de acesso é obtido diretamente do provedor de autenticação sem a necessidade de um código de autorização intermediário. Este fluxo é mais simples, mas menos seguro que o Authorization Code Flow.

Conclusão

E aí, pronto(a) para transformar a segurança da sua aplicação Next.js 14+? Vimos como as Middlewares são ferramentas poderosas e versáteis que podem ser usadas para proteger rotas, redirecionar usuários, detectar bots, e muito mais.

Desde a configuração básica de Middlewares até o uso de bibliotecas avançadas como NextAuth.js, Auth0 e Firebase Authentication, você agora tem o conhecimento para implementar autenticação e melhorar significativamente a segurança da sua aplicação.

Entendemos também o papel crucial do OAuth na autorização, permitindo que aplicativos obtenham acesso seguro a recursos de usuário sem expor suas credenciais.

E com exemplos práticos, como a implementação de autenticação com GitHub usando NextAuth.js, você tem um ponto de partida sólido para aplicar essas técnicas no seu projeto.

Mas isso é apenas o começo! Se você quer se aprofundar ainda mais e dominar a arte de implementar autenticação em Next.js, recomendo o curso "Next.js: Implementando Autenticação com NextAuth.js".

Este curso oferece uma abordagem prática e detalhada, cobrindo tudo o que você precisa saber para criar uma aplicação segura e eficiente. Não perca a oportunidade de elevar suas habilidades a um novo patamar.

Então, pegue sua caneca de café, revise esses conceitos e mãos à obra. A segurança da sua aplicação está em boas mãos – as suas!

Referências:

• Next: Middleware
• Next: Authentication
• Auth0
• NextAuth.js
• Documentação do Firebase