Communitygithub.com

sakilanwar12/nextjs-typescript-skills

Use ao adicionar autenticação ao Next.js — Auth.js/NextAuth credenciais ou OAuth, proteção de rotas via middleware, acesso à sessão em RSC e Server Actions, verificações de papel/função.

O que é nextjs-typescript-skills?

Esta skill especializada em Next.js e TypeScript fornece um padrão robusto e seguro para implementar autenticação usando Auth.js v5 (anteriormente NextAuth.js). Ela centraliza a configuração de provedores OAuth ou credenciais em um único arquivo `auth.ts`, define regras claras para proteger rotas no `middleware.ts` (com wrapper compatível com edge) e reforça a verificação de sessão tanto em Server Components (com `await auth()`) quanto em Server Actions e mutações, tratando o middleware como uma camada de experiência do usuário, e não de autorização final. A skill também aborda o gerenciamento de papéis/funções de usuário por meio de augmentação de tipos no módulo `next-auth` e a validação de variáveis de ambiente secretas (como `AUTH_SECRET` e chaves de provedores) com Zod na inicialização, garantindo que nenhum segredo seja exposto no cliente. Ela é útil para desenvolvedores que desejam uma base confiável e reutilizável para autenticação em projetos Next.js, evitando armadilhas comuns como exposição de segredos ou falta de verificação de autorização no lado do servidor. A skill é compatível com plataformas como Claude Code, Cursor e Codex, e fornece snippets de código e uma checklist para garantir a implementação completa e segura.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/sakilanwar12/nextjs-typescript-skills/tree/HEAD/skills/nextjs-auth

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Autenticação Next.js (Auth.js v5)

Regras

  1. Centralize a configuração em auth.ts (exportação NextAuth(): handlers, auth, signIn, signOut). Nunca espalhe segredos de provedores.
  2. Proteja as rotas em middleware.ts (wrapper auth seguro para edge) e verifique novamente a sessão dentro de Server Actions/mutações — o middleware é UX, não autorização.
  3. Leia a sessão em Server Components via await auth(). Em Client Components use useSession() de next-auth/react com <SessionProvider>.
  4. Nunca exponha segredos (AUTH_SECRET, chaves de provedores) com o prefixo NEXT_PUBLIC_. Valide as variáveis de ambiente com Zod na inicialização.
  5. Verificações de papel/função: estenda o tipo da sessão via augmentação de módulo (user.role), aplique a verificação no servidor.

Padrões

// auth.ts
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
  callbacks: {
    async session({ session, token }) {
      if (session.user) (session.user as { role?: string }).role = token.role as string;
      return session;
    },
    async jwt({ token, user }) {
      if (user) token.role = (user as { role?: string }).role ?? 'user';
      return token;
    },
  },
});

// middleware.ts
export { auth as middleware } from '@/auth';
export const config = { matcher: ['/dashboard/:path*', '/admin/:path*'] };

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';
export const { GET, POST } = handlers;
// Portão do Server Component
import { auth } from '@/auth';
import { redirect } from 'next/navigation';

export default async function AdminPage() {
  const session = await auth();
  if (!session?.user) redirect('/login');
  if ((session.user as { role?: string }).role !== 'admin')
    redirect('/dashboard');
  return <AdminView />;
}
// types/next-auth.d.ts — augmentação de papel/função
import 'next-auth';
declare module 'next-auth' {
  interface User { role?: string }
}

Lista de Verificação

  • O matcher em middleware.ts cobre os caminhos protegidos?
  • A sessão é verificada novamente em actions/mutations?
  • Nenhum segredo exposto no cliente?
  • O papel/função é verificado no servidor, não apenas na interface oculta?
  • O logout e a expiração da sessão são tratados?

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Habilidades Relacionadas