React Native Academy · Leçon

Configurer le client Supabase dans React Native

Créez un projet Supabase, installez @supabase/supabase-js, initialisez le client avec l'URL de votre projet et la clé anon, puis configurez AsyncStorage comme stockage de session.

Configurer le client Supabase dans React Native est une leçon React Native Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Native Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Native Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Configurer le client Supabase dans React Native » est-elle gratuite ?

Oui — le texte complet de « Configurer le client Supabase dans React Native » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Native Academy, passe à CoddyKit PRO. Le cours React Native Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer le client Supabase dans React Native » ?

Créez un projet Supabase, installez @supabase/supabase-js, initialisez le client avec l'URL de votre projet et la clé anon, puis configurez AsyncStorage comme stockage de session. Tu pratiques React Native Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Native Academy ?

Aucune expérience préalable n'est requise. React Native Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Configurer le client Supabase dans React Native » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Native Academy ?

Oui. Chaque leçon React Native Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configurer le client Supabase dans React Native
Authentification par e-mail et OAuth
Interroger la base de données avec le client Supabase
Abonnements en temps réel

← Retour à React Native Academy