auth-pages

What problem does it solve?

This Skill provides a robust, server-side first approach to building authentication pages in Next.js, eliminating common UI flicker issues and ensuring a smooth user experience. It streamlines the implementation of secure login, registration, and protected routes, saving you from complex client-side session management.

Core Features & Use Cases

• Server-Side Session Handling: Implements flicker-free session checks for protected pages, improving perceived performance.
• Cross-Tab Synchronization: Ensures authentication state is consistent across multiple browser tabs using broadcast-channel.
• Auth Client for Actions: Guides on using client-safe functions (signIn, signOut) only for user interactions, not session checks.
• Use Case: When creating a new protected page like /settings, use this skill to implement server-side session checks and ensure a flicker-free user experience by avoiding client-side useSession() and redirecting unauthenticated users instantly.

Quick Start

Describe the recommended pattern for creating a new protected page in Next.js using server-side session checks to prevent UI flicker and ensure immediate redirection for unauthenticated users.