JSFiddle - React, Tailwind, and code Playground

by Shashank Shekhar

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Firebase</title>
    </head>
    <body>

        <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>
          // Initialize Firebase
          var config ={
    apiKey: "AIzaSyCxO_pX1VVnImzSA3_EX8BTymhXnOx65Ck",
    authDomain: "ltxapp-a87d3.firebaseapp.com",
    databaseURL: "https://ltxapp-a87d3.firebaseio.com",
    projectId: "ltxapp-a87d3",
    storageBucket: "ltxapp-a87d3.appspot.com",
    messagingSenderId: "580065380242"
  };
          firebase.initializeApp(config);
        </script>
        <script charset="utf-8">
            window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
              'size': 'invisible',
              'callback': function(response) {
                // reCAPTCHA solved, allow signInWithPhoneNumber.
                //onSignInSubmit();
                // phoneSignIn()
                phoneSignIn()

              }
            });
            // 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">
            function phoneSignIn(){
            var phoneNumber = '{{phone number here...}}';
            var appVerifier = window.recaptchaVerifier;
            firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
               ...