How to Connect Supabase to React Native

1# For Expo projects
2npx expo install @supabase/supabase-js @react-native-async-storage/async-storage
3
4# For bare React Native projects
5npm install @supabase/supabase-js @react-native-async-storage/async-storage
6npx pod-install  # iOS only

1// src/lib/supabase.ts
2import AsyncStorage from '@react-native-async-storage/async-storage'
3import { createClient } from '@supabase/supabase-js'
4
5const supabaseUrl = 'https://your-project-ref.supabase.co'
6const supabaseAnonKey = 'your-anon-key-here'
7
8export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
9  auth: {
10    storage: AsyncStorage,
11    autoRefreshToken: true,
12    persistSession: true,
13    detectSessionInUrl: false,
14  },
15})

1import { supabase } from '../lib/supabase'
2
3export async function signUp(email: string, password: string) {
4  const { data, error } = await supabase.auth.signUp({
5    email,
6    password,
7  })
8  if (error) throw error
9  return data
10}
11
12export async function signIn(email: string, password: string) {
13  const { data, error } = await supabase.auth.signInWithPassword({
14    email,
15    password,
16  })
17  if (error) throw error
18  return data
19}
20
21export async function signOut() {
22  const { error } = await supabase.auth.signOut()
23  if (error) throw error
24}

1// src/hooks/useAuth.ts
2import { useEffect, useState } from 'react'
3import { User } from '@supabase/supabase-js'
4import { supabase } from '../lib/supabase'
5
6export function useAuth() {
7  const [user, setUser] = useState<User | null>(null)
8  const [loading, setLoading] = useState(true)
9
10  useEffect(() => {
11    // Check current session
12    supabase.auth.getSession().then(({ data: { session } }) => {
13      setUser(session?.user ?? null)
14      setLoading(false)
15    })
16
17    // Listen to auth changes
18    const { data: { subscription } } = supabase.auth.onAuthStateChange(
19      (_event, session) => {
20        setUser(session?.user ?? null)
21      }
22    )
23
24    return () => subscription.unsubscribe()
25  }, [])
26
27  return { user, loading, isAuthenticated: !!user }
28}

1import { supabase } from '../lib/supabase'
2
3// Fetch todos
4export async function getTodos() {
5  const { data, error } = await supabase
6    .from('todos')
7    .select('*')
8    .order('created_at', { ascending: false })
9  if (error) throw error
10  return data
11}
12
13// Add a new todo
14export async function addTodo(title: string) {
15  const { data: { user } } = await supabase.auth.getUser()
16  if (!user) throw new Error('Not authenticated')
17
18  const { data, error } = await supabase
19    .from('todos')
20    .insert({ title, is_complete: false, user_id: user.id })
21    .select()
22    .single()
23  if (error) throw error
24  return data
25}
26
27// Update a todo
28export async function updateTodo(id: number, updates: Record<string, unknown>) {
29  const { data, error } = await supabase
30    .from('todos')
31    .update(updates)
32    .eq('id', id)
33    .select()
34    .single()
35  if (error) throw error
36  return data
37}

1-- Enable RLS on the todos table
2alter table public.todos enable row level security;
3
4-- Authenticated users can read their own todos
5create policy "Users read own todos"
6  on public.todos for select
7  to authenticated
8  using ((select auth.uid()) = user_id);
9
10-- Authenticated users can create their own todos
11create policy "Users create own todos"
12  on public.todos for insert
13  to authenticated
14  with check ((select auth.uid()) = user_id);
15
16-- Authenticated users can update their own todos
17create policy "Users update own todos"
18  on public.todos for update
19  to authenticated
20  using ((select auth.uid()) = user_id);
21
22-- Authenticated users can delete their own todos
23create policy "Users delete own todos"
24  on public.todos for delete
25  to authenticated
26  using ((select auth.uid()) = user_id);