CODEWITHSUNDEEP
firebasereact-nativeexporecaptchainvisible-recaptcha
Sebastian Müller
Sebastian Müller

Reputation: 1

React Native (Expo) Firebase Phone Auth with invisible reCaptcha

Since Expo SDK 37 Firebase Phone Auth is supported, of course reCaptcha is linked to it. Unfortunately Expo only offers the possibility to use a modal to display the reCaptcha as far as I have seen.

Since this modal does not look very nice, is there a way to make the reCaptcha invisible? Or is it possible to display it outside the modal?

Upvotes: 0

Views: 2222

Answers (2)

Adnomination
Adnomination

Reputation: 153

To make the reCaptcha invisible, you can pass prop as below:

<FirebaseRecaptchaVerifierModal
  ref={/* store ref for later use */}
  firebaseConfig={/* firebase web config */}
  attemptInvisibleVerification={true | false /* experimental - this will make it invisible */}
/>

You can learn more about it from https://docs.expo.io/versions/latest/sdk/firebase-recaptcha/

Upvotes: 1

Martin Dimitrov
Martin Dimitrov

Reputation: 435

You can create your own <Modal> or display the <FirebaseRecaptcha> component inline.

Here what Expo documentation says:

<FirebaseRecaptchaVerifierModal> has limited customisation options. You cannot change its appearance, but you can change the title and the cancel-label.

<FirebaseRecaptchaVerifierModal
  ref={...}
  firebaseConfig={...}
  title='Prove you are human!'
  cancelLabel='Close'
/>

If you want a custom look & feel, then create your own <Modal> or display the <FirebaseRecaptcha> component inline in your screen. Make sure to reserve enough space for the widget as it can not only display the compact "I'm not a robot" UI but also the full verification UI requiring users to select images.

Upvotes: 0

Related Questions