javascript - Firebase GoogleAuthProvider login issue - Stack Overflow

admin管理员组

文章数量:1123214

I cannot login with google to my website on production. On development it works fine.

So I have this function that fires when a user clicks login with google button:

import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { app } from "../firebase";
import { useDispatch } from "react-redux";
import { signInSuccess } from "../redux/user/userSlice";
import { useNavigate } from "react-router-dom";

export default function OAuth() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const handleGoogleClick = async () => {
        try {
            const provider = new GoogleAuthProvider();
            const auth = getAuth(app);

            const result = await signInWithPopup(auth, provider);

            const res = await fetch("/api/auth/google", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    name: result.user.displayName,
                    email: result.user.email,
                    photo: result.user.photoURL,
                }),
            });
            const data = await res.json();
            dispatch(signInSuccess(data));
            navigate("/");
        } catch (error) {
            console.log("could not sign in with google", error);
        }
    };

Thus it works on my dev environment and I am able to login with google account and on production I get the following error when I click on account:

could not sign in with google FirebaseError: Firebase: Error (auth/popup-closed-by-user)

Then it seems to be doing something in the pop-up as it is loading and it just closes itself. I have added to index js:

 app.use(helmet(
  {
    contentSecurityPolicy: {
      directives: {
        "default-src": ["'self'"],
        "script-src": [
          "'self'",
          "'unsafe-eval'",
          ";,
          ";,
          ";,
          ";,
          ";,
          ";,
        ],
        "img-src": [
          "'self'",
          ";,
          ";,
          ";,
        ],
        "connect-src": [
          "'self'",
          ";,
          ";,
          ";,
          ";,
          ";,
          ";,
        ],
        "frame-src": [
          "'self'",
          "my-website-url.onrender",
          "my-firebase-url.firebaseapp",
          ";,
          ";,
        ],
      },
    },
  }
));

and to HTML I have added

  <meta http-equiv="Content-Security-Policy"
    content="script-src 'self' 'unsafe-eval'      ; img-src 'self'   ; connect-src 'self'      ; frame-src 'self' my-website-url.onrender my-firebase-url.firebaseapp  ; " />

Would appreaciate a lot if someone can help as I spent a lot of time on this and still stuck, kind of lost hope. The urls are added to authorized domains on firebase. As well added unsafe-eval as it raised some erorrs on console, later will try to solve it with solution that doesn't use it.

本文标签： javascriptFirebase GoogleAuthProvider login issueStack Overflow