Google account login problem in local host refine npm dev

Question

Whenever I am trying to start my run dev command in local host it is asking for google account login, but when I choose to login, the prompt does not show me any of my google account to continue with. I am working on a REFINE project.

I tried to refresh it many times, and even change my browsers, but I'm still facing the same problem. I am already logged in with my gmail account in that browser but still it is not showing my account to continue with my REFINE application setup.

import { useEffect, useRef } from "react";
import { useLogin } from "@pankod/refine-core";
import { Container, Box } from "@pankod/refine-mui";

import { yariga } from '../assets';

import { CredentialResponse } from "../interfaces/google";

export const Login: React.FC = () => {
const { mutate: login } = useLogin<CredentialResponse>();

const GoogleButton = (): JSX.Element => {
const divRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  if (typeof window === "undefined" || !window.google || !divRef.current) {
    return;
  }

  try {
    window.google.accounts.id.initialize({
      ux_mode: "popup",
      client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
        callback: async (res: CredentialResponse) => {
        if (res.credential) {
          login(res);
        }
      },
    });
    window.google.accounts.id.renderButton(divRef.current, {
      theme: "filled_blue",
      size: "medium",
      type: "standard",
    });
  } catch (error) {
    console.log(error);
  }
}, []); // you can also add your client id as dependency here

return <div ref={divRef} />;
};

return (
<Box
  component="div"
  sx={{
    backgroundColor: '#FCFCFC'
  }}
>
  <Container
    component="main"
    maxWidth="xs"
    sx={{
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      height: "100vh",
    }}
  >
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <div>
        <img src={yariga} alt="Yariga Logo" />
      </div>
      <Box mt={4}>
        <GoogleButton />
      </Box>
    </Box>
  </Container>
</Box>
  );
  };

Answer 1

I checked https://github.com/refinedev/refine/tree/next/examples/auth-google-login example. it's working as expected.

The issue with Google login has been raised several times in the refine Discord server, and it has always been related to implementation details. In fact, implementing Google login with refine is no different from any other React application. I'll share a few answers from the refine Discord server here.

1. You can watch this video https://www.youtube.com/watch?v=HtJKUQXmtok
2. The given origin is not allowed for the given client ID (GSI)