JavaScript: 初始化

创建一个供浏览器使用的新客户端

你可以使用createClient()方法初始化一个新的Supabase客户端。

Supabase客户端是你访问Supabase其他功能的入口点，也是与Supabase生态系统中我们提供的所有服务进行交互的最简单方式。

Parameters

• supabaseUrl

  (Required)

  在项目仪表板中创建新项目时提供的唯一Supabase URL

• supabaseKey

  (Required)

  在项目仪表板中创建新项目时提供的唯一Supabase密钥

• options

  (Optional)

Examples

创建客户端

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

// 创建一个用于与数据库交互的supabase客户端
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')

使用自定义域名

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

// 使用自定义域名作为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', {
  // 提供自定义模式，默认为"public"
  db: { schema: 'other_schema' }
})

自定义fetch实现

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

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

React Native中使用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中使用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';

// 由于Expo的SecureStore不支持超过2048字节的值
// 这里生成AES-256密钥存储在SecureStore中
// 并用该密钥加密/解密存储在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,
  },
});