React + Supabase Security Blueprint

To secure a React + Supabase SPA, you need to: (1) enable Row Level Security (RLS) on ALL tables since SPAs have no server layer, (2) write and test RLS policies thoroughly before launch, (3) implement auth state management with proper session handling, (4) use only the anon key in client code (never service_role), and (5) understand that client-side route protection is UX only-RLS is your actual security. This blueprint covers pure SPA security patterns.

TL;DR

React SPAs with Supabase rely entirely on RLS for data security since there's no server-side code. Key tasks: enable RLS on all tables with proper policies, use auth context for session management, remember that route protection is UX-only (RLS is your actual security), and never expose the service_role key.

RLS is Your Security Supabase

RLS policies for React SPA

-- Users can only access their own data
CREATE POLICY "User data isolation"
  ON user_data FOR ALL
  USING (auth.uid() = user_id);

-- Public read, authenticated write
CREATE POLICY "Public posts"
  ON posts FOR SELECT
  USING (true);

CREATE POLICY "Authenticated create"
  ON posts FOR INSERT
  WITH CHECK (auth.uid() = author_id);

Critical: In a React SPA, there's no server to protect you. RLS is your only security layer. If RLS is misconfigured, data is exposed.

Auth Context React

useAuth hook

import { useEffect, useState } from 'react';
import { supabase } from './supabase';

export function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => {
      setUser(data.session?.user ?? null);
      setLoading(false);
    });

    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => setUser(session?.user ?? null)
    );

    return () => subscription.unsubscribe();
  }, []);

  return { user, loading };
}