Seu primeiro app com React Native

No painel, crie um projeto. Abra o Editor SQL e execute:

create table todos (
  id bigint generated by default as identity primary key,
  owner_id uuid not null default espobase.user_id(),
  title text not null,
  done boolean not null default false,
  created_at timestamptz not null default now()
);

-- Row level security is already on. Each signed-in user sees and changes only their own todos:
create policy "Users manage their own todos" on todos
  for all
  using (owner_id = espobase.user_id())
  with check (owner_id = espobase.user_id());

• API: crie uma chave publicável e copie-a agora; as chaves só são mostradas na criação. Nunca coloque uma chave secreta (eb_sk_…) em um app: qualquer pessoa pode abrir um app e lê-la.
• Autenticação › Configurações: adicione o link do seu app em URLs de redirecionamento permitidas, por exemplo myapp://auth/callback, em que myapp é o scheme do seu app.json. Os e-mails de confirmação e o login social voltam para ele.

npm install @espobase/client
npx expo install @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill expo-web-browser expo-linking

O React Native não tem algumas coisas que os navegadores têm. Dois pacotes pequenos as fornecem; importe-os antes de qualquer outra coisa:

# .env (Expo reads EXPO_PUBLIC_ variables; the PUBLISHABLE key is safe in an app)
EXPO_PUBLIC_ESPOBASE_URL=https://api.espobase.com/project/<your project ref>
EXPO_PUBLIC_ESPOBASE_KEY=eb_pk_…

Um telefone não tem localStorage, então dê ao cliente um lugar para guardar a sessão. Ela é renovada para você, e a pessoa continua conectada quando o app reinicia.

// lib/espobase.ts
import "react-native-get-random-values"; // crypto.getRandomValues
import "react-native-url-polyfill/auto"; // a complete URL class
import AsyncStorage from "@react-native-async-storage/async-storage";
import { createClient } from "@espobase/client";

export const espobase = createClient(
  process.env.EXPO_PUBLIC_ESPOBASE_URL!,
  process.env.EXPO_PUBLIC_ESPOBASE_KEY!,
  { auth: { storage: AsyncStorage } },
);

import * as Linking from "expo-linking";
import { espobase } from "@/lib/espobase";

// myapp://auth/callback (the scheme comes from app.json). Add it under Authentication › Settings.
const redirectTo = Linking.createURL("auth/callback");

await espobase.auth.signUp({ email, password, options: { redirectTo } });
await espobase.auth.signInWithPassword({ email, password });

// The confirmation email opens the app at redirectTo#type=signup&token=…
Linking.addEventListener("url", async ({ url }) => {
  const token = new URLSearchParams(url.split("#")[1] ?? "").get("token");
  if (token) await espobase.auth.verifyEmail({ token });
});

// Re-render when the user signs in or out.
espobase.auth.onAuthStateChange((_event, session) => setSession(session));

Com a confirmação por e-mail ativada, a pessoa recebe um link que abre o seu app no endereço que você passou como redirectTo, com o token depois de um #. Confirme-o com espobase.auth.verifyEmail({ token }).

import * as WebBrowser from "expo-web-browser";
import * as Linking from "expo-linking";
import { espobase } from "@/lib/espobase";

export async function signInWithGoogle() {
  const redirectTo = Linking.createURL("auth/callback");
  const { data } = await espobase.auth.signInWithOAuth({
    provider: "google",
    options: { redirectTo, skipBrowserRedirect: true },
  });
  const result = await WebBrowser.openAuthSessionAsync(data!.url, redirectTo);
  if (result.type !== "success") return; // cancelled
  const code = new URL(result.url).searchParams.get("code");
  if (code) await espobase.auth.exchangeCodeForSession(code);
}

Ative primeiro o provedor em Autenticação › Provedores. O app abre o provedor no navegador do sistema e traz a pessoa de volta pelo link do seu app; exchangeCodeForSession conclui o login. Só este app pode concluí-lo: o segredo de uso único fica no telefone.

import { useEffect, useState } from "react";
import { espobase } from "@/lib/espobase";

export function useTodos() {
  const [todos, setTodos] = useState<{ id: number; title: string; done: boolean }[]>([]);
  useEffect(() => {
    espobase.from("todos").select("*").order("created_at").then(({ data }) => setTodos(data ?? []));
  }, []);
  return todos;
}

// owner_id fills itself in (its default is espobase.user_id()).
await espobase.from("todos").insert({ title: "Buy milk" });

Cada requisição leva a pessoa conectada, e o banco de dados aplica a sua regra. Quem não está conectado recebe uma lista vazia, e ninguém consegue ler ou alterar as tarefas de outra pessoa, nem chamando a API diretamente.

Crie um bucket em Storage e adicione uma política para que cada pessoa possa gravar na própria pasta (veja o guia de envio de arquivos). Passe os bytes do arquivo (um ArrayBuffer) para upload: Envio de arquivos

import * as ImagePicker from "expo-image-picker";
import { espobase } from "@/lib/espobase";

const picked = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images"] });
if (!picked.canceled) {
  const asset = picked.assets[0]!;
  const bytes = await (await fetch(asset.uri)).arrayBuffer();
  const { data: session } = await espobase.auth.getSession();
  const userId = session.session!.user.id;
  await espobase.storage.from("photos").upload(`${userId}/photo.jpg`, bytes, { contentType: "image/jpeg" });
}

• Use um build de desenvolvimento (npx expo run:ios ou run:android) em vez do Expo Go para os links de login: o endereço do Expo Go muda com a sua rede, então não dá para registrá-lo uma só vez.
• Outras configurações de React Native funcionam do mesmo jeito: instale os mesmos pacotes, importe os dois polyfills primeiro e passe um objeto de armazenamento para createClient.
• O tempo real também funciona: o React Native já tem WebSockets, então espobase.realtime não precisa de mais nada.