supabase-nextjs-integration

Set up Supabase authentication by configuring environment variables, creating separate client instances for server and browser contexts, and implementing auth flows (email/password, OAuth, magic link) using Next.js Server Components and Route Handlers. This ensures credentials remain secure and authentication state syncs across the app.

Use Supabase's RLS (Row Level Security) policies to protect database queries, create server-side clients for sensitive operations, and never expose the service_role key to the browser. Store the anon key client-side and service_role key only in server components or Route Handlers to enforce data access control.

Supabase edge functions integrate with Next.js Route Handlers and Server Actions. Choose Edge runtime for low-latency, globally-distributed functions; use Node runtime for database-heavy operations. The Skill handles runtime selection based on your performance and security requirements.

Create modular, separate Supabase client instances: one for Server Components and Route Handlers using the service_role key, another for client components using the anon key. This modular pattern enforces environment variable conventions and prevents accidental key exposure.

RLS enforces data access policies at the database layer, ensuring users can only access their own records even if they bypass your application logic. Combined with secure client setup in Next.js, RLS is critical for protecting sensitive user data from unauthorized access.

If your project mixes anon and service_role keys, lacks RLS policies, or doesn't separate client-side and server-side Supabase instances, refactoring improves security and scalability. The Skill guides optimization for environment configuration, runtime selection, and idiomatic Next.js patterns.