JavaScript: Initializing

Create a new client for use in the browser.

You can initialize a new Supabase client using the createClient() method.

The Supabase client is your entrypoint to the rest of the Supabase functionality and is the easiest way to interact with everything we offer within the Supabase ecosystem.

Parameters

• supabaseUrl

  (Required)

  The unique Supabase URL which is supplied when you create a new project in your project dashboard.

• supabaseKey

  (Required)

  The unique Supabase Key which is supplied when you create a new project in your project dashboard.

• options

  (Optional)

Examples

Creating a client

import \{ createClient \} from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')

With a custom domain

import \{ createClient \} from '@supabase/supabase-js'

// Use a custom domain as the supabase URL
const supabase = createClient('https://my-custom-domain.com', 'public-anon-key')

With additional parameters

import \{ createClient \} from '@supabase/supabase-js'

const options = \{
  db: \{
    schema: 'public',
  \},
  auth: \{
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true
  \},
  global: \{
    headers: \{ 'x-my-custom-header': 'my-app-name' \},
  \},
\}
const supabase = createClient("https://xyzcompany.supabase.co", "public-anon-key", options)

With custom schemas

import \{ createClient \} from '@supabase/supabase-js'

const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key', \{
  // Provide a custom schema. Defaults to "public".
  db: \{ schema: 'other_schema' \}
\})

Custom fetch implementation

import \{ createClient \} from '@supabase/supabase-js'

const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key', \{
  global: \{ fetch: fetch.bind(globalThis) \}
\})

React Native options with AsyncStorage

import 'react-native-url-polyfill/auto'
import \{ createClient \} from '@supabase/supabase-js'
import AsyncStorage from "@react-native-async-storage/async-storage";

const supabase = createClient("https://xyzcompany.supabase.co", "public-anon-key", \{
  auth: \{
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  \},
\});

React Native options with Expo SecureStore

import 'react-native-url-polyfill/auto'
import \{ createClient \} from '@supabase/supabase-js'
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as SecureStore from 'expo-secure-store';
import * as aesjs from 'aes-js';
import 'react-native-get-random-values';

// As Expo's SecureStore does not support values larger than 2048
// bytes, an AES-256 key is generated and stored in SecureStore, while
// it is used to encrypt/decrypt values stored in AsyncStorage.
class LargeSecureStore \{
  private async _encrypt(key: string, value: string) \{
    const encryptionKey = crypto.getRandomValues(new Uint8Array(256 / 8));

    const cipher = new aesjs.ModeOfOperation.ctr(encryptionKey, new aesjs.Counter(1));
    const encryptedBytes = cipher.encrypt(aesjs.utils.utf8.toBytes(value));

    await SecureStore.setItemAsync(key, aesjs.utils.hex.fromBytes(encryptionKey));

    return aesjs.utils.hex.fromBytes(encryptedBytes);
  \}

  private async _decrypt(key: string, value: string) \{
    const encryptionKeyHex = await SecureStore.getItemAsync(key);
    if (!encryptionKeyHex) \{
      return encryptionKeyHex;
    \}

    const cipher = new aesjs.ModeOfOperation.ctr(aesjs.utils.hex.toBytes(encryptionKeyHex), new aesjs.Counter(1));
    const decryptedBytes = cipher.decrypt(aesjs.utils.hex.toBytes(value));

    return aesjs.utils.utf8.fromBytes(decryptedBytes);
  \}

  async getItem(key: string) \{
    const encrypted = await AsyncStorage.getItem(key);
    if (!encrypted) \{ return encrypted; \}

    return await this._decrypt(key, encrypted);
  \}

  async removeItem(key: string) \{
    await AsyncStorage.removeItem(key);
    await SecureStore.deleteItemAsync(key);
  \}

  async setItem(key: string, value: string) \{
    const encrypted = await this._encrypt(key, value);

    await AsyncStorage.setItem(key, encrypted);
  \}
\}

const supabase = createClient("https://xyzcompany.supabase.co", "public-anon-key", \{
  auth: \{
    storage: new LargeSecureStore(),
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  \},
\});