Firebase Phone Auth Not Workng in Vue js

Question

Below is the error shown

Uncaught TypeError: Cannot read property 'auth' of undefined
at HTMLButtonElement.eval (Login.vue?7463:65)
at HTMLButtonElement.dispatch (jquery.js?1157:5429)
at HTMLButtonElement.elemData.handle (jquery.js?1157:5233)

Below is my code

mounted() {
    window.$("#submit").click(function() {
      var input = window
        .$("#inputPhone")
        .val()
        .trim();
      if (input.length > 13 || input.length < 10 || isNaN(input)) {
        alert("Please enter a valid phone no");
      } else {
        window.$("#phone").hide();
        window.$("#code").show();

        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
          "submit",
          {
            size: "invisible"
          }
        );

        //         window.recaptchaVerifier = new firebase.auth().RecaptchaVerifier('submit', {
        //   'size': 'invisible',
        //   'callback': function(response) {
        //     // reCAPTCHA solved, allow signInWithPhoneNumber.
        //     console.log(response);
        //   }
        // });
        firebase
          .auth()
          .signInWithPhoneNumber(input, window.recaptchaVerifier)
          .then(function(confirmationResult) {
            window.confirmationResult = confirmationResult;
            console.log(confirmationResult);
          });
        window.$("#login").click(function() {
          var inp = window
            .$("")
            .val()
            .trim();
          if (inp.length === 0) {
            alert("Please enter code");
          } else {
            var myFunction = function() {
              window.confirmationResult
                .confirm(inp)
                .then(function(result) {
                  console.log(result);
                })
                .catch(function(error) {
                  console.log(error);
                });
            };
            myFunction();
          }
        });
      }
    });
}

Please look into my code and help me.
Below is the code of config i imported
Below is the code of config i imported
Below is the code of config i imported
Below is the code of config i imported
Below is the code of config i imported

import { firebase } from "../firebase";

Error is in below lines of code as per chrome developer tools

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      "submit",
      {
        size: "invisible"
      }
    );

Answer 1

Have you correctly set up Auth?
Setup Firebase Auth

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script>
</body>

Firebase Phone Auth Not Workng in Vue js

Question

1 answers

solution1
0 2020-05-06 18:28:00

Firebase Phone Auth Not Workng in Vue js

Question

1 answers

solution1 0 2020-05-06 18:28:00

solution1
0 2020-05-06 18:28:00