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.
The unique Supabase URL which is supplied when you create a new project in your project dashboard.
The unique Supabase Key which is supplied when you create a new project in your project dashboard.
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')
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')
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)
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' \}
\})
import \{ createClient \} from '@supabase/supabase-js'
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key', \{
global: \{ fetch: fetch.bind(globalThis) \}
\})
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,
\},
\});
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,
\},
\});