CODEWITHSUNDEEP
javascriptgoogle-oauth
MovieZ
MovieZ

Reputation: 409

Having a trouble with Google OAuth2 (app has no backend, so client side only)

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.

Upvotes: 16

Views: 14379

Answers (2)

hellvisor
hellvisor

Reputation: 538

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;

Upvotes: 13

MovieZ
MovieZ

Reputation: 409

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

Upvotes: 7

Related Questions