Configurando Auth.js no App Router do Next.js
Instale Auth.js, configure manipuladores de rotas e adicione um provedor OAuth do GitHub.
Configurando Auth.js no App Router do Next.js é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
O que é Auth.js
Auth.js (anteriormente NextAuth.js v5) é uma biblioteca completa de autenticação para o Next.js. Ela lida com provedores OAuth, credenciais, sessões e JWT prontos para uso.
Instalação
Instale a versão beta do Auth.js e inicialize o arquivo de configuração.
npm install next-auth@beta
# Create auth.ts at project root
touch auth.tsCriando a configuração de autenticação
Defina sua configuração de autenticação em auth.ts, na raiz do projeto, com provedores e retornos de chamada.
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [GitHub],
callbacks: {
session({ session, token }) {
session.user.id = token.sub!;
return session;
},
},
});Configurando o manipulador de rota
Crie um manipulador de rota abrangente em app/api/auth/[...nextauth]/route.ts que delegue aos manipuladores do Auth.js.
// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';
export const { GET, POST } = handlers;Variáveis de ambiente
Defina as variáveis de ambiente necessárias para os provedores OAuth. AUTH_SECRET é necessária para assinar JWTs.
# .env.local
AUTH_SECRET=your-random-secret-here
# GitHub OAuth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret
# Generate AUTH_SECRET:
# npx auth secretAdicionando botões de entrada e saída
Importe signIn e signOut de auth.ts e use-os em formulários de Componentes de servidor.
import { signIn, signOut } from '@/auth';
export function SignInButton() {
return (
<form action={async () => { 'use server'; await signIn('github'); }}>
<button type="submit">Sign in with GitHub</button>
</form>
);
}
export function SignOutButton() {
return (
<form action={async () => { 'use server'; await signOut(); }}>
<button type="submit">Sign out</button>
</form>
);
}Lendo a sessão em Componentes de servidor
Chame auth() de auth.ts em qualquer Componente de servidor ou manipulador de rota para obter a sessão atual.
import { auth } from '@/auth';
export default async function ProfilePage() {
const session = await auth();
if (!session) redirect('/login');
return <h1>Welcome, {session.user?.name}</h1>;
}Protegendo páginas com uma camada intermediária
Use a camada intermediária do Auth.js para proteger rotas na borda sem executar a lógica do servidor em cada solicitação.
// middleware.ts
export { auth as middleware } from '@/auth';
export const config = {
matcher: ['/dashboard/:path*', '/profile/:path*'],
};Sessões no banco de dados
Adicione um adaptador de banco de dados (por exemplo, @auth/prisma-adapter) para manter sessões, usuários e contas em um banco de dados, em vez de JWTs.
import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';
export const { handlers, auth, signIn, signOut } = NextAuth({
adapter: PrismaAdapter(prisma),
providers: [GitHub],
session: { strategy: 'database' },
});Personalizando o tipo de sessão
Amplie os tipos de sessão do Auth.js para incluir campos personalizados, como o ID ou a função do usuário.
// types/next-auth.d.ts
import { DefaultSession } from 'next-auth';
declare module 'next-auth' {
interface Session {
user: { id: string; role: string } & DefaultSession['user'];
}
}Tratamento de erros
Por padrão, o Auth.js redireciona para /error quando ocorrem falhas de autenticação. Crie app/error/page.tsx para personalizar a página de erro.
Verificação rápida
Qual arquivo você precisa criar para expor os manipuladores GET e POST do Auth.js no roteador de aplicações do Next.js?
Recapitulação
Instale next-auth@beta, crie auth.ts com provedores e retornos de chamada, exponha os manipuladores em app/api/auth/[...nextauth]/route.ts, defina AUTH_SECRET e as variáveis de ambiente dos provedores e leia a sessão com auth() nos Componentes de servidor.
Perguntas Frequentes
A aula “Configurando Auth.js no App Router do Next.js” é grátis?
Sim — o texto completo de “Configurando Auth.js no App Router do Next.js” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Configurando Auth.js no App Router do Next.js”?
Instale Auth.js, configure manipuladores de rotas e adicione um provedor OAuth do GitHub. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Configurando Auth.js no App Router do Next.js”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configurando Auth.js no App Router do Next.js
- Gerenciamento de sessões e hook useSession
- Provedor de credenciais e login personalizado
- Proteção de rotas baseada em middleware