La tua prima app con React Native

Nella dashboard crea un progetto. Apri Editor SQL ed esegui:

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: crea una chiave pubblicabile e copiala subito; le chiavi vengono mostrate solo alla creazione. Non mettere mai una chiave segreta (eb_sk_…) in un'app: chiunque può aprire un'app e leggerla.
• Autenticazione › Impostazioni: aggiungi il link della tua app in URL di reindirizzamento consentiti, per esempio myapp://auth/callback, dove myapp è lo scheme del tuo app.json. Le email di conferma e l'accesso social tornano lì.

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

React Native non ha un paio di cose che hanno i browser. Due piccoli pacchetti le aggiungono; importali prima di tutto il resto:

# .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_…

Un telefono non ha localStorage, quindi dai al client un posto dove conservare la sessione. Viene rinnovata per te e la persona resta connessa quando l'app si riavvia.

// 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));

Con la conferma via email attiva, la persona riceve un link che apre la tua app all'indirizzo che hai passato come redirectTo, con il token dopo un #. Confermalo con 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);
}

Attiva prima il provider in Autenticazione › Provider. L'app apre il provider nel browser di sistema e riporta la persona indietro tramite il link della tua app; exchangeCodeForSession completa l'accesso. Solo questa app può completarlo: il segreto monouso resta sul telefono.

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" });

Ogni richiesta porta con sé la persona connessa e il database applica la tua regola. Chi non ha effettuato l'accesso riceve una lista vuota e nessuno può leggere o modificare le attività di un altro, nemmeno chiamando direttamente l'API.

Crea un bucket in Storage e aggiungi una policy in modo che ogni persona possa scrivere nella propria cartella (vedi la guida al caricamento dei file). Passa i byte del file (un ArrayBuffer) a upload: Caricamento di file

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" });
}

• Per i link di accesso usa una build di sviluppo (npx expo run:ios o run:android) invece di Expo Go: l'indirizzo di Expo Go cambia con la tua rete, quindi non si può registrare una volta sola.
• Le altre configurazioni di React Native funzionano allo stesso modo: installa gli stessi pacchetti, importa per primi i due polyfill e passa un oggetto di storage a createClient.
• Funziona anche il realtime: React Native ha i WebSocket integrati, quindi espobase.realtime non richiede altro.