Getting CORS ERROR which Creating a Social Google Sign In using angularx-social-login

Question

I am quite new to angular and I am building a Social Google login button using angularx-social-login. The approach I have used is from

1. https://www.bacancytechnology.com/blog/google-social-login-with-angular-11/
2. https://www.bacancytechnology.com/blog/integrate-google-and-facebook-authenticate-using-angular-8

Gmail login popup is opening but upon entering the credentials I am not getting anything in console. But I know its logging in because I have to clear cooking its just the CORS Error which seems to be the obstacle for me . I have even added proxy conf with code:

{

"/api": { "target": "https://accounts.google.com/", "changeOrigin": true, "secure": false } }

I think the target url should be different but i am not able to figure out what it should be.

my code:

index.html

<meta name="google-signin-client_id" content="clientID.apps.googleusercontent.com" >
  <script src="https://apis.google.com/js/platform.js"></script>

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';
import { FormsModule } from "@angular/forms";
import { SocialLoginModule, SocialAuthServiceConfig, SocialAuthService } from 'angularx-social-login';
import {
  GoogleLoginProvider,
  FacebookLoginProvider
} from 'angularx-social-login';

import {HttpClientModule} from '@angular/common/http';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule, 
    SocialLoginModule,
    HttpClientModule,
    ReactiveFormsModule
  ],
  providers: [
    {
      provide: "SocialAuthServiceConfig",
      useValue: {
        autoLogin: true,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              '314676676928-bhl8bvt5mt9fb1j4939patj9jj2iblsk.apps.googleusercontent.com'
            )
          }
        ]
      } as SocialAuthServiceConfig
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

component HTML Template :

<div class="g-signin2" (onclick)="signInWithGoogle()"></div> <br/>
<img src="{{ user.photoUrl }}">
<div>
  <h4>{{ user.name }}</h4>
  <p>{{ user.email }}</p>
</div>

<a href="#" (onclick)="signOut();">Sign out</a>

Component TS

public user: SocialUser = new SocialUser;
 gapi: any;
 image="";
    constructor(private authService: SocialAuthService,
     private router: Router) {}
ngOnInit() {
      this.authService.authState.subscribe(user => {
      this.user = user;
      console.log("user-->",user);
    });
  }
 
  public signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).then(()=>{
       this.router.navigate(['login']);
       console.log("logged in user")
    });
    console.log('userSigned in');
  }

I have tried everything right but I am getting CORS error and some other error in my console as below:

api.js:23 Uncaught dw {message: 'gapi.auth2 has been initialized with different opt…2.getAuthInstance() instead of gapi.auth2.init().', UQ: true, stack: 'gapi.auth2.ExternallyVisibleError: gapi.auth2 has …r3MLkazUi2Jmy50dQ/cb=gapi.loaded_1?le=scs:603:304'}
(anonymous) @ api.js:23
(anonymous) @ api.js:22
ka @ api.js:15
B @ api.js:22
Ba.u.<computed> @ api.js:23
Ba.E.<computed> @ api.js:23
(anonymous) @ cb=gapi.loaded_2?le=scs:1
localhost/:1 Access to XMLHttpRequest at 'https://apis.google.com/_/jserror?script=http%3A%2F%2Flocalhost%3A4200%2F&error=gapi.auth2%20has%20been%20initialized%20with%20different%20options.%20Consider%20calling%20gapi.auth2.getAuthInstance()%20instead%20of%20gapi.auth2.init().&line=Not%20available' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
zone.js:2707          POST https://apis.google.com/_/jserror?script=http%3A%2F%2Flocalhost%3A4200%2F&error=gapi.auth2%20has%20been%20initialized%20with%20different%20options.%20Consider%20calling%20gapi.auth2.getAuthInstance()%20instead%20of%20gapi.auth2.init().&line=Not%20available net::ERR_FAILED 301
scheduleTask @ zone.js:2707
scheduleTask @ zone.js:393
scheduleTask @ zone.js:221
scheduleMacroTask @ zone.js:244
scheduleMacroTaskWithCurrentZone @ zone.js:683
(anonymous) @ zone.js:2740
proto.<computed> @ zone.js:973
_.$x.send @ cb=gapi.loaded_1?le=scs:519
_.dy @ cb=gapi.loaded_1?le=scs:515
(anonymous) @ cb=gapi.loaded_2?le=scs:22
GW.tx @ cb=gapi.loaded_2?le=scs:44
SW @ cb=gapi.loaded_2?le=scs:32
TW @ cb=gapi.loaded_2?le=scs:27
hefn @ cb=gapi.loaded_2?le=scs:46
(anonymous) @ api.js:23
(anonymous) @ api.js:22
ka @ api.js:15
B @ api.js:22
Ba.u.<computed> @ api.js:23
Ba.E.<computed> @ api.js:23`enter code here`
(anonymous) @ cb=gapi.loaded_2?le=scs:1[enter image description here][1]
zone.js:182 Uncaught {error: 'idpiframe_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'}

Answer 1

I'm afraid this library is no more compliant with new Google Identity Services.

As you created a new recent Google client credential, you must use the new GIS library, since end of April 2022.

Have a look to this Pull Request on this library.