🔥 Error: [auth/invalid-app-credential] Invalid token while using signInWithPhoneNumber(phoneNumber)

[PranavSRokade]

Issue

I am encountering an issue while calling auth().signInWithPhoneNumber(phoneNumber) where Firebase Phone Authentication works perfectly on:
iOS simulator
Android real device
Android emulator

However, on a real iOS device, I get the following error when trying to verify the phone number:
[Error: [auth/invalid-app-credential] Invalid token.]

What I Have Tried

1. Followed all the documentation for setting up Phone Authentication for iOS from here, including uploading the APNs Key
2. Set the APNS token type to AuthAPNSTokenType.unknown as suggested here

---

Project Files

Javascript

Click To Expand

package.json:

{
"name": "campconnection_mobile",
"version": "1.0.2",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start --reset-cache",
"test": "jest"
},
"dependencies": {
"@craftzdog/react-native-buffer": "^6.0.5",
"@invertase/react-native-apple-authentication": "^2.4.0",
"@react-native-async-storage/async-storage": "^2.0.0",
"@react-native-clipboard/clipboard": "^1.16.1",
"@react-native-community/blur": "^4.4.1",
"@react-native-community/datetimepicker": "^8.2.0",
"@react-native-community/netinfo": "^11.4.1",
"@react-native-firebase/app": "^20.5.0",
"@react-native-firebase/auth": "^20.5.0",
"@react-native-firebase/firestore": "^20.5.0",
"@react-native-firebase/functions": "^21.6.0",
"@react-native-firebase/storage": "^21.5.0",
"@react-native-google-signin/google-signin": "^11.0.1",
"@react-native-picker/picker": "^2.9.0",
"@react-native/gradle-plugin": "^0.76.1",
"@react-navigation/bottom-tabs": "^6.6.1",
"@react-navigation/native": "^6.1.18",
"@react-navigation/stack": "^6.4.1",
"@shopify/flash-list": "^1.7.2",
"@types/react-native-html-to-pdf": "^0.8.3",
"@types/suncalc": "^1.9.2",
"add": "^2.0.6",
"date-fns": "^4.1.0",
"expo": "^51.0.0",
"expo-av": "~14.0.7",
"expo-clipboard": "~6.0.3",
"expo-file-system": "~17.0.1",
"expo-speech": "~12.0.2",
"gapi-script": "^1.2.0",
"react": "18.3.1",
"react-native": "^0.75.3",
"react-native-asset": "^2.1.1",
"react-native-config": "^1.5.3",
"react-native-date-picker": "^5.0.7",
"react-native-document-picker": "^9.3.1",
"react-native-drax": "^0.10.3",
"react-native-fast-image": "^8.6.3",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.19.0",
"react-native-html-to-pdf": "^0.12.0",
"react-native-image-picker": "^7.1.2",
"react-native-linear-gradient": "^2.8.3",
"react-native-maps": "^1.20.1",
"react-native-modal": "^13.0.1",
"react-native-modal-datetime-picker": "^18.0.0",
"react-native-month-year-picker": "^1.9.0",
"react-native-pell-rich-editor": "^1.9.0",
"react-native-permissions": "^5.1.0",
"react-native-reanimated": "~3.16.1",
"react-native-render-html": "6.3.4",
"react-native-safe-area-context": "^4.11.0",
"react-native-screens": "^3.34.0",
"react-native-share": "^12.0.9",
"react-native-svg": "^15.7.1",
"react-native-swiper": "^1.6.0",
"react-native-video": "^6.8.2",
"react-native-vision-camera": "^4.6.1",
"react-native-webview": "^13.12.4",
"reanimated-color-picker": "^3.0.4",
"rfdc": "^1.4.1",
"rn-fetch-blob": "^0.12.0",
"suncalc": "^1.9.0",
"yarn": "^1.22.22"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/babel-preset": "0.75.3",
"@react-native/eslint-config": "0.75.3",
"@react-native/metro-config": "0.75.3",
"@react-native/typescript-config": "0.75.3",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"babel-plugin-module-resolver": "^5.0.2",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
},
"packageManager": "[email protected]"
}

# N/A

firebase.json for react-native-firebase v6:

# N/A

iOS

Click To Expand

ios/Podfile:

• I'm not using Pods
• I'm using Pods and my Podfile looks like:

