Partage
  • Partager sur Facebook
  • Partager sur Twitter

[react native] Problème Sign up Firebase expo

    27 février 2022 à 12:17:39

    Bonjour, 

    J'essaye de créer un système de Sign up/Sign in avec firebase, mon code est le suivant :

    import React, { useState } from 'react';
    import { Text, View, TextInput, Button, StyleSheet, TouchableOpacity, Platform } from "react-native";
    import { FirebaseRecaptchaVerifierModal } from "expo-firebase-recaptcha";
    import firebase from "firebase/app";
    import { useRef } from 'react';
    
    import { initializeApp, getApps, getApp } from "firebase/app";
    
    import { getAuth, createUserWithEmailAndPassword, PhoneAuthProvider, verifyPhoneNumber } from "firebase/auth";
    
    
    
    const firebaseConfig = {
      apiKey: "",
        authDomain: "XXXXX-1bd3c.firebaseapp.com",
        databaseURL: "https://XXXXX-1bd3c-default-rtdb.europe-west1.firebasedatabase.app",
        projectId: "XXX-1bd3c",
        storageBucket: "XXXX-1bd3c.appspot.com",
        messagingSenderId: "216430XXXX6",
        appId: "1:216430389096:web:ea8a9d68cf1caf8XXXXX",
        measurementId: "G-SN2Q56XXXX"
    };
    
    getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();
    
    const app = initializeApp(firebaseConfig);
    
    
    const auth = getAuth();
    
    //const firebase = require('firebase');
    
    
    // Initialize Firebase JS SDK
    // https://firebase.google.com/docs/web/setup
    
    export default function App() {
    
      //const defaultAuth = firebase.auth();
    
    
    
      const recaptchaVerifier = useRef(null);
      const [phoneNumber, setPhoneNumber] = useState();
      const [verificationId, setVerificationId] = useState();
      const [verificationCode, setVerificationCode] = useState();
     // const firebaseConfig = firebase.apps.length ? firebase.app().options : undefined;
      const [message, showMessage] = useState((!firebaseConfig || Platform.OS === 'web')
        ? { text: "To get started, provide a valid firebase config in App.js and open this snack on an iOS or Android device."}
        : undefined);
    
      return (
        <View style={{ padding: 20, marginTop: 50 }}>
          <FirebaseRecaptchaVerifierModal
            ref={recaptchaVerifier}
            firebaseConfig={firebaseConfig}
          />
          <Text style={{ marginTop: 20 }}>Enter phone number</Text>
          <TextInput
            style={{ marginVertical: 10, fontSize: 17 }}
            placeholder="+1 999 999 9999"
            autoFocus
            autoCompleteType="tel"
            keyboardType="phone-pad"
            textContentType="telephoneNumber"
            onChangeText={(phoneNumber) => setPhoneNumber(phoneNumber)}
          />
          <Button
            title="Send Verification Code"
            disabled={!phoneNumber}
            onPress={async () => {
              // The FirebaseRecaptchaVerifierModal ref implements the
              // FirebaseAuthApplicationVerifier interface and can be
              // passed directly to `verifyPhoneNumber`.
              try {
                const phoneProvider = PhoneAuthProvider.PROVIDER_ID; 
                const verificationId = await phoneProvider.verifyPhoneNumber(
                  phoneNumber,
                  recaptchaVerifier.current
                );
                setVerificationId(verificationId);
                showMessage({
                  text: "Verification code has been sent to your phone.",
                });
              } catch (err) {
                showMessage({ text: `Error: ${err.message}`, color: "red" });
                console.log(err.message);
              }
            }}
          />
          <Text style={{ marginTop: 20 }}>Enter Verification code</Text>
          <TextInput
            style={{ marginVertical: 10, fontSize: 17 }}
            editable={!!verificationId}
            placeholder="123456"
            onChangeText={setVerificationCode}
          />
          <Button
            title="Confirm Verification Code"
            disabled={!verificationId}
            onPress={async () => {
              try {
                const credential = firebase.auth.PhoneAuthProvider.credential(
                  verificationId,
                  verificationCode
                );
                await firebase.auth().signInWithCredential(credential);
                showMessage({ text: "Phone authentication successful 👍" });
              } catch (err) {
                showMessage({ text: `Error: ${err.message}`, color: "red" });
              }
            }}
          />
          {message ? (
            <TouchableOpacity
              style={[StyleSheet.absoluteFill, { backgroundColor: 0xffffffee, justifyContent: "center" }]}
              onPress={() => showMessage(undefined)}>
              <Text style={{color: message.color || "blue", fontSize: 17, textAlign: "center", margin: 20, }}>
                {message.text}
              </Text>
            </TouchableOpacity>
          ) : undefined}
        </View>
      );
    }
    
    
    

    L'erreur que je reçois est : phoneProvider.verifyPhoneNumber is not a function. (In 'phoneProvider.verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)', 'phoneProvider.verifyPhoneNumber' is undefined)

    J'ai cherché partout sur Google, mais je n'ai pas trouvé de solutions. Je me suis inspiré de ce lien : https://snack.expo.dev/@sid/firebase-phone-auth

    -
    Edité par AmineKandriRody 27 février 2022 à 16:27:54

    • Partager sur Facebook
    • Partager sur Twitter

    [react native] Problème Sign up Firebase expo

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown