Comment configurer Appwrite sur Expo React Native

1import { Client, Account, Databases, Storage } from 'react-native-appwrite';
2 
3// Configuration
4const APPWRITE_ENDPOINT = 'https://cloud.appwrite.io/v1';
5const APPWRITE_PROJECT_ID = 'VOTRE_PROJECT_ID'; // Remplacez par votre Project ID
6 
7// Initialiser le client Appwrite
8const client = new Client();
9 
10client
11  .setEndpoint(APPWRITE_ENDPOINT)
12  .setProject(APPWRITE_PROJECT_ID)
13  .setPlatform('com.votreapp.expo'); // Votre package name Android ou bundle ID iOS
14 
15// Exporter les services
16export const account = new Account(client);
17export const databases = new Databases(client);
18export const storage = new Storage(client);
19 
20export { client };

1import 'react-native-url-polyfill/auto';
2import { account } from './src/lib/appwrite';

1import React, { useState } from 'react';
2import { View, TextInput, Button, Text, StyleSheet, Alert } from 'react-native';
3import { account } from '../lib/appwrite';
4import { ID } from 'react-native-appwrite';
5 
6export default function AuthScreen() {
7  const [email, setEmail] = useState('');
8  const [password, setPassword] = useState('');
9  const [name, setName] = useState('');
10 
11  // Inscription
12  const handleSignUp = async () => {
13    try {
14      await account.create(
15        ID.unique(), // Génère un ID unique
16        email,
17        password,
18        name
19      );
20      Alert.alert('Succès', 'Compte créé avec succès !');
21      // Connecter automatiquement après inscription
22      await handleLogin();
23    } catch (error: any) {
24      Alert.alert('Erreur', error.message);
25    }
26  };
27 
28  // Connexion
29  const handleLogin = async () => {
30    try {
31      await account.createEmailPasswordSession(email, password);
32      Alert.alert('Succès', 'Connexion réussie !');
33      // Naviguer vers votre écran principal
34    } catch (error: any) {
35      Alert.alert('Erreur', error.message);
36    }
37  };
38 
39  // Déconnexion
40  const handleLogout = async () => {
41    try {
42      await account.deleteSession('current');
43      Alert.alert('Succès', 'Déconnexion réussie');
44    } catch (error: any) {
45      Alert.alert('Erreur', error.message);
46    }
47  };
48 
49  // Récupérer l'utilisateur actuel
50  const getCurrentUser = async () => {
51    try {
52      const user = await account.get();
53      Alert.alert('Utilisateur', `Connecté en tant que: ${user.email}`);
54    } catch (error: any) {
55      Alert.alert('Info', 'Aucun utilisateur connecté');
56    }
57  };
58 
59  return (
60    <View style={styles.container}>
61      <Text style={styles.title}>Appwrite Auth</Text>
62 
63      <TextInput
64        style={styles.input}
65        placeholder="Nom"
66        value={name}
67        onChangeText={setName}
68      />
69 
70      <TextInput
71        style={styles.input}
72        placeholder="Email"
73        value={email}
74        onChangeText={setEmail}
75        autoCapitalize="none"
76        keyboardType="email-address"
77      />
78 
79      <TextInput
80        style={styles.input}
81        placeholder="Mot de passe"
82        value={password}
83        onChangeText={setPassword}
84        secureTextEntry
85      />
86 
87      <View style={styles.buttonContainer}>
88        <Button title="Inscription" onPress={handleSignUp} />
89        <Button title="Connexion" onPress={handleLogin} />
90        <Button title="Déconnexion" onPress={handleLogout} color="red" />
91        <Button title="Utilisateur actuel" onPress={getCurrentUser} color="gray" />
92      </View>
93    </View>
94  );
95}
96 
97const styles = StyleSheet.create({
98  container: {
99    flex: 1,
100    justifyContent: 'center',
101    padding: 20,
102  },
103  title: {
104    fontSize: 24,
105    fontWeight: 'bold',
106    marginBottom: 20,
107    textAlign: 'center',
108  },
109  input: {
110    borderWidth: 1,
111    borderColor: '#ddd',
112    padding: 10,
113    marginBottom: 10,
114    borderRadius: 5,
115  },
116  buttonContainer: {
117    gap: 10,
118    marginTop: 10,
119  },
120});