firebase / firebase-js-sdk

Firebase Javascript SDK
https://firebase.google.com/docs/web/setup
Other
4.82k stars 884 forks source link

React Native Recaptcha error: can'r find 'verify' of undefined #8419

Closed balramsinghindia closed 1 week ago

balramsinghindia commented 1 month ago

Operating System

17.0

Browser Version

Expo

Firebase SDK Version

10.12.5

Firebase SDK Product:

Auth

Describe your project's tooling

React Native, Expo and Firebase auth "@react-native-firebase/app": "^20.3.0", "@react-native-firebase/auth": "^20.3.0", "@react-navigation/native": "^6.1.18", "@react-navigation/stack": "^6.4.1", "expo": "~51.0.26", "expo-location": "^17.0.1", "expo-notifications": "^0.28.15", "expo-status-bar": "~1.12.1", "firebase": "^10.12.5", "react": "18.2.0", "react-native": "0.74.5", "react-native-maps": "1.14.0", "react-native-safe-area-context": "4.10.5", "react-native-screens": "3.31.1"

Describe the problem

I want to authenticate using phone number OTP only for my react native app I created last week. I'm using latest versions of React Native, Expo and Firebase/auth.

I'm following this document: https://firebase.google.com/docs/auth/web/phone-auth?hl=en&authuser=0&_gl=1*bgntt3*_ga*MTM4ODE1MDc1My4xNzIzMDM5OTgz*_ga_CW55HF8NVT*MTcyMzQyNDc0MC4xMC4xLjE3MjM0MjUwNzIuMzIuMC4w

I've tried using window.recaptchaVerifier and RecaptchaVerifier from firebase/auth but its not supporting in iOS. Error is Can't find 'verify' of undefined.

Steps and code to reproduce issue

const confirmationResult = signInWithPhoneNumber(auth, phoneNumber, applicationVerifier);

applicationVerifier as window.recaptchaVerifier and RecaptchaVerifier from firebase/auth are both resulting error that "Can't find 'verify' of undefined.

What is the best value of applicationVerifier for React Native that can support in both ios and android simulator as well as in real devices. This is mobile only app.

DellaBitta commented 3 weeks ago

Could you ensure that an update to window is within a useEffect hook, similar to the issue reported here?

If that doesn't solve the problem then could you please provide a standalone test app that reproduces the problem? Thank you!

DellaBitta commented 3 weeks ago

Oh, I'm sorry, I just noticed you're using React Native and not React JS.

Therefore, some more notes:

You should only use react-native-firebase or firebase but it looks like they're both listed in your dependencies. They are differnet products and will not work in conjunction with one another. Additionally, I believe that react-native-firebase doesn't work with Expo.

ReCaptcha isn't supported in the firebase Auth implementation for React Native, since there isn't a Window or DOM in ReactNative.

Is there a reason you need to use ReCaptcha in this environment? Thanks!

google-oss-bot commented 2 weeks ago

Hey @balramsinghindia. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

google-oss-bot commented 1 week ago

Since there haven't been any recent updates here, I am going to close this issue.

@balramsinghindia if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.