15

I am trying to implement client side only login using OAuth. Getting the following error:

details: "You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the [Migration Guide](https://developers.google.com/identity/gsi/web/guides/gis-migration) for more information."
error: "idpiframe_initialization_failed"

After that, whenever i try to sign in, i get the following error:

error: "popup_closed_by_user"
[[Prototype]]: Object

Right now i am working on localhost:3000, so i added http://localhost:3000 as authorized JS origin in OAuth 2.0 Client IDs, also tried changing publishing status from testing to production. User type is set to External.

MovieZ
  • 379
  • 1
  • 2
  • 11
  • I have tried all the options offered here: https://stackoverflow.com/questions/52529360/how-to-solve-idpiframe-initialization-failed-for-localhost/52584572#52584572. Nothing helped. What else can be done? – Haim Tabak May 10 '22 at 21:28
  • Check out the following YouTube video in order to implement a new Google Identity in your react app; https://www.youtube.com/watch?v=roxC8SMs7HU – Ben Jun 08 '22 at 05:49

2 Answers2

13

I had the same error, but in React app. There is the solution

import React, { useEffect } from 'react';
import { GoogleLogin, GoogleLogout } from 'react-google-login';
import env from 'react-dotenv';
import { gapi } from 'gapi- script';

function AuthPage() {  
  useEffect(() => {
    function start() {
      gapi.client.init({
        clientId: env.REACT_PUBLIC_GOOGLE_CLIENT_ID,
        scope: 'email',
      });
    }

    gapi.load('client:auth2', start);
  }, []);


  // **you can access the token like this**
  // const accessToken = gapi.auth.getToken().access_token;
  // console.log(accessToken);

  const onSuccess = response => {
    console.log('SUCCESS', response);
  };
  const onFailure = response => {
    console.log('FAILED', response);
  };
  const onLogoutSuccess = () => {
    console.log('SUCESS LOG OUT');
  };

  return (
    <div>
      <GoogleLogin
        clientId={env.REACT_PUBLIC_GOOGLE_CLIENT_ID}
        onSuccess={onSuccess}
        onFailure={onFailure}
      />
      <GoogleLogout
        clientId={env.REACT_PUBLIC_GOOGLE_CLIENT_ID}
        onLogoutSuccess={onLogoutSuccess}
      />
    </div>
  );
}

export default AuthPage;
hellvisor
  • 463
  • 5
  • 15
  • 2
    This is helpful. Do we need to add this initialise statement on every page (signin, signup etc.) where we use google auth ? Because adding it to just one page works fine? – mukund Jun 05 '22 at 20:40
  • @mukund I don't think you'll need to duplicate this code if you only have one "GoogleAuth" component with this logic, so you can use it anywhere – hellvisor Jun 07 '22 at 15:16
  • Where do you put your client Id? – Caeta Jun 26 '22 at 18:24
  • @Caeta inside useEffect in gapi client initialization, REACT_PUBLIC_GOOGLE_CLIENT_ID variable – hellvisor Jun 27 '22 at 11:43
  • @hellvisor yes, but you are using env, from 'react-dotenv', that way is not working for me, anyway it's just a little detail. Everything else is working well – Caeta Jun 29 '22 at 19:32
  • 1
    @Caeta you can also use process.env.YOUR_VAR, previously install dotenv. It wasn't worked for me, so I used react-env lib. Now I'm using dotenv again, and, unfortunately, I don't remember how I fixed that issue, sorry :c – hellvisor Jun 30 '22 at 08:22
6

By default, newly created Client IDs are now blocked from using the older Platform Library, existing Client IDs are unaffected. New Client IDs created before July 29th, 2022 can set plugin_name to enable use of the Google Platform Library.

So, in my case the solution was:

window.gapi.load('client:auth2', () => {
            window.gapi.client.init({
                clientId: '******.apps.googleusercontent.com',
                plugin_name: "chat"
            })
MovieZ
  • 379
  • 1
  • 2
  • 11
  • Hi @MovieZ I use angular in the [angularx-social-login package](https://www.npmjs.com/package/angularx-social-login) How do you do that there? – Haim Tabak May 11 '22 at 23:14
  • 1
    @HaimTabak I am pretty new to frontend development, so that will be a bold guess. But i would've tried specifying a new custom field plugin_name on initialization, as shown in the link you provided at 'Specifying custom scopes, fields etc. on initialization' section. – MovieZ May 11 '22 at 23:32