'Can not connect to firebase authentication browser module

Hey everyone I am learning firebase phone authentication in web app. I have an error that I can not find the solution. I imported the browser module for firebase authentication as show in the first picture but when I checked the console I got an error that said my app not connected to firebase authentication module. How can I solve this problem ? Import from firebase browser module

console error

firebase firebase-authentication

Solution 1:^[1]

I couldn't reproduce your error, but I was successful in connecting to the authentication module that can run, which is the point of the matter.

Steps:

Enable Phone Number sign-in for your Firebase project https://firebase.google.com/docs/auth/web/phone-auth#enable-phone-number-sign-in-for-your-firebase-project

Initialize Firebase

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.11/firebase-app.js";


  // TODO: Replace the following with your app's Firebase project configuration
  const firebaseConfig = {
    apiKey: "A#######YOUR#API#KEY#BUT#RESPONSE##SUCCESSFULL###############",
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);

Testing connection with the authentication module

  // TEST MODULE AUTH
  const auth = getAuth();
  console.log("LOADED FIREBASE-AUTH", auth);
  // overwrite DOM with the version used from response CDN
  document.getElementById("content").innerHTML = auth.config.sdkClientVersion;

Some observations:

phoneAuth => make sure to import RecaptchaVerifier https://firebase.google.com/docs/auth/web/phone-auth#use-invisible-recaptcha

`import { getAuth, RecaptchaVerifier } from "https://www.gstatic.com/firebasejs/9.6.11/firebase-auth.js";`

Well what I can deduce from the error, is as it says: internet disconnected. It may also be related, here: Import firebase firestore from CDN JS not working Import firebase firestore from CDN JS not working.

I hope to be helpful!. Or can you provide more details if the error continues.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- Add a container for reCaptcha -->
    <button id="sign-in-button">sign-in-button</button>

    <p id="content">SHOW INFO CONNEXION AUTH</p>

    <script type="module">
      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.11/firebase-app.js";
      import { getAuth, RecaptchaVerifier } from "https://www.gstatic.com/firebasejs/9.6.11/firebase-auth.js";

      // TODO: Replace the following with your app's Firebase project configuration
      const firebaseConfig = {
        apiKey: "A#######YOUR#API#KEY#BUT#RESPONSE##SUCCESSFULL###############",
      };

      // Initialize Firebase
      const app = initializeApp(firebaseConfig);

      // TEST MODULE AUTH
      const auth = getAuth();
      console.log("LOADED FIREBASE-AUTH", auth);
      // overwrite DOM with the version used from response CDN
      document.getElementById("content").innerHTML = auth.config.sdkClientVersion;

      // phoneAuth => make sure to import RecaptchaVerifier
      // Ref: https://firebase.google.com/docs/auth/web/phone-auth#use-invisible-recaptcha
      window.recaptchaVerifier = new RecaptchaVerifier(
        "sign-in-button",
        {
          size: "invisible",
          callback: (response) => {
            // reCAPTCHA solved, allow signInWithPhoneNumber.
            // onSignInSubmit();
            // ...
          },
        },
        auth
      );
    </script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Gustavo IAS

'Can not connect to firebase authentication browser module

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]