Using Supabase - Expo

import { BoxLink } from '~~/ui/components/BoxLink'; import { Terminal } from '~~/ui/components/Snippet'; import { Step } from '~/ui/components/Step';

Supabase is a Backend-as-a-Service (BaaS) app development platform that provides hosted backend services such as a Postgres database, user authentication, file storage, edge functions, realtime syncing, and a vector and AI toolkit. It's an open-source alternative to Google's Firebase.

Supabase automatically generates a REST API from your database and employs a concept called row level security (RLS) to secure your data, making it possible to directly interact with your database from your React Native application without needing to go through a server!

Supabase provides a TypeScript client library called supabase-js to interact with the REST API. Alternatively, Supabase also exposes a GraphQL API allowing you to use your favorite GraphQL client (for example, Apollo Client) should you wish to.

Prerequisites

Head over to database.new to create a new Supabase project.

Get the API Keys

Get the Project URL from the API settings and Publishable key from the API Keys:

Go to the API Settings page in the Dashboard.
Find your Project URL and service_role keys on this page.
Then go to the API Keys
Find your Project Publishable key on this page under the API Keys tab.

Using the Supabase TypeScript SDK

Using supabase-js is the most convenient way of leveraging the full power of the Supabase stack as it conveniently combines all the different services (database, auth, realtime, storage, edge functions) together.

Install and initialize the Supabase TypeScript SDK

After you have created your Expo project, install @supabase/supabase-js and the required dependencies using the following command:

Create a helper file to initialize the Supabase client (@supabase/supabase-js). You need the API URL and the Publishable key copied earlier. These variables are safe to expose in your Expo app since Supabase has Row Level Security enabled in the Database.

import 'expo-sqlite/localStorage/install';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL;
const supabasePublishableKey = YOUR_REACT_NATIVE_SUPABASE_PUBLISHABLE_KEY;

export const supabase = createClient(supabaseUrl, supabasePublishableKey, {
  auth: {
    storage: localStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Now you can import { supabase } from '/utils/supabase' throughout your application to leverage the full power of Supabase!

</Step>

Next steps