require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip
platform :ios, min_ios_version_supported
prepare_react_native_project!

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'campconnection_mobile' do
  use_expo_modules!
  post_integrate do |installer|
    begin
      expo_patch_react_imports!(installer)
    rescue => e
      Pod::UI.warn e
    end
  end
  inherit! :complete
  config = use_native_modules!
  
  use_frameworks! :linkage => :static
  $RNFirebaseAsStaticFramework = true
  pod 'GoogleUtilities', :modular_headers => true

  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'campconnection_mobileTests' do
    inherit! :complete
    # Pods for testing
  end
  
  target 'campconnection_mobileDev' do
    inherit! :complete
  end
  
  target 'campconnection_mobileStaging' do
    inherit! :complete
  end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )

    # Fix for BoringSSL-GRPC issue
    installer.pods_project.targets.each do |target|
      if target.name == 'BoringSSL-GRPC'
        target.source_build_phase.files.each do |file|
          if file.settings && file.settings['COMPILER_FLAGS']
            flags = file.settings['COMPILER_FLAGS'].split
            flags.reject! { |flag| flag == '-GCC_WARN_INHIBIT_ALL_WARNINGS' }
            file.settings['COMPILER_FLAGS'] = flags.join(' ')
          end
        end
      end
    end
  end
end

AppDelegate.m:

#import "AppDelegate.h"
#import <Firebase.h>
#import <React/RCTBundleURLProvider.h>
#import <GoogleSignIn/GoogleSignIn.h>
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];
  self.moduleName = @"campconnection_mobile";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  return [self bundleURL];
}

- (NSURL *)bundleURL
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@".expo/.virtual-metro-entry"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

---

Android

Click To Expand

Have you converted to AndroidX?

• my application is an AndroidX application?
• I am using android/gradle.settings jetifier=true for Android compatibility?
• I am using the NPM package jetifier for react-native compatibility?

android/build.gradle:

buildscript {
    ext {
        buildToolsVersion = "34.0.0"
        minSdkVersion = 23
        compileSdkVersion = 34
        targetSdkVersion = 34
        ndkVersion = "26.1.10909125"
        kotlinVersion = "2.0.21"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
        classpath("com.google.gms:google-services:4.4.2")
    }
}

apply plugin: "com.facebook.react.rootproject"

android/app/build.gradle:

apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"
apply plugin: 'com.google.gms.google-services'

project.ext.envConfigFiles = [
   production: ".env.production",
   staging: ".env.staging",
   development: ".env.development"
]
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
/**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
 */
react {
    /* Folders */
    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
    // root = file("../../")
    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
    // reactNativeDir = file("../../node_modules/react-native")
    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
    // codegenDir = file("../../node_modules/@react-native/codegen")
    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
    // cliFile = file("../../node_modules/react-native/cli.js")

    /* Variants */
    //   The list of variants to that are debuggable. For those we're going to
    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
    // debuggableVariants = ["liteDebug", "prodDebug"]

    /* Bundling */
    //   A list containing the node command and its flags. Default is just 'node'.
    // nodeExecutableAndArgs = ["node"]
    //
    //   The command to run when bundling. By default is 'bundle'
    // bundleCommand = "ram-bundle"
    //
    //   The path to the CLI configuration file. Default is empty.
    // bundleConfig = file(../rn-cli.config.js)
    //
    //   The name of the generated asset file containing your JS bundle
    // bundleAssetName = "MyApplication.android.bundle"
    //
    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
    // entryFile = file("../js/MyApplication.android.js")
    //
    //   A list of extra flags to pass to the 'bundle' commands.
    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
    // extraPackagerArgs = []

    /* Hermes Commands */
    //   The hermes compiler command to run. By default it is 'hermesc'
    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
    //
    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
    // hermesFlags = ["-O", "-output-source-map"]

    /* Autolinking */
    autolinkLibrariesWithApp()
    //
    // Added by install-expo-modules
    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", rootDir.getAbsoluteFile().getParentFile().getAbsolutePath(), "android", "absolute"].execute(null, rootDir).text.trim())
    cliFile = new File(["node", "--print", "require.resolve('@expo/cli')"].execute(null, rootDir).text.trim())
    bundleCommand = "export:embed"
}

/**
 * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore (JSC)
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US. Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdk rootProject.ext.compileSdkVersion

    flavorDimensions "default"
    productFlavors {
        production {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.campconnection_mobile"
            targetSdkVersion rootProject.ext.targetSdkVersion
        }
        staging {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.campconnection_mobile.staging"
            targetSdkVersion rootProject.ext.targetSdkVersion
        }
        development {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.campconnection_mobile.development"
            targetSdkVersion rootProject.ext.targetSdkVersion
        }
    }

    namespace "com.campconnection_mobile"
    defaultConfig {
        applicationId "com.campconnection_mobile"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 19
        versionName "1.0.13"
        resValue "string", "build_config_package", "com.campconnection_mobile"
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
         release {
        if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
            storeFile file(MYAPP_UPLOAD_STORE_FILE)
            storePassword MYAPP_UPLOAD_STORE_PASSWORD
            keyAlias MYAPP_UPLOAD_KEY_ALIAS
            keyPassword MYAPP_UPLOAD_KEY_PASSWORD
        }
    }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
            matchingFallbacks = ['debug', 'release']
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")
    implementation(platform("com.google.firebase:firebase-bom:33.3.0"))
    implementation 'com.google.firebase:firebase-auth'
    implementation 'com.google.firebase:firebase-firestore'

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

android/settings.gradle:

pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
rootProject.name = 'campconnection_mobile'
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')

apply  from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
useExpoModules()

MainApplication.kt:

package com.campconnection_mobile
import android.content.res.Configuration
import expo.modules.ApplicationLifecycleDispatcher
import expo.modules.ReactNativeHostWrapper

import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.soloader.SoLoader

class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      ReactNativeHostWrapper(this, object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              // Packages that cannot be autolinked yet can be added manually here, for example:
              // add(MyReactNativePackage())
            }

        override fun getJSMainModuleName(): String = "index"

        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      })

  override val reactHost: ReactHost
    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)

  override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, false)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
    ApplicationLifecycleDispatcher.onApplicationCreate(this)
  }

  override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
  }
}

AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:allowBackup="false"
        android:theme="@style/AppTheme"
        android:supportsRtl="true">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
            android:launchMode="singleTask"
            android:windowSoftInputMode="adjustResize"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


    </application>
</manifest>

---

Environment

Click To Expand

react-native info output:

System:
  OS: macOS 15.3.2
  CPU: (16) arm64 Apple M3 Max
  Memory: 1.37 GB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.9.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 3.6.4
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.3
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.09.30.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "27"
      - "28"
      - "30"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.5
    wanted: ^0.75.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

• Platform that you're experiencing the issue on:
  • [x ] iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• react-native-firebase version you're using that has this issue:
  • 20.5.0
• Firebase module(s) you're using that has the issue:
  • Auth (Phone Authentication)
• Are you using TypeScript?
  • Y & 5.0.4

---

[mikehardy]

Hi there

"@react-native-firebase/app": "^20.5.0",
"@react-native-firebase/auth": "^20.5.0",
"@react-native-firebase/firestore": "^20.5.0",
"@react-native-firebase/functions": "^21.6.0",
"@react-native-firebase/storage": "^21.5.0",

That's not a valid version setup, and you are logging an issue on old versions --> https://invertase.io/blog/react-native-firebase-versioning

Set the APNS token type to AuthAPNSTokenType.unknown as suggested here

That's not something in our documentation and it has never been necessary for me. I wouldn't recommend it

[PranavSRokade]

Hi Mike,
Thanks for the quick reply. Updating the libraries to the latest versions seemed to have fixed the issue in iOS, the signInWithPhone method now runs perfectly fine.

But this broke my Android build. When I try to build in android I end up getting the following error
Task :app:compileProductionDebugKotlin FAILED .../META-INF/java.com.google.android.gmscore.integ.client.firebase-auth-api_firebase-auth-api.kotlin_moduleModule was compiled with an incompatible version of Kotlin. The binary version of its metadata is 2.1.0, expected version is 1.9.0.

Steps I’ve Tried So Far:

• Updated Kotlin to 2.1.0 in app/build.gradle
• Updated AGP (Android Gradle Plugin) to 8.7.0 to match Gradle versions
• Ensured kotlin-gradle-plugin is set to 2.1.0 in dependencies
• Updated the Gradle wrapper to 8.9 to match with AGP versions

[mikehardy]

Updated Kotlin to 2.1.0 in app/build.gradle

@PranavSRokade This seems counterintuitive, but set kotlinVersion to 2.0.21 (latest in the 2.0.x series) and it will work. Discovered this while troubleshooting similar over in react-native-google-mobile-ads (2.0.x appears to be able to consume 2.1.x artifacts, but still has great backwards-compatibility with react-native versions that are still in support, using kotlin 2.1.x requires a patch to react-native for older versions, or the not-released-yet 0.79 which has the patch in it)

[PranavSRokade]

I tried changing the kotlinVersion to 2.0.21 in the android/build.gradle. But I still get the same error.
I have edited my post to include all the relevant Android files.

[mikehardy]

I won't have time to fix your project-specific build error, apologies.
But this build demonstrator I maintain is what I use to show people what does work, as it reproducibly runs + builds correctly every time using current versions of everything

https://github.com/mikehardy/rnfbdemo/blob/main/make-demo.sh

You can check the comments, and run the script and it will generate a clean react-native + react-native-firebase project that has no problems building with android

If you examine the differences between the generated project and your project, it should work

I don't reproduce a build error in that demonstrator or in our e2e tests so I'm going to close this as it won't result in a change in the repo and so isn't really actionable here