How To Setup Firebase For Mobile Number Authentication?
Table Of Contents:
- How To Show The Effects Of Changes Made In App.tsx File?
- How To Increase The Text Size In VS Code?
- How To Add Comments In VS Code?
- How To Use Google Fonts In React Native?
Step-1: Create & Configure Firebase Project
- Go To Firebase Console To Create A New Project:
https://console.firebase.google.com/
(2) Click On Get Started With Firebase Project.
(3) Enter Your Project Name.
Step-2: Register Your App With Firebase
(1) Click On The Android Icon For Android Project
(2) Enter Your Package Name
- You can find your package name from below location. Form your Android project.
app/build.gradle
- Here my package name is “com.ammyai”
- You need to generate Debug signing certificate SHA-1:
cd android
./gradlew signingReport
(3) Download And Then Add Config File:
Since we are using VS Code our project folder will be like this.
Place your downloaded google-services.json file inside the app folder.
- After placing the file, open a terminal in VS Code and run
cd android
./gradlew clean
cd ..
npx react-native run-android
(4) Add Firebase SDK
Choose Groovy Option
Open AMMYAI/android/build.gradle and add the changes
Open AMMYAI/android/app/build.gradle and add the changes
Sync The Gradle Files:
cd android
./gradlew clean
./gradlew build
cd ..
npx react-native run-android
(5) Continue With Console
Step-3: Enable Phone Number sign-in for your Firebase project
(1) In the Firebase console, open the Authentication section.
Step-4: Install Required Libraries
npm install @react-native-firebase/app
npm install @react-native-firebase/auth
Step-5: Play Integrity API
Windows
./gradlew signingReportOr
keytool -list -v -keystore F:\AmmyAI\AmmyAISourceCode\AmmyAI\android\app\debug.keystore -alias androiddebugkey -storepass android -keypass android
Step-6: Permission Setup
For Android, add the following permissions in android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECEIVE_SMS"/>
<uses-permission android:name="android.permission.READ_SMS"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
Step-7: Test You Application
- Since you are using Android emulator OTP will not be sent to your device or the emulator.
- What you can do is you can add the dummy mobile number and the 6 digit default otp for it.
- When user enter that number with the default otp authentication will be successful.
- After the successful login, user will be added to the firebase.
