การตั้งค่าไคลเอนต์ Supabase ใน React Native

Supabase is an open-source Firebase alternative that provides a hosted PostgreSQL database, authentication, real-time subscriptions, and file storage — all accessible through a simple JavaScript client. It is an excellent backend choice for React Native apps because it requires no server code for common operations.

Unlike Firebase, Supabase uses standard SQL and lets you query your data with full relational power. You create a project on supabase.com and get a project URL and an anon key that you use in your app.

To use Supabase in a React Native project, install the official JavaScript client along with the AsyncStorage adapter that Supabase uses to persist auth sessions on mobile devices.

Run the following command in your project root. The @supabase/supabase-js package handles all API communication, while @react-native-async-storage/async-storage stores the session token between app launches.

You initialize the Supabase client once and export it for use throughout the app. Create a file called lib/supabase.ts and call createClient with your project URL and anon key.

The auth options tell the client to use AsyncStorage so the session persists after the app is closed, and detectSessionInUrl is set to false because React Native does not use browser URLs for OAuth callbacks.

Your Supabase URL and anon key are not secret — the anon key is meant to be used in client-side code and is protected by Row Level Security (RLS) policies in your database. However, your service_role key is secret and must never be embedded in a mobile app.

A best practice is to store the public keys in environment variables using a .env file and access them via process.env.EXPO_PUBLIC_SUPABASE_URL. Expo automatically exposes variables prefixed with EXPO_PUBLIC_ to the JavaScript bundle.

Row Level Security (RLS) is the cornerstone of Supabase security. When RLS is enabled on a table, every query from the anon or authenticated key is filtered through policies you define in SQL. Without RLS, anyone with your anon key can read or modify all rows.

A typical policy allows users to read only their own rows: USING (auth.uid() = user_id). You enable RLS in the Supabase dashboard under the Authentication > Policies section, or with SQL: ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

After creating the client, you can verify it is configured correctly by performing a simple health check query. Calling supabase.from('your_table').select('count') will return an error if the URL or key is wrong, or a result if the connection is successful.

A common pattern is to test the connection in a useEffect during development and log any errors. Remember to remove debug logging before publishing to production.

By setting storage: AsyncStorage in the Supabase client options, the auth session (JWT token and refresh token) is automatically saved to device storage. When the user reopens the app, the client reads this stored session and restores the authenticated state without requiring them to log in again.

You can listen to auth state changes with supabase.auth.onAuthStateChange, which fires whenever the session is created, refreshed, or destroyed. This is useful for driving your navigation stack.

The Supabase dashboard at app.supabase.com gives you a full view of your backend. Key sections include:

• Table Editor — create and browse database tables visually
• Auth — manage users, configure providers, and set policies
• Storage — manage file buckets for images and documents
• API — view auto-generated REST and real-time API documentation

The SQL Editor lets you run arbitrary SQL queries against your database, which is useful for creating tables, indexes, and RLS policies during development.

A common pattern in Supabase apps is to create a profiles table that extends the built-in auth.users table with app-specific data like display names and avatars. You can use a database trigger to automatically create a profile row when a new user signs up.

The id column references auth.users, so each profile is linked to exactly one authenticated user. RLS policies ensure users can only read and update their own profile.

Supabase JWTs expire after one hour by default. When you set autoRefreshToken: true in the client options, the client automatically calls the refresh endpoint before the token expires, keeping the user logged in without any intervention from your code.

If the refresh fails (for example, the user's internet is offline for an extended period), the client emits a TOKEN_REFRESHED event followed by a SIGNED_OUT event. You should handle SIGNED_OUT in your onAuthStateChange listener to redirect the user back to the login screen.

Supabase can generate TypeScript types from your database schema using the Supabase CLI. Run npx supabase gen types typescript to produce a database.types.ts file. You then pass this as a generic to createClient for fully typed database queries.

Typed queries catch field-name typos at compile time and give you auto-complete in your editor — a significant productivity boost on larger projects.

Test your understanding of React Native Mobile Development concepts from this lesson.

In this lesson you learned: how to install and initialize the Supabase JS client, the role of AsyncStorage in persisting auth sessions, and why Row Level Security is essential when using the anon key in mobile apps. Next up we explore authentication flows with Supabase including email/password and OAuth providers.