Habilidades nextjs-supabase-auth
🔐

nextjs-supabase-auth

Seguro

Adicionar Supabase Auth ao Next.js App Router

Esta habilidade fornece orientação especializada para integrar autenticação Supabase com Next.js App Router. Ajuda desenvolvedores a implementar fluxos de login seguros, proteger rotas com middleware e gerenciar sessões corretamente em componentes de servidor e cliente.

Suporta: Claude Codex Code(CC)
🥉 74 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "nextjs-supabase-auth". How do I set up Supabase Auth in Next.js App Router?

Resultado esperado:

Use @supabase/ssr package. Install it with npm install @supabase/ssr. Create a utils/supabase/server.ts file for server-side client and utils/supabase/client.ts for client-side client. Configure environment variables NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.

A utilizar "nextjs-supabase-auth". Create auth middleware for protected routes

Resultado esperado:

Import createServerClient from @supabase/ssr. In middleware, use supabase.auth.getUser() to verify tokens. Return redirect to /login if no valid session. Refresh tokens before expiration.

Auditoria de Segurança

Seguro
v1 • 2/18/2026

Static analysis flagged backticks in Markdown and references to 'auth' as security concerns. Both are false positives. The skill is a documentation file containing only Markdown text describing Supabase Auth integration patterns. No executable code, no network calls, no file system access, and no actual security vulnerabilities present.

1
Arquivos analisados
57
Linhas analisadas
0
achados
1
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
85
Conteúdo
50
Comunidade
100
Segurança
91
Conformidade com especificações

O Que Você Pode Construir

Criando um novo aplicativo Next.js com autenticação de usuário

Adicionar login seguro e gerenciamento de sessão a um novo projeto Next.js App Router usando Supabase como provedor de autenticação.

Protegendo rotas com middleware

Implementar proteção de rotas que verifica o status de autenticação e atualiza sessões antes de conceder acesso.

Migrando de Pages Router para App Router

Entender as diferenças nos padrões de autenticação entre Pages Router e App Router ao usar Supabase.

Tente Estes Prompts

Configuração básica do Supabase 
How do I set up Supabase Auth in a Next.js App Router project?
Proteção com middleware 
Create middleware to protect routes and refresh sessions with Supabase
Manipulação de callback OAuth 
How do I handle OAuth callback and exchange the code for a session in Next.js?
Autenticação com Server Action 
Use Supabase with Server Actions for login, logout, and registration

Melhores Práticas

  • Usar o pacote @supabase/ssr em vez de @supabase/auth-helpers-nextjs para App Router
  • Manipular tokens no middleware para rotas protegidas, não em componentes cliente
  • Usar Server Actions para operações de autenticação para manter lógica sensível no servidor
  • Nunca expor tokens de autenticação ao cliente desnecessariamente - confiar em cookies HttpOnly

Evitar

  • Não usar getSession em Server Components - usar getUser em vez disso
  • Não gerenciar estado de autenticação em Client Components sem um listener de sessão
  • Não armazenar tokens manualmente em localStorage - usar sessões baseadas em cookies do Supabase

Perguntas Frequentes

Qual pacote devo usar para Supabase Auth no Next.js App Router?
Use @supabase/ssr. É o pacote oficial projetado para App Router e manipula sessões baseadas em cookies corretamente.
Como protejo rotas no Next.js App Router?
Use middleware. Importe createServerClient e verifique sessões válidas usando getUser(). Redirecione para página de login se não houver sessão.
Posso usar Supabase Auth com Server Components?
Sim. Use o cliente de servidor do @supabase/ssr. Chame getUser() ou getSession() em Server Components para verificar status de autenticação.
Como funcionam as sessões com Supabase no Next.js?
Supabase usa sessões baseadas em cookies. O middleware manipula rotação de cookies, atualizando tokens antes de expirarem automaticamente.
Qual é a diferença entre getSession e getUser?
getSession retorna a sessão incluindo tokens brutos (evitar em navegadores). getUser valida o token com Supabase e retorna dados do usuário (recomendado).
Como manipulo callbacks OAuth?
Crie um route handler em /auth/callback. Troque o código dos parâmetros URL por uma sessão usando supabase.auth.exchangeCodeForSession(). Depois redirecione para área protegida.

Detalhes do Desenvolvedor

Autor

sickn33

Licença

MIT

Repositório

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-supabase-auth/

Referência

main

Estrutura de arquivos

📄 SKILL.md