reactjs - Google Sign-In: Not a valid origin for the client: http://localhost:3000 has not been whitelisted for client ID XXXXXXXXXXXX

Question

This question has been asked before here, but it wasn't detailed and there is no answer yet. So I am posting it here again.

I am trying to implement Google-sign in.
First, I have to test it in local host, before pushing to prod.
The problem is that in the console, it logs this error as soon as the login page is loaded, without me clicking anything:

"Not a valid origin for the client: http://localhost:3000 has not been whitelisted for client ID XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."

I have added localhost:3000 in authorized javascript origins:

However, I am not sure this is exactly what they mean by "whitelisting http://localhost:3000 for client ID.

---

NOTE: Before adding localhost:3000 in authorized javascript origins, when I click on the sign-in button, this window gets displayed:

After adding it, that window succesfully displays the google accounts that I can use to sign-in.
So I guess whitelisting and adding to authorized javascript origins are two different things?

question from:https://stackoverflow.com/questions/65869839/google-sign-in-not-a-valid-origin-for-the-client-http-localhost3000-has-not

Answer 1

Whitelisting is simply the opposite of blacklisting. A whitelist is a list of people who are authorized to access your program. You need to whitelist yourself to give yourself access your program and prevent others from taking advantage of your program since it is still in progress and thus vulnerable. You want to whitelist your Ip address which whitelists your localhost. You can find your ip address by typing "my ip" in google.