Comment connecter mon appli Expo (React Native) à mon projet Supabase
Tags: react, reactnative, supabase, expo
Published: 2022-10-26 11:52:33

---
title: Comment connecter mon appli Expo (React Native) à mon projet Supabase
published: true
description: Comment créer une page d'inscription et connexion avec Supabase comme backend et Expo (React Native) pour la partie UI
tags: react, reactnative, supabase, expo
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-26 10:34 +0000
---


# Mon premier projet Supabase
Je me rends sur le site de [Supabase]()

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bov6row5evwkbdu95q9.png)

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! 🫢)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulr0cd1qjm3ud1myjluy.png)

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:
```bash
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`:
```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`:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jto6gsl75nph8llugmz3.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xt5yel47kzpd9dzvd24v.gif)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdmdko8qync6epz6nids.gif)

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

```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...

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkoa6r42x0xzr2xfvn97.gif)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r81fj7n6xnvvsl0aqr9.gif)

Et normalement c'est good:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eniecbkuxy24f1gh3dam.gif)

Voici le code du composant, rien de fifou:
```tsx
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.