Skills nextjs-supabase-auth
📦

nextjs-supabase-auth

Safe

Implement Supabase Auth in Next.js App Router

Building authentication in Next.js requires understanding server and client boundaries. This skill provides proven patterns for secure Supabase Auth integration with App Router architecture.

Supports: Claude Codex Code(CC)
📊 71 Adequate
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

Using "nextjs-supabase-auth". Set up Supabase auth middleware for Next.js App Router

Expected outcome:

  • Create middleware.ts in project root
  • Import createServerClient from @supabase/ssr
  • Configure client with SUPABASE_URL and SUPABASE_ANON_KEY from env
  • Add matcher for routes that need auth protection
  • Handle token refresh when sessions expire
  • Redirect to login page when auth check fails on protected routes

Using "nextjs-supabase-auth". How do I handle auth in Server Components?

Expected outcome:

  • Use createServerClient to instantiate Supabase client
  • Call getUser() to validate current session
  • Pass user data as props to child components
  • Avoid calling getSession() directly in Server Components
  • Let middleware handle session validation for protected routes

Security Audit

Safe
v2 • 2/24/2026

Static analysis flagged markdown backticks as shell commands (false positive). Line 57 uses backticks for inline code formatting in documentation, not command execution. No actual external commands, cryptographic operations, or dangerous patterns exist. Skill provides documentation and patterns only - no executable code with security risks.

1
Files scanned
61
Lines analyzed
0
findings
2
Total audits
No security issues found
Audited by: claude View Audit History →

Quality Score

38
Architecture
100
Maintainability
87
Content
33
Community
100
Security
91
Spec Compliance

What You Can Build

Full-Stack Developer Building SaaS Application

Implement secure user authentication with email and OAuth providers for a Next.js SaaS product using Supabase as the backend.

Team Migrating from Pages Router to App Router

Refactor existing Supabase auth implementation to work with Next.js App Router server components and middleware architecture.

Developer Adding Auth to Existing App

Integrate authentication into an existing Next.js application with Supabase backend, following security best practices from the start.

Try These Prompts

Basic Supabase Client Setup 
Help me set up Supabase client configuration for a Next.js App Router project. I need separate clients for server components, client components, and middleware using @supabase/ssr.
Protected Route Implementation 
Create middleware that protects routes under /dashboard and redirects unauthenticated users to /login. Include session refresh logic for expired tokens.
OAuth Callback Handler 
Build an OAuth callback route handler that exchanges the authorization code for a Supabase session and redirects users to the appropriate page after successful authentication.
Complete Auth Flow with Server Actions 
Implement a complete authentication flow using Server Actions for login, signup, and logout. Include proper error handling, form validation, and secure token management without exposing credentials to the client.

Best Practices

  • Use @supabase/ssr package specifically designed for Next.js App Router server/client boundaries
  • Handle authentication in middleware to protect routes before rendering and manage session refresh transparently
  • Store tokens in cookies automatically managed by @supabase/ssr rather than manually handling token storage

Avoid

  • Calling getSession() directly in Server Components instead of using middleware for route protection
  • Managing auth state in client components without implementing proper auth state change listeners
  • Manually storing or handling JWT tokens when @supabase/ssr provides automatic cookie-based session management

Frequently Asked Questions

What is the difference between @supabase/ssr and @supabase/supabase-js?
@supabase/ssr is specifically designed for Next.js App Router with built-in cookie handling and server/client boundary support. @supabase/supabase-js is the core client library but requires manual cookie and session management for SSR scenarios.
How do I protect API routes with Supabase Auth?
Create a middleware.ts file at your project root that checks authentication for specified route patterns. Use the createServerClient to validate sessions and redirect or return 401 for unauthenticated requests.
Can I use this skill with the Pages Router instead of App Router?
This skill focuses on App Router patterns. For Pages Router, you would use different patterns with getServerSideProps and different cookie handling approaches.
How do I handle OAuth providers like Google or GitHub?
Configure OAuth providers in your Supabase dashboard, then create callback route handlers that exchange the authorization code for a session using Supabase's OAuth flow. The skill covers this pattern in detail.
Where should I store Supabase credentials?
Store SUPABASE_URL and SUPABASE_ANON_KEY in your environment variables. Never commit these to version control. Use .env.local for local development and your hosting platform's secret management for production.
How do I handle logout properly?
Use Supabase's signOut() method to invalidate the session server-side, then clear any local state and redirect to the login or home page. Server Actions provide a clean pattern for this operation.

Developer Details

Author

sickn33

License

MIT

Repository

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

Ref

main

File structure

📄 SKILL.md