CODEWITHSUNDEEP
reactjsfirebasefirebase-authenticationnetlify
Ricky
Ricky

Reputation: 75

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

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

Upvotes: 4

Views: 4440

Answers (4)

Rahulps ps
Rahulps ps

Reputation: 1

go to firebase console: https://console.firebase.google.com/ and in your app authentication settings add your domain name like https://main.d3fhwgmscd8m7w.amplifyapp.com/

Upvotes: 0

Williams Joseph
Williams Joseph

Reputation: 3

this is the latest way to fix it 2023 i fixed mine by going to authentication -> settings -> look down you will see the authorized domain click it an

Upvotes: 0

Shafiqul Hasan Russell
Shafiqul Hasan Russell

Reputation: 41

The answer above provided a link which is currently giving a error message like this "There was an unknown error while processing the request.". As an amateur I was struggling finding the Authorized Domains option(Google might move the route over time to time).

This is How I Solved the problem: First go to the : https://console.firebase.google.com/

If you are signed in you will see all of your projects list here. Select the project for which you want to add Authorized Domain. A Project overview page will be opened.

Then click on the Authentication link on the left side under the Project Overview Button or under the Project Shortcuts label.

On the new page You will see a button Settings on the right side of User, Sign in method Options. After Clicking the Setting button you will finally see Authorized Domain option at the bottom of the page. Now you can add your domain(like you provided: https://kreivc-clock.netlify.app/) here. You problem with Netlify and Google Auth will be solved.

Upvotes: 1

Gayatri Dipali
Gayatri Dipali

Reputation: 1283

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));
  };

Upvotes: 6

Related Questions