Google Firebase Auth Failed on Netlify, But work on local server

Question

When I deploy my site to netlify, I cannot sign in properly, new google window open and close automatically, my site Clock

function SignIn() {
const signInWithGoogle = () => {
  const provider = new firebase.auth.GoogleAuthProvider();
  auth.signInWithPopup(provider);
};

return (
  <>
    <button className="sign" onClick={signInWithGoogle}>
      Sign in with Google
    </button>
  </>
);

}

function SignOut() {
return (
  auth.currentUser && (
    <button className="sign" onClick={() => auth.signOut()}>
      Sign Out
    </button>
  )
);

}

Picture

It only happen in web after I deploy it on netlify, and works normally in local server

Answer 1

Add your current netlify domain to firebase console

First go this url : https://console.firebase.google.com/u/0/project/your_project_name/authentication/providers

Then go to Authorised domains section and add https://kreivc-clock.netlify.app/

Always remember to check for auth errors and alert it :

const signIn = () => {
    auth
      .signInWithPopup(provider)
      .catch((error) => alert(error.message));
  };