JSFiddle - React, Tailwind, and code Playground

by Shashank Shekhar

HTML

<input type="submit" class="sign-in-button" id="sign-in-button" value="sign in with phone" />
        
        <script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>
        <script>
          
        </script>
        <script charset="utf-8">
           
            // window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
            //   'size': 'normal',
            //   'callback': function(response) {
            //     // reCAPTCHA solved, allow signInWithPhoneNumber.
            //     // ...
            //   },
            //   'expired-callback': function() {
            //     // Response expired. Ask user to solve reCAPTCHA again.
            //     // ...
            //   }
            // });
        </script>
        <script charset="utf-8">
           
        </script>

JavaScript

// Initialize Firebase
          var config = {
            apiKey: "{{firebase api-key here..}}",
            authDomain: "{{firebase auth domain here...}}",
            databaseURL: "{{firebase database url here...}}",
            projectId: "{{firebase project id here..}}",
            storageBucket: "{{storage bucket url here}}",
            messagingSenderId: "{{messageing sender Id here}}"
          };
          firebase.initializeApp(config);
          
 window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
              'size': 'invisible',
              'callback': function(response) {
                // reCAPTCHA solved, allow signInWithPhoneNumber.
                //onSignInSubmit();
                // phoneSignIn()
                phoneSignIn()

              }
            });
  function phoneSignIn(){
            var phoneNumber = '{{phone number here...}}';
            var appVerifier = window.recaptchaVerifier;
            firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
                .then(function (confirmationResult) {
                  // SMS sent. Prompt user to type the code from the message, then sign the
                  // user in with confirmationResult.confirm(code).
                  window.confirmationResult = confirmationResult;
                  console.log(window.confirmationResult)
                }).catch(function (error) {
                   console.log('ERROR:::')
                   console.log(error)
                  // Error; SMS not sent
                  // ...
                });
                }