Adicionar autenticação pode parecer complicado, mas com
NextAuth.js e o App Router do Next.js, é possível integrar login seguro e flexível em poucos passos. Neste guia, vamos mostrar como configurar autenticação com GitHub em um projeto moderno usando o novo roteamento baseado em pastas (app/).O que é o NextAuth.js?
O NextAuth.js é uma biblioteca de autenticação criada para projetos Next.js. Ela fornece suporte nativo a autenticação por redes sociais (como GitHub, Google), por e-mail com magic link e com credenciais personalizadas. É altamente configurável, escalável e se integra ao backend do Next.js por meio de rotas API.
Com a chegada do App Router no Next.js 13+, a integração mudou ligeiramente e ficou ainda mais clara para projetos modernos.
1. Instalação
Se ainda não tem um projeto Next.js com App Router, crie com:
npx create-next-app@latest nextauth-app --app
cd nextauth-app |
Depois, instale o NextAuth.js:
2. Configurando as variáveis de ambiente
Crie um arquivo .env.local com os dados do OAuth do GitHub:
GITHUB_CLIENT_ID=seu_client_id
GITHUB_CLIENT_SECRET=seu_client_secret
NEXTAUTH_SECRET=uma_chave_secreta_segura
NEXTAUTH_URL=http://localhost:3000 |
Você pode gerar o NEXTAUTH_SECRET com o comando:
3. Criando a configuração do NextAuth
Crie um arquivo em auth.config.ts na raiz do projeto:
// auth.config.ts
import GitHubProvider from "next-auth/providers/github";
import type { NextAuthConfig } from "next-auth";
export const authConfig: NextAuthConfig = {
providers: [
GitHubProvider({
clientId: process.env.GITHUB_CLIENT_ID!,
clientSecret: process.env.GITHUB_CLIENT_SECRET!,
}),
],
pages: {
signIn: "/login", // opcional
},
}; |
4. Criando o handler da rota de autenticação
No App Router, as rotas são criadas dentro da pasta app/api/auth/[...nextauth]/route.ts. Crie esse arquivo com o seguinte conteúdo:
// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import { authConfig } from "@/auth.config";
const handler = NextAuth(authConfig);
export { handler as GET, handler as POST }; |
5. Provider de sessão
Envolva seu layout com o SessionProvider para que os dados da sessão estejam disponíveis globalmente. Crie um providers.tsx:
// app/providers.tsx
"use client";
import { SessionProvider } from "next-auth/react";
import { ReactNode } from "react";
export function Providers({ children }: { children: ReactNode }) {
return <SessionProvider>{children}</SessionProvider>;
} |
E importe no layout principal:
// app/layout.tsx
import { Providers } from "./providers";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
} |
6. Exibindo o estado de autenticação no frontend
Você pode usar useSession, signIn e signOut em qualquer componente client:
// app/page.tsx
"use client";
import { useSession, signIn, signOut } from "next-auth/react";
export default function Home() {
const { data: session } = useSession();
return (
<main>
<h1>Autenticação com NextAuth.js</h1>
{session ? (
<div>
<p>Bem-vindo, {session.user?.name}</p>
<button onClick={() => signOut()}>Sair</button>
</div>
) : (
<button onClick={() => signIn("github")}>Entrar com GitHub</button>
)}
</main>
);
}
|
Conclusão
Com o App Router e NextAuth.js, configurar autenticação moderna no Next.js ficou ainda mais simples. A nova estrutura facilita a organização e o uso de middlewares, layouts e sessão compartilhada entre componentes client e server.
Se você quiser evoluir a aplicação para suportar banco de dados com Prisma, login com e-mail ou credenciais personalizadas, posso mostrar como fazer isso em um post futuro.
Referência oficial
Comentários
Postar um comentário