Comment connecter mon appli Expo (React Native) à mon projet Supabase

Mon premier projet Supabase

Je me rends sur le site de Supabase

Le reste est easy, y'a qu'à créer un compte...etc... avec Github ca va vite en plus.

Une fois le compte créé, je peux créer un nouveau projet grace au bouton "New project" (quelle surprise! 🫢)

Moi je l'ai remplis comme ca vu que j'habite en France, si t'habite en Inde tu peux essayer de prendre une région plus proche sinon.

Une fois que le projet est setup, je peux revenir vers mon application Expo (React Native) pour me connecter à Supabase.

Installation de ce qu'il faut coté Expo (React Native)

Dans mon terminal:

npm i @supabase/supabase-js react-native-url-polyfill @react-native-async-storage/async-storage

Dans mon projet Expo(React Native), je créer un fichier supabase.ts:

// supabase.ts
import "react-native-url-polyfill/auto"
import AsyncStorage from "@react-native-async-storage/async-storage"

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

const supabaseUrl = "MON_URL_SUPABASE"
const supabaseKey = "MA_KEY_SUPABASE"
const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
})

export default supabase

Pas de panique, je vais te montrer où se trouvent l'URL et la KEY:

Juste pour etre sur que tout fonctionne, on va se créer une table factice dans la BDD (base de donnée):

J'y ajoute un plat (j'ai faim)

Voyons voir si ton fonctionne, direct dans TabOneScreen.tsx:

export default function TabOneScreen({
  navigation,
}: RootTabScreenProps<"TabOne">) {
  async function load_plats() {
    let { data: plats, error } = await supabase.from("plats").select("*")
    console.log(plats, error)
  }

  useEffect(() => {
    load_plats()
  }, [])
  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text category="h1">Connexion</Text>
      <Button
        accessoryLeft={FacebookIcon}
        onPress={() => alert("Mais qui utilise encore Fessebook!")}
      >
        Me connecter avec Fessebook
      </Button>
    </Layout>
  )
}

Puis lorsque je refresh, j'ai...

Que dalle, eh oui, lorsque j'ai créé ma table, j'ai oublié (quel accident!) un petit truc:

Et normalement c'est good:

Voici le code du composant, rien de fifou:

export default function TabOneScreen({
  navigation,
}: RootTabScreenProps<"TabOne">) {
  const [dishes, setDishes] = useState<any>([])
  async function load_plats() {
    let { data: plats, error } = await supabase.from("plats").select("*")
    console.log(plats, error)
    setDishes(plats)
  }

  useEffect(() => {
    load_plats()
  }, [])

  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text category="h3">{JSON.stringify(dishes)}</Text>
    </Layout>
  )
}

---

PS : Si vous êtes intéressé par la secu et le time management, go check @boutvalentin et ses articles / formations faits avec ❤️ (et passion) sur tous ses sujets.
PSS : Si vous êtes intéressé par la Cybersécurité, go check @emiliebout et ses articles / formations faits avec passion (et ❤️) sur tous ses sujets.