React Native phone authentication with Firebase

Phone Authentication

Go to your Firebase dashboard and create an Android and iOS application named com.projectName.

You’ll get two files called googleservices.json for Android and googleServices-Info.plist for iOS. We’ll need these two files for integrating firebase services in our React Native application.

Enable phone authentication in your Firebase dashboard.

Enable Phone Number sign-in for your Firebase project

To sign in users by SMS, you must first enable the Phone Number sign-in method for your Firebase project:

1. In the Firebase console, open the Authentication section.
2. On the Sign-in Method page, enable the Phone Number sign-in method.

Installation for Android

Place the googleservices.json inside the android>app folder. Follow the below steps to initialize your Firebase in your Android version of the application.

Add the below code in build.gradle

'com.google.gms:google-services:4.3.10'

Add the below code in app/build.gradle

apply plugin: 'com.google.gms.google-services'

implementation platform('com.google.firebase:firebase-bom:29.0.3')

>> Cd android

>> ./gradlew signingReport

You have to copy both 'SHA1' and 'SHA-256' keys that belong to the 'debugAndroidTest' variant key option. Then, you can add those keys to the 'SHA certificate fingerprints' on your app in Firebase console.

For Release app we have to add release SHA1 and SHA-256 key to firebase fingerprints (Project setting > general)

Implementation

# send otp on phone async function signInWithPhoneNumber(phoneNumber) {

const confirmation = await auth().signInWithPhoneNumber(phoneNumber);

setConfirm(confirmation);

setOtpButton(false);

}

# auto fetched otp

if(route && route.params && route.params.mobile){

auth().verifyPhoneNumber('+91' + route.params.mobile)

.then((credential) => {

console.log(credential.code);

setCode(credential.code)

}) // onVerificationCompleted

.catch(() => {

console.log("bye");

});

}

# when otp verified

async function confirmCode() {

if (!code && code == '') {

// setOtpError("Please enter otp");

toast.current.show("Please enter otp", {

type: "danger",

duration: 1000,

});

return;

}

verify();

}