How to Set Up Firebase Phone Authentication in React Native

Last updated on May 6, 2026

Phone authentication lets users sign in with a phone number and a one-time SMS code. It is useful for marketplaces, dating apps, delivery apps, booking apps, and social apps where users expect a fast mobile-first onboarding flow.

Quick Answer

Use Firebase Authentication with @react-native-firebase/auth. Enable the Phone provider in Firebase Console, configure the native Firebase files for iOS and Android, test with Firebase test phone numbers, and only then send real SMS messages to real devices.

If you are using an Instamobile app, start with the shared Firebase setup guide:

• Configure a Firebase Project
• Enable Firebase Auth
• Enable SMS Phone Authentication

Install React Native Firebase Auth

Install the Firebase app and auth packages:

yarn add @react-native-firebase/app @react-native-firebase/auth
cd ios && pod install

Then add the native Firebase config files:

• GoogleService-Info.plist for iOS;
• google-services.json for Android.

Keep separate Firebase apps for development, staging, and production when you can. That prevents test numbers, debug SHA keys, and draft rules from leaking into production.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Enable the Phone Provider

In Firebase Console:

1. Open Authentication.
2. Go to Sign-in method.
3. Enable Phone.
4. Add test phone numbers before sending real SMS.

Firebase test numbers are important because real SMS verification can trigger quota limits, anti-abuse checks, and billing noise during development.

Send the SMS Code

Keep the phone number in E.164 format, such as +15551234567.

import React, { useState } from 'react';
import { Button, TextInput, View } from 'react-native';
import auth from '@react-native-firebase/auth';

export function PhoneLoginScreen() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [confirmation, setConfirmation] = useState(null);

  async function sendCode() {
    const result = await auth().signInWithPhoneNumber(phoneNumber);
    setConfirmation(result);
  }

  return (
    <View>
      <TextInput
        value={phoneNumber}
        onChangeText={setPhoneNumber}
        keyboardType="phone-pad"
        placeholder="+15551234567"
      />
      <Button title="Send code" onPress={sendCode} />
    </View>
  );
}

Confirm the SMS Code

After Firebase sends the code, ask the user to enter it:

import React, { useState } from 'react';
import { Button, TextInput, View } from 'react-native';

export function CodeConfirmation({ confirmation }) {
  const [code, setCode] = useState('');

  async function confirmCode() {
    if (!confirmation) {
      return;
    }

    const credential = await confirmation.confirm(code);
    console.log('Signed in user:', credential?.user?.uid);
  }

  return (
    <View>
      <TextInput
        value={code}
        onChangeText={setCode}
        keyboardType="number-pad"
        placeholder="123456"
      />
      <Button title="Verify" onPress={confirmCode} />
    </View>
  );
}

Do not assume every code is six digits forever. Keep your UI flexible and show Firebase error messages in a user-friendly way.

Android and iOS Notes

On Android, Firebase can sometimes auto-detect the verification code. Your UI still needs a manual code field because auto verification is not guaranteed.

On iOS, make sure the app has the correct URL scheme from GoogleService-Info.plist, and test on a physical device before release.

For production Android builds, add the correct SHA-1 and SHA-256 fingerprints in Firebase. Debug, release, Play App Signing, and CI signing keys can all be different.

Production Checklist

• Use test phone numbers during development.
• Add rate limiting around "send code" UI.
• Disable repeated taps while the SMS request is in flight.
• Store the signed-in user's profile in Firestore only after auth succeeds.
• Link phone credentials to existing accounts when the user is already signed in.
• Monitor auth errors and SMS spend after launch.
• Add abuse controls before exposing phone auth to public traffic.

Useful References

• React Native Firebase Auth reference
• React Native Firebase signInWithPhoneNumber
• React Native Firebase phone auth snapshots
• Firebase Phone Auth for Web
• Instamobile Firebase setup docs

Looking for a custom mobile application?

Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.

Get in Touch

Conclusion

Firebase Phone Authentication works well in React Native when the native app configuration is correct and testing is disciplined. Use Firebase test numbers, keep the manual code entry path, configure real signing keys, and treat SMS as a production cost center rather than a free development detail.