Discussion on: Google Authentication in a Chrome Extension with Firebase

View post

Replies for: Hi i have the same issue did you find any solution ?

@deepblue597 @simple_solutionszaf_b22a @fekirine_djallal_31be23ad

Thank you, authors and commenters, for the great information.
I'll share how I dealt with it, as nothing happened when I hit the login button.

In index.html hosted on Firebase Hosting,

I got “Uncaught TypeError: Failed to resolve module specifier ‘firebase/app’. Relative references must start with either “/”, “. /”, or ”... /”.”

error, so I set up index.html as follows. (It may not be a clean solution.) I was able to log in successfully! Thank you very much!

(In other words, I chose not to use signInWithPopup.js.)

index.html (Don't forget to "firebase deploy")

<!DOCTYPE html>
<html>
  <head>
    <title>Firebase Auth for Chrome Extension</title>
  </head>
  <body>
    <h1>Firebase Auth for Chrome Extension</h1>
    <script type="module">
      // Import Firebase
      import { initializeApp } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
      import {
        getAuth,
        GoogleAuthProvider,
        signInWithPopup,
      } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-auth.js";

      // Firebase configuration
      const firebaseConfig = {
        apiKey: "",
        authDomain: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: "",
        appId: "",
      };

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

      const PROVIDER = new GoogleAuthProvider();

      function sendResponse(result) {
        window.parent.postMessage(
          JSON.stringify(result),
          document.location.ancestorOrigins[0]
        );
      }

      window.addEventListener("message", function ({ data }) {
        if (data.initAuth) {
          signInWithPopup(auth, PROVIDER)
            .then(sendResponse)
            .catch(sendResponse);
        }
      });
    </script>
  </body>
</html>