Votre première application avec React Native

Dans le tableau de bord, créez un projet. Ouvrez Éditeur SQL et exécutez :

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 : créez une clé publiable et copiez-la maintenant ; les clés ne sont affichées qu'à la création. Ne mettez jamais de clé secrète (eb_sk_…) dans une application : n'importe qui peut ouvrir une application et la lire.
• Authentification › Réglages : ajoutez le lien de votre application dans URL de redirection autorisées, par exemple myapp://auth/callback, où myapp est le scheme de votre app.json. Les e-mails de confirmation et la connexion sociale y reviennent.

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 n'a pas quelques éléments que les navigateurs ont. Deux petits paquets les apportent ; importez-les avant tout le reste :

# .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 téléphone n'a pas de localStorage : donnez donc au client un endroit où garder la session. Elle est renouvelée pour vous, et la personne reste connectée quand l'application redémarre.

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

Avec la confirmation par e-mail activée, la personne reçoit un lien qui ouvre votre application à l'adresse que vous avez passée comme redirectTo, avec le jeton après un #. Confirmez-le avec 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);
}

Activez d'abord le fournisseur dans Authentification › Fournisseurs. L'application ouvre le fournisseur dans le navigateur du système et récupère la personne via le lien de votre application ; exchangeCodeForSession termine la connexion. Seule cette application peut la terminer : le secret à usage unique reste sur le téléphone.

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

Chaque requête porte la personne connectée, et la base de données applique votre règle. Une personne non connectée reçoit une liste vide, et personne ne peut lire ni modifier les tâches d'un autre, même en appelant directement l'API.

Créez un bucket dans Storage et ajoutez une politique pour que chaque personne puisse écrire dans son propre dossier (voir le guide d'envoi de fichiers). Passez les octets du fichier (un ArrayBuffer) à upload : Envoi de fichiers

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

• Pour les liens de connexion, utilisez une build de développement (npx expo run:ios ou run:android) plutôt qu'Expo Go : l'adresse d'Expo Go change avec votre réseau, on ne peut donc pas l'enregistrer une fois pour toutes.
• Les autres configurations React Native fonctionnent de la même façon : installez les mêmes paquets, importez d'abord les deux polyfills et passez un objet de stockage à createClient.
• Le temps réel fonctionne aussi : React Native intègre les WebSockets, donc espobase.realtime n'a besoin de rien d'autre.