How to Set Up Supabase in a Bare React Native App

• Installing Supabase
• Setting up polyfills for Node/Web APIs
• Securely persisting auth sessions using react-native-keychain
• Querying data from your Supabase tables

🧠 Works with React Native 0.80+ and Supabase JS v2+ (2025)

🧱 Prerequisites

• Node.js & React Native CLI
• A Supabase account (create one at supabase.com)
• A bare React Native app (not using Expo)

If you don’t have a project yet:

npm install @supabase/supabase-js react-native-get-random-values react-native-url-polyfill base-64 react-native-keychain

1️⃣ Install Supabase and Required Packages

Install the core libraries:

npx pod-install

Also, install pods (for iOS):

// src/polyfills.ts

import 'react-native-url-polyfill/auto';
import 'react-native-get-random-values';
import { decode, encode } from 'base-64';
import { Buffer } from 'buffer';
import process from 'process';

// Base64 support
if (!global.btoa) global.btoa = encode;
if (!global.atob) global.atob = decode;

// Buffer and process globals
if (!global.Buffer) global.Buffer = Buffer;
if (!global.process) global.process = process;

---

2️⃣ Create Polyfills for Node-like APIs

Create a new file src/polyfills.ts:

// src/polyfills.ts

import 'react-native-url-polyfill/auto';
import 'react-native-get-random-values';
import { decode, encode } from 'base-64';
import { Buffer } from 'buffer';
import process from 'process';

// Base64 support
if (!global.btoa) global.btoa = encode;
if (!global.atob) global.atob = decode;

// Buffer and process globals
if (!global.Buffer) global.Buffer = Buffer;
if (!global.process) global.process = process;

Then, in your index.ts or index.js, import this before anything else:

// index.ts

import './src/polyfills';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

---

3️⃣ Secure Auth Storage using Keychain

Create a custom SecureStorage module:

// src/utils/SecureStorage.ts

import * as Keychain from 'react-native-keychain';

export const SecureStorage = {
  getItem: async (key: string) => {
    const credentials = await Keychain.getGenericPassword({ service: key });
    return credentials ? credentials.password : null;
  },
  setItem: async (key: string, value: string) => {
    await Keychain.setGenericPassword('user', value, { service: key });
  },
  removeItem: async (key: string) => {
    await Keychain.resetGenericPassword({ service: key });
  },
};

This ensures that your Supabase auth tokens are stored securely on device (Keychain for iOS, EncryptedSharedPreferences for Android).

---

4️⃣ Set Up Supabase Client

// src/lib/supabase.ts

import { createClient } from '@supabase/supabase-js';
import { SecureStorage } from '../utils/SecureStorage';

const supabaseUrl = 'https://your-project.supabase.co';
const supabaseAnonKey = 'your-anon-key'; // Get from Supabase → Settings → API

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: SecureStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false, // Not needed in mobile
  },
});

---

5️⃣ Test Supabase Query

Now use it anywhere:

// Example: Fetch data from 'test' table

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

const fetchData = async () => {
  const { data, error } = await supabase.from('test').select('*');
  if (error) {
    console.error('Supabase Error:', error.message);
  } else {
    console.log('Data:', data);
  }
};

✅ Final Thoughts

You now have a fully working Supabase setup in your React Native app — with:

• Secure storage of sessions

• Auto token refresh

• Node.js polyfills for URL, Buffer, atob/btoa, etc.

• Full API access to your Supabase database

  Note: Use proxyman if facing no network issue on iOS 18.4+