firebase client sdk app-check reCaptchaV3 not working with react native

[daruNBC]

[REQUIRED] Describe your environment

• Expo sdk: 47
• Firebase SDK version: 9.17.1
• Firebase Product: app-check

[REQUIRED] Describe the problem

I need to check the authenticity of my expo react native app using the provided firebase app-check service. Using ReCaptchaV3Provider fails with the error:

ReferenceError: Can't find variable: document ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. › Reloading apps Android Bundling complete 5968ms ERROR ReferenceError: Can't find variable: document ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Steps to reproduce:

1. create an expo react native app
2. install the firebase sdk
3. get a recaptcha public and secret key for a firebase project
4. get the token from the recaptcha provider using the public key

Relevant Code:

import { initializeApp, getApps, getApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
import { firebaseConfigs, reCaptchaKey } from "./firebase-config.js";

let app;
if (getApps().length < 1) {
  app = initializeApp(firebaseConfigs);
} else {
  app = getApp();
}

export const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider(reCaptchaKey),
  isTokenAutoRefreshEnabled: true,
});

I thought of using recaptcha as a custom provider like this

import { initializeAppCheck, CustomProvider} from "firebase/app-check";

const appCheckProvider = new CustomProvider({
   getToken: () =>
    // Logic to get the token from recaptcha using the public key
});

export const appCheck = initializeAppCheck(app, {
  provider: appCheckProvider,
  isTokenAutoRefreshEnabled: true,
});

But I can't quite figure out how to get the token from recaptcha. any help?

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[dwyfrequency]

@daruNBC In short, reCAPTCHA doesn't work in React Native so App Check would only be accessible through the React Native Firebase SDK https://rnfirebase.io/app-check/usage. That said, you appear to be using Expo Go in your current app which does not work with the React Native Firebase SDK so if possible, evaluate which is more important to your product Expo Go or App Check. Ultimately, if you need App Check, switch to the React Native Firebase SDK.

Additional information

• https://docs.expo.dev/guides/using-firebase/#when-to-use-firebase-js-sdk
• https://stackoverflow.com/questions/69508075/app-check-for-expo-react-native-app-using-firebase-js-sdk

[daruNBC]

@dwyfrequency I came to the exact same conclusion. Since I only need the firebase auth service I'll stick with expo go and later on switch to react native firebase for the app-check service. Thanks for the reply