supabase-email-auth

Implements Supabase email/password authentication for Next.js 13+ apps.

Updated Oct 28, 2025

Search Tags:#middleware #supabase #login #auth #password #registration #PKCE

Ready to run

npx skills add https://github.com/JKKN-Institutions/Kenavo --skill supabase-email-auth

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: supabase-email-auth
Source: https://github.com/JKKN-Institutions/Kenavo/tree/main/.claude/skills/supabase-email-auth
Command: npx skills add https://github.com/JKKN-Institutions/Kenavo --skill supabase-email-auth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill delivers a complete Supabase email/password authentication setup for Next.js 13+ apps, reducing setup time and avoiding common auth pitfalls.

Core Features & Use Cases

End-to-End Auth: Client and server utilities, login/registration pages, OAuth callback, middleware protection.
Security & Troubleshooting: PKCE, cookies, admin role verification, and troubleshooting guide.
Templates & Environment: Ready-to-use templates and env setup.

Quick Start

Install dependencies, copy templates, configure env variables, and scaffold login/register pages from the provided templates.

Frequently Asked Questions about supabase-email-auth

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up email and password authentication in a Next.js app?▼

Email and password authentication in Next.js requires a backend service like Supabase to handle signup, login, and password reset securely. This Skill provides ready-to-use client and server utilities, login and registration page templates, and middleware protection for Next.js 13+ apps using the App Router, reducing setup time and common auth pitfalls.

Can I use Supabase authentication with Next.js 13+?▼

Yes. Supabase email authentication works with Next.js 13+ apps using the App Router. This Skill delivers signup, login, password reset, OAuth callback with PKCE flow, and middleware-protected routes, plus admin role-based access control via email whitelists.

What is PKCE and why do I need it for OAuth?▼

PKCE (Proof Key for Code Exchange) is a security extension for OAuth that prevents authorization code interception attacks. This Skill implements PKCE in OAuth callbacks to protect user sessions when authenticating with Supabase.

How do I protect routes and check admin access in Next.js?▼

Middleware protection and admin role verification secure routes and restrict access. This Skill provides middleware templates and admin checks via email whitelists and an app_users schema, plus a service-role admin client for server-side authorization logic.

What environment variables do I need to configure Supabase auth?▼

Supabase authentication requires NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, and SUPABASE_SERVICE_ROLE_KEY. Optionally, add ADMIN_EMAILS to define admin users. This Skill includes environment setup guidance and troubleshooting resources.

Does this auth setup support password reset and OAuth callbacks?▼

Yes. This Skill covers password reset flows, OAuth callback handlers with PKCE, and complete end-to-end authentication including signup, login, and session management for Next.js 13+ apps.