I’m having an issue with implementing SMS authentication through Firebase. I’ve been trying to study the documentation and use Google to find a solution, but so far without success. I have a simple page with one input field and a "Send" button. I’m developing an Android app using Expo.
However, when trying to initialize Firebase Auth for React Native, Expo gives me the following error:
WARN [2023-09-05T05:59:10.503Z] @firebase/auth: Auth (10.3.1):
You are initializing Firebase Auth for React Native without providing AsyncStorage. Auth state will default to memory persistence and will not persist between sessions. In order to persist auth state, install the package "@react-native-async-storage/async-storage" and provide it to initializeAuth:
import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});
Could you please explain how I can solve this issue? I’ve already installed the package "@react-native-async-storage/async-storage", but I don’t understand how to properly use it to initialize Firebase Auth.
Thank you in advance for your help!
import React, { useState } from "react";
import { Alert, Button, StyleSheet, TextInput, View } from "react-native";
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPhoneNumber } from "firebase/auth";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
const firebaseConfig = {
apiKey: "AIzaSyD5Qg_t9KR4TmLr2p14E2aODO9UV5RehUE",
authDomain: "sharq-9ec25.firebaseapp.com",
databaseURL: "https://sharq-9ec25-default-rtdb.firebaseio.com",
projectId: "sharq-9ec25",
storageBucket: "sharq-9ec25.appspot.com",
messagingSenderId: "613514564466",
appId: "1:613514564466:web:c76f60d1a5d151689e83eb",
measurementId: "G-BGWW40HYBJ"
};
initializeApp(firebaseConfig); // initialize Firebase
const asyncStorage = AsyncStorage;
const FirebasePhoneAuth = () => {
const [phoneNumber, setPhoneNumber] = useState(""); // для номера телефона
const [verificationCode, setVerificationCode] = useState(""); // для кода подтверждения
const [confirmationResult, setConfirmationResult] = useState(null); // для результатов
const sendVerificationCode = async () => {
const auth = getAuth();
const appVerifier = null; // reCAPTCHA
try {
// Отправка кода подтверждения на указанный номер телефона
const confirmation = await signInWithPhoneNumber(auth, phoneNumber, appVerifier);
setConfirmationResult(confirmation); // Сохранение результатов подтверждения для последующего использования
} catch (error) {
Alert.alert("Ошибка", "Не удалось отправить код подтверждения");
}
};
// Подтверждение кода подтверждения
const confirmVerificationCode = async () => {
try {
await confirmationResult.confirm(verificationCode);
Alert.alert("Успех", "Номер телефона успешно подтвержден");
// Сохранение номера телефона в AsyncStorage
await asyncStorage.setItem("phoneNumber", phoneNumber);
} catch (error) {
Alert.alert("Ошибка", "Не удалось подтвердить номер телефона");
}
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Введите номер телефона"
onChangeText={(value) => setPhoneNumber(value)}
/>
<Button onPress={sendVerificationCode} title="Отправить код подтверждения" />
{confirmationResult && (
<>
<TextInput
style={styles.input}
placeholder="Введите код подтверждения"
onChangeText={(value) => setVerificationCode(value)}
/>
<Button onPress={confirmVerificationCode} title="Подтвердить код подтверждения" />
</>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
input: {
width: "80%",
height: 40,
borderWidth: 1,
marginBottom: 20,
paddingHorizontal: 10,
},
});
export default FirebasePhoneAuth;
2
Answers
When you call
getAuth()
for an instance ofApp
that hasn’t initialized itsAuth
object, it will callinitializeAuth()
for you. In your code, you do this insidesendVerificationCode()
which leads to the warning you see.To make sure that
initializeAuth()
is called before you consume it usinggetAuth()
in any of your components, you should place it immediately below the call toinitializeApp()
. It’s best practice to do this in a common place such as a file calledfirebase.js
or similar:Then in your component, you’d bring it in and use as normal:
I encountered the same problem I just solved it thanks to the previous comment
Before I created a file at the root of my folder that I named fireConfig.js the file contains the following code
Then in another file named form.js
always at the root of my folder create the following code