---

title: "Bootstrap React app with Supabase Auth" description: "Guidelines for writing React apps with Supabase Auth" tags: ["React", "Supabase", "Authentication", "Setup", "Frontend"] category: "Coding" author: "Csaba Farkas" slug: "bootstrap-react-app-with-supabase-auth" id: "coding-143" seo_keywords: "React Supabase integration, Supabase setup, React authentication, AuthProvider, Protected routes" date: "2025-07-13" difficulty: "Advanced" schema_type: "TechArticle"

Bootstrap React app with Supabase Auth

Guidelines for writing React apps with Supabase Auth

Overview of implementing Supabase Auth

1. Install required dependencies
2. Set up environment variables
3. Create Supabase client
4. Implement authentication components
5. Set up protected routes

🚨 CRITICAL INSTRUCTIONS FOR AI LANGUAGE MODELS 🚨

As an AI language model, you MUST follow these guidelines when implementing Supabase Auth in React:

1. Always use the latest version of @supabase/supabase-js
2. Implement proper error handling for authentication operations
3. Use environment variables for Supabase credentials
4. Implement proper session management
5. Handle authentication state changes correctly

CORRECT CLIENT IMPLEMENTATION

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true
  }
})

CORRECT AUTH PROVIDER IMPLEMENTATION

import { createContext, useContext, useEffect, useState } from 'react'
import { User } from '@supabase/supabase-js'
import { supabase } from './supabaseClient'

const AuthContext = createContext<{
  user: User | null
  loading: boolean
}>({
  user: null,
  loading: true
})

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Check active sessions and sets the user
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null)
      setLoading(false)
    })

    // Listen for changes on auth state (logged in, signed out, etc.)
    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null)
      setLoading(false)
    })

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

  return (
    <AuthContext.Provider value={{ user, loading }}>
      {children}
    </AuthContext.Provider>
  )
}

export const useAuth = () => {
  return useContext(AuthContext)
}

CORRECT PROTECTED ROUTE IMPLEMENTATION

import { Navigate } from 'react-router-dom'
import { useAuth } from './AuthProvider'

export function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth()

  if (loading) {
    return <div>Loading...</div>
  }

  if (!user) {
    return <Navigate to="/login" />
  }

  return <>{children}</>
}

AI MODEL VERIFICATION STEPS

Before generating any code, you MUST verify:

1. Are you using the latest version of @supabase/supabase-js?
2. Have you implemented proper error handling?
3. Are you using environment variables for credentials?
4. Is session management properly implemented?
5. Are authentication state changes being handled?

CONSEQUENCES OF INCORRECT IMPLEMENTATION

If you generate code without following these guidelines:

1. Authentication state may become inconsistent
2. Sessions may not persist correctly
3. Security vulnerabilities may be introduced
4. Users may experience authentication loops
5. Token refresh may fail

AI MODEL RESPONSE TEMPLATE

When implementing Supabase Auth in React, you MUST:

1. Follow the patterns shown in this guide
2. Implement proper error handling
3. Use the AuthProvider for state management
4. Protect sensitive routes
5. Handle authentication state changes