I have developed an Expo app (SDK 51) using React Native Firebase for OTP authentication. However, I’m experiencing several issues when using the build apk-
The app frequently crashes when I attempt to run it.
- Occasionally, the app does run, but the OTP only works with the test phone number. It doesn’t work with any other numbers and doesnt get sent to them.
- Even when using the test number, the app crashes once the OTP is confirmed.
But when use the development build on the emulator the verfication works for the test users, and it navigates to the signup page. But for other users it gives this error-
[Error: [auth/app-not-authorized] This app is not authorized to use Firebase Authentication. Please verify that the correct package name, SHA-1, and SHA-256 are configured in the Firebase Console. [ Invalid app info in play_integrity_token ]]
I am using the latest versions of the React Native Firebase packages.
I have added the google services json to the root of my project and added the project’s sha1 and sha256 keys to firebase.
When I was using trying to use firebase otp auth with the web app packages using the config file everything worked fine. But I was unable to build the project as it was giving an error saying those packages are not supported now.
Any guidance or solutions to resolve these issues would be greatly appreciated.
Here is the code for my login screen –
import React, { useState, useCallback } from 'react';
import { View, Text, TextInput, TouchableOpacity, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { themeColors } from '../theme';
import auth from '@react-native-firebase/auth';
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios';
import i18n from '../i18nConfig';
export default function Login({ navigation }) {
const [phoneNumber, setPhoneNumber] = useState('');
const [confirm, setConfirm] = useState(null);
const [verificationCode, setVerificationCode] = useState('');
const handleGetOtp = useCallback(async () => {
try {
const confirmation = await auth().signInWithPhoneNumber('+91' + phoneNumber);
setConfirm(confirmation);
Alert.alert(i18n.t('otpSent'));
} catch (err) {
console.log(err);
Alert.alert(i18n.t('error'), i18n.t('otpSendError'));
}
}, [phoneNumber]);
const handleSubmitOtp = useCallback(async () => {
try {
await confirm.confirm(verificationCode);
Alert.alert(i18n.t('authSuccess'));
await AsyncStorage.setItem('login', 'true');
await AsyncStorage.setItem('phone', phoneNumber);
let userType = "supplier";
const response = await axios.post(
'api url',
{ phoneNumber, userType }
);
navigation.navigate('Home');
} catch (err) {
console.log('signup');
if (err.response && err.response.status === 404) {
Alert.alert(i18n.t('userNotRegistered'));
navigation.navigate('SignUp');
} else {
Alert.alert(err)
Alert.alert(i18n.t('error'), i18n.t('authError'));
}
}
}, [confirm, verificationCode, phoneNumber, navigation]);
return (
);
}