Supabase React Best Practices

What problem does it solve?

Building production-ready React applications with Supabase, TypeScript, and TanStack Query can be complex, requiring careful attention to authentication, data fetching, real-time updates, and security. This Skill provides a comprehensive, opinionated guide to streamline development and avoid common pitfalls.

Core Features & Use Cases

• Auth & Data Patterns: Implement secure authentication flows and efficient data fetching with TanStack Query.
• Real-time & Performance: Integrate real-time subscriptions and optimize database queries for speed.
• Security & Types: Apply Row-Level Security (RLS) and leverage TypeScript for robust, type-safe applications.
• Use Case: Quickly set up a new Supabase + React project with best practices for user authentication, real-time event updates, and secure data access, ensuring a scalable and maintainable codebase.

Quick Start

Generate TypeScript types from your Supabase schema

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/integrations/supabase/types.ts

Then, use the provided AuthProvider in your React app

import { AuthProvider } from '@/integrations/supabase/auth'; function App() { return ( <AuthProvider> <RouterProvider router={router} /> </AuthProvider> ); }