React Native firebase phone authentication

Question

I am trying to build a React Native app using expo and firebase authentication. The email/password authentication is working fine but the phone number authentication is failing because of the applicationVerifier. I have tried to use 'react-native-firebase' but that is also not working and giving error.

[Error: RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment with DOM support.]

Thanks.

Mr.vdtarsariya Mr.vdtarsariya · Accepted Answer · 2019-08-31T05:51:27

You need to make .html file and put this code..

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Entering captcha</title>
</head>
<body>
    <p style="text-align: center; font-size: 1.2em;">Please, enter captcha for continue<p/>
    <button id="continue-btn" style="display:none">Continue to app</button>

    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "AIzaSyCy6HyqIV5Q_A5lllIxZgePSmKq-Q8eqiw",
      authDomain: "onsignledemo.firebaseapp.com",
      databaseURL: "https://onsignledemo.firebaseio.com",
      projectId: "onsignledemo",
      storageBucket: "onsignledemo.appspot.com",
      messagingSenderId: "223114260821"
      };
      firebase.initializeApp(config);
    </script>    <script>
        function getToken(callback) {
            var container = document.createElement('div');
            container.id = 'captcha';
            document.body.appendChild(container);
            var captcha = new firebase.auth.RecaptchaVerifier('captcha', {
                'size': 'normal',
                'callback': function(token) {
                    callback(token);
                },
                'expired-callback': function() {
                    callback('');
                }
            });
            captcha.render().then(function() {
                captcha.verify();
            });
        }
        function sendTokenToApp(token) {
            var baseUri = decodeURIComponent(location.search.replace(/^\?appurl\=/, ''));
            const finalUrl = location.href = baseUri + '/?token=' + encodeURIComponent(token);
            const continueBtn = document.querySelector('#continue-btn');
            console.log(finalUrl);
            // continueBtn.onclick = (event)=>{
            //     window.open(finalUrl,'_blank')
            // }
            continueBtn.style.display = "block";
        }
        document.addEventListener('DOMContentLoaded', function() {
            getToken(sendTokenToApp);
        });
    </script>
</body>
</html>

and put this file in to your running server and load your URL in to react- native Webview before sending confirmation code and after verify this CAPTCHA send confirmation code...

React Native firebase phone authentication

1 Answers