React.js App Login with Google, Error "idpiframe_initialization_failed"

Question

I am implementing Login with Google for my react.js application. I have followed the steps from this tutorial video: https://youtu.be/75aTZq-qoZk.

I am running my app from http://localhost:3000, I have registered it with my client Id at Google Cloud Platform under "Authorised JavaScript origins" heading. However, I am still getting this error:

{
    "error": "idpiframe_initialization_failed",
    "details": "Not a valid origin for the client: http://localhost:3000 has not been registered for client ID. Please go to https://console.developers.google.com/ and register this origin for your project's client ID."
}

Here is my code:

import React, { Component } from 'react'
import GoogleLogin from 'react-google-login';

export default class Login extends Component {

    googleLoginSuccess = (googleData) => {
        console.log("Success", googleData);
    }

    googleLoginFailure = (result) => {
        console.log("Failure", result)
    }

    render() {
        return (
            <GoogleLogin
                clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
                buttonText="Login"
                onSuccess={this.googleLoginSuccess}
                onFailure={this.googleLoginFailure}
                cookiePolicy={'single_host_origin'}
            />
        )
    }
}

Answer 1

Try it in an incognito tab,

Try to re-create your credentials,

Make sure you're not using https by accident,

also:

Note: It may take 5 minutes to a few hours for settings to take effect