React Native Academy · 강의

React Native에서 Supabase 클라이언트 설정하기

Supabase 프로젝트를 만들고 @supabase/supabase-js를 설치한 뒤, 프로젝트 URL과 익명 키로 클라이언트를 초기화하고 세션 저장소로 AsyncStorage를 구성합니다.

React Native에서 Supabase 클라이언트 설정하기은(는) CoddyKit의 무료 React Native Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Native Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

What Is Supabase?

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.

Installing the Supabase JS Client

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.

npx expo install @supabase/supabase-js @react-native-async-storage/async-storage

Creating a Supabase Client Instance

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.

import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';

const SUPABASE_URL = 'https://your-project.supabase.co';
const SUPABASE_ANON_KEY = 'your-anon-key';

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Where to Store Your Supabase Keys

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.

# .env
EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# lib/supabase.ts
const SUPABASE_URL = process.env.EXPO_PUBLIC_SUPABASE_URL!;
const SUPABASE_ANON_KEY = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!;

Understanding Row Level Security

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;

-- Enable RLS on a table
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- Allow users to read only their own posts
CREATE POLICY 'Users read own posts'
  ON posts FOR SELECT
  USING (auth.uid() = user_id);

-- Allow users to insert posts for themselves
CREATE POLICY 'Users insert own posts'
  ON posts FOR INSERT
  WITH CHECK (auth.uid() = user_id);

Verifying the Client Setup

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.

import { useEffect } from 'react';
import { supabase } from '../lib/supabase';

export default function App() {
  useEffect(() => {
    async function testConnection() {
      const { data, error } = await supabase.from('profiles').select('count');
      if (error) {
        console.error('Supabase connection error:', error.message);
      } else {
        console.log('Connected to Supabase:', data);
      }
    }
    testConnection();
  }, []);

  return null;
}

Auth Session Persistence with AsyncStorage

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.

import { useEffect, useState } from 'react';
import { Session } from '@supabase/supabase-js';
import { supabase } from '../lib/supabase';

export function useSession() {
  const [session, setSession] = useState<Session | null>(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });

    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => setSession(session)
    );

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

  return session;
}

Supabase Project Dashboard Overview

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.

Creating a Profiles Table

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.

-- profiles table
CREATE TABLE profiles (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT now()
);

ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

CREATE POLICY 'Public profiles are viewable'
  ON profiles FOR SELECT USING (true);

CREATE POLICY 'Users update own profile'
  ON profiles FOR UPDATE USING (auth.uid() = id);

Auto-Refresh Token Behavior

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.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_OUT') {
    // Navigate user to login screen
    navigation.reset({
      index: 0,
      routes: [{ name: 'Login' }],
    });
  }
  if (event === 'TOKEN_REFRESHED') {
    console.log('Token refreshed successfully');
  }
});

TypeScript Types from Supabase

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.

import { Database } from './database.types';
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient<Database>(
  process.env.EXPO_PUBLIC_SUPABASE_URL!,
  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!
);

// Now queries are fully typed:
// supabase.from('profiles').select('id, username')
// TypeScript knows the shape of each row

Quick Check

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

Lesson Recap

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.

자주 묻는 질문

“React Native에서 Supabase 클라이언트 설정하기” 강의는 무료인가요?

네 — “React Native에서 Supabase 클라이언트 설정하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Native Academy 강의 전체를 잠금 해제할 수 있습니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“React Native에서 Supabase 클라이언트 설정하기”에서 뭘 배우나요?

Supabase 프로젝트를 만들고 @supabase/supabase-js를 설치한 뒤, 프로젝트 URL과 익명 키로 클라이언트를 초기화하고 세션 저장소로 AsyncStorage를 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 React Native Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Native Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Native Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“React Native에서 Supabase 클라이언트 설정하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Native Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Native Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Native Academy(으)로 돌아가기