DEV Community

Discussion on: Google Authentication in a Chrome Extension with Firebase

View post
Collapse
 
deepblue597 profile image
jason_k •

Hello!
I followed your steps but i encountered some issues and i would like your help

  • i changed patterns: [{ from: "./public/" }] to patterns: [{ from: path.join(__dirname, "src", "public") }] because it couldnt find the public folder.
  • the "key": "-----BEGIN PUBLIC KEY-----\nasdasdasdsad\n-----END PUBLIC KEY-----" this must be added after we upload thezip file to google web store cannot be put before uploading the zip file at chrome web store ( step 5 ) because chrome web store automatically creates the key. After you upload the zip file you can add it to your code
  • in step 6 you say upload the chrome-extension dir but this is not wokring ( it cannot find the manifest.json file). Instead i uploaded the dir file that is being created by webpack
  • when i ulpoad the file there is an error saying i cant use eval inside background.js. I used chatgpt and it said :

The error you're encountering (EvalError: Refused to evaluate a string as JavaScript) occurs because your Chrome extension is running in a secure context, and the Content Security Policy (CSP) prevents the use of eval() or similar JavaScript evaluation methods. This issue is often triggered by the default eval devtool Webpack uses in development mode to inline source maps.

i added in webpack.config

devtool: "cheap-module-source-map", // Use a different devtool that doesn't use eval

  • i tried to run the extension but when i click sign in it doesnt do anything.
Collapse
 
fekirine_djallal_31be23ad profile image
Fekirine Djallal •

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

Collapse
 
tebaeleven profile image
teba • • Edited

@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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
simple_solutionszaf_b22a profile image
Simple Solutions Zaf • • Edited

@deepblue597 I also had the same problem. Thanks for the steps you shared.

After following your recommendations, in firebase-project/public/signInWithPopup.js, I replaced:

import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

With:
import { initializeApp } from 'gstatic.com/firebasejs/11.0.2/fire...';
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'gstatic.com/firebasejs/11.0.2/fire...';

That worked for me. Let me know if it worked for you?

My next issue is, how do I write to the database once logged in?

Collapse
 
allison_xia_8383d29a9e2ca profile image
allison xia •

@deepblue597 @simple_solutionszaf_b22a hi thank you guys so much for providing the solutions! I had the same error message but after i followed your steps, the authorization started to work smoothly.