search

abacritt / angularx-social-login

Social login and authentication module for Angular 17
634 stars 387 forks source link

This application depends upon a library published using Angular version 14.0.2, which requires Angular version 14.0.0 or newer to work correctly. #519

Closed rajibhalder closed 1 year ago

rajibhalder commented 2 years ago

My Angular CLI version: 13 Angularx: "@abacritt/angularx-social-login": "^1.1.0"

Everything was working fine. But suddenly it is giving below error. May be due to some recent change in angularx-social-login but it should not block existing:

./node_modules/@abacritt/angularx-social-login/fesm2015/abacritt-angularx-social-login.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js): TypeError: Cannot create property 'message' on string '/usr/src/app/node_modules/@abacritt/angularx-social-login/fesm2015/abacritt-angularx-social-login.mjs: This application depends upon a library published using Angular version 14.0.2, which requires Angular version 14.0.0 or newer to work correctly. Consider upgrading your application to use a more recent version of Angular. 418 | } 419 | GoogleSigninButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GoogleSigninButtonDirective, deps: [{ token: i0.ElementRef }, { token: SocialAuthService }], target: i0.ɵɵFactoryTarget.Directive }); 420 | GoogleSigninButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: GoogleSigninButtonDirective, selector: "asl-google-signin-button", ngImport: i0 }); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 421 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GoogleSigninButtonDirective, decorators: [{ 422 | type: Directive, 423 | args: [{' at run (/usr/src/app/node_modules/@babel/core/lib/transformation/index.js:37:15) at run.next () at Function.transform (/usr/src/app/node_modules/@babel/core/lib/transform.js:25:41) at transform.next () at step (/usr/src/app/node_modules/gensync/index.js:261:32) at /usr/src/app/node_modules/gensync/index.js:273:13 at async.call.result.err.err (/usr/src/app/node_modules/gensync/index.js:223:11) at /usr/src/app/node_modules/gensync/index.js:189:28 at /usr/src/app/node_modules/@babel/core/lib/gensync-utils/async.js:74:7 at /usr/src/app/node_modules/gensync/index.js:113:33

Heatmanofurioso commented 2 years ago

Hi @rajibhalder

can you please try with the latest version? Being 1.2.0

rajibhalder commented 2 years ago

@Heatmanofurioso I tried with latest 1.2.0 but unfortunately same error getting. Finally i had to revert back to angularx-social-login": "^4.1.0 when it works. But i wonder why future release will break existing release ? angularx 1.1.0 was working absolutely fine till yesterday and suddenly it is giving error like this.

Heatmanofurioso commented 2 years ago

The new release didn't break anything on the previous one for sure.

We don't override release versions, and I think NPM doesn't even allow that to be pushed "without at least fully deleting a release, to override it" @rajibhalder

Do take in mind that Google is deprecating/deleting some of the old APIs "which is why we're releasing some updates", and that might be causing some issues

RoopeHakulinen commented 2 years ago

The abovementioned error about Angular 14 happens with 1.2.0 but 1.1.0 seems to work.

rajibhalder commented 2 years ago

@Heatmanofurioso For the time i have reverted back to angularx-social-login": "^4.1.0 which working fine and doing my analysis for the error 1.1.0. If i find anything, will let you know here.

Manuel-Materazzo commented 2 years ago

i have the same error on 1.2.0, downgrading to 1.1.0 resolved the issue, but obviously you can't create new google client applications because of the idpiframe_initialization_failed error. The problem found by @rajibhalder with ^ 1.1.0 probably was caused by a clean npm install

rajibhalder commented 2 years ago

i have the same error on 1.2.0, downgrading to 1.1.0 resolved the issue, but obviously you can't create new google client applications because of the idpiframe_initialization_failed error. The problem found by @rajibhalder with ^ 1.1.0 probably was caused by a clean npm install

Actually the error first reported by my CircleCI and Github Action build (As they always do clean npm build). Later when i did a clean npm install (After deleting my node_modules folder) this error started appearing at my local.

Heatmanofurioso commented 2 years ago

We did detect a dependency issue with V1.2.0

We've just launched V1.2.1, which fixes it.

Can you guys try with it, please? @rajibhalder @Manuel-Materazzo @RoopeHakulinen

rajibhalder commented 2 years ago

Hi @Heatmanofurioso ,

I added as below in package.json "@abacritt/angularx-social-login": "^1.2.1",

and i am using Angular 13

I tried to build it with v1.2.1 but getting below error:

./node_modules/@abacritt/angularx-social-login/fesm2015/abacritt-angularx-social-login.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js): TypeError: Cannot create property 'message' on string 'C:\MyWork\Codebase\GitHub\Frontend\TestPractise_UI\node_modules\@abacritt\angularx-social-login\fesm2015 \abacritt-angularx-social-login.mjs: This application depends upon a library published using Angular version 14.0.3, which requires Angular version 14.0.0 or newer to work correctly. Consider upgrading your application to use a more recent version of Angular. 423 | } 424 | GoogleSigninButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: GoogleSigninButtonDirective, deps: [{ token: i0.ElementRef }, { token: SocialAuthService }], target: i0.ɵɵFactoryTarget.Directive }); 425 | GoogleSigninButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: GoogleSigninButtonDirective, selector: "asl-google-signin-button", ngImport: i0 }); | ^^^^^^^^^^^^^^[31m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[31m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 426 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: GoogleSigninButtonDirective, decorators: [{ 427 | type: Directive, 428 | args: [{' at run (C:\MyWork\Codebase\GitHub\Frontend\TestPractise_UI\node_modules\@babel\core\lib\transformation\index.js:39:15) at run.next () at Function.transform (C:\MyWork\Codebase\GitHub\Frontend\TestPractise_UI\node_modules\@babel\core\lib\transform.js:25:41) at transform.next () at step (C:\MyWork\Codebase\GitHub\Frontend\TestPractise_UI\node_modules\gensync\index.js:261:32) at C:\MyWork\Codebase\GitHub\Frontend\TestPractise_UI\node_modules\gensync\index.js:273:13 at async.call.result.err.err (C:\MyWork\Codebase\GitHub\Frontend\TestPractise_UI\node_modules\gensync\index.js:223:11) at C:\MyWork\Codebase\GitHub\Frontend\TestPractise_UI\node_modules\gensync\index.js:37:40

Error: node_modules/@abacritt/angularx-social-login/directives/google-signin-button.directive.d.ts:7:18 - error TS2314: Generic type 'ɵɵDirectiveDeclaration' requires 6 type argument(s).

7 static ɵdir: i0.ɵɵDirectiveDeclaration<GoogleSigninButtonDirective, "asl-google-signin-button", never, {}, {}, never, never, false>;



× Failed to compile.

Not sure if i am making any mistakes or v1.2.1 does not support Angular 13. My project is using Angular 13. Upgrading it to Angular 14 is a complex work for me as my project is huge.

Requesting  Manuel-Materazzo and @RoopeHakulinen to check it with Angular 14. I will check and let my finding with a new Angular 14 project.
Manuel-Materazzo commented 2 years ago

Everything seems fine on angular 14, but i can confirm the error still being present on V1.2.1 when using angular 13.

ncanella commented 2 years ago

The same issue here, it doesn't work using Angular 13.

TypeError: Cannot create property 'message' on string '/node_modules/@abacritt/angularx-social-login/fesm2015/abacritt-angularx-social-login.mjs: This application depends upon a library published using Angular version 14.0.3, which requires Angular version 14.0.0 or newer to work correctly.

mamiapatrick commented 2 years ago

Hello folks,

Could somebody fix this issue, i have the same problem two scenario:

1- I use version 1.1.0, i have an issue to install it with @angular/common 13.2 when trying to install and at end the directive folder is absent and asl-google-signin-button is not a know element in my component

2- I use version 1.2.1, the directive asl-google-signin-button is a know element in my component and the installation is ok but when i try to build i have the same message as yours

TypeError: Cannot create property 'message' on string '/node_modules/@abacritt/angularx-social-login/fesm2015/abacritt-angularx-social-login.mjs: This application depends upon a library published using Angular version 14.0.3, which requires Angular version 14.0.0 or newer to work correctly.

Any help?

Manuel-Materazzo commented 2 years ago

1- I use version 1.1.0, i have an issue to install it with @angular/common 13.2 when trying to install and at end the directive folder is absent and asl-google-signin-button is not a know element in my component

@mamiapatrick You probably forgot to import the module in your AppModule, follow the "Import the module" section of the readme and you should be fine for this error. But probably it won't work anyways, because google has dropped support on the api used with 1.1.0 for applications created after mid june.

2- I use version 1.2.1, the directive asl-google-signin-button is a know element in my component and the installation is ok but when i try to build i have the same message as yours

This is currently unfixed on angular 13.x, i guess a patch will be released in the near future, if you don't want to wait consider updating to angular 14 if angular 13 it's not a critical matter for the project.

Heatmanofurioso commented 2 years ago

I've been a tad busy with some issues at work, so I haven't been able to give these issues the attention I wish to, but hopefully this weekend I'll work on a fix.

If anyone is willing, I'd be more than glad to take up on a PR ;)

mamiapatrick commented 2 years ago

@mamiapatrick You probably forgot to import the module in your AppModule, follow the "Import the module" section of the readme and you should be fine for this error. But probably it won't work anyways, because google has dropped support on the api used with 1.1.0 for applications created after mid june.

@Manuel-Materazzo i imported the module and with V1.1.0 the directives folders doesn't exist while it exist on v1.2.1 but there is that error of compatibilty

@Heatmanofurioso thanks a lot for your time this weekend, i'm pretty sure that many people is waiting for this !

MarcoFFSiciliano commented 2 years ago

Any news on this error? We are still using angular 13 and are unable to use it.

ansontp22 commented 1 year ago

Hi Any update on this ticket. I'm facing this issue. It was working fine. I cleared the node_modules folder and installed all the dependencies again. Then started facing this issue. git

my package.json

"@abacritt/angularx-social-login": "^1.0.2", "@angular/animations": "~12.2.0", "@angular/cdk": "^13.2.1", "@angular/common": "~12.2.0", "@angular/compiler": "~12.2.0", "@angular/core": "~12.2.0", "@angular/forms": "~12.2.0", "@angular/localize": "~12.2.0", "@angular/platform-browser": "~12.2.0", "@angular/platform-browser-dynamic": "~12.2.0", "@angular/router": "~12.2.0", "@fortawesome/angular-fontawesome": "^0.10.1", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4",

Manuel-Materazzo commented 1 year ago

@ansontp22 if you are fine on using the old google api, you can fix by changing your abacritt/angularx-social-login dependency version to "1.1.0"

ansontp22 commented 1 year ago

hi @Manuel-Materazzo , thanks for the update , I'll try that. but any progress on this issue? Will it be addressed? when I can expect?

Manuel-Materazzo commented 1 year ago

hi @Manuel-Materazzo , thanks for the update , I'll try that. but any progress on this issue? Will it be addressed? when I can expect?

I've given up on waiting and upgraded my project to angular 14, because i need the new API. Maybe some day the issue will be fixed, but a month already passed, so i guess it's not planned for the near future.

mamiapatrick commented 1 year ago

Hello all as you I migrated and now it is working but I wanted to know if someone know how to customize the button of login with Google inserted by the directive asl-google-signin-button I want to change the size and colour

Manuel-Materazzo commented 1 year ago

@mamiapatrick You can override the GoogleSigninButtonDirective by doing something like this, but there is a limited customization that you can do

import { Directive, ElementRef } from '@angular/core';
import { take } from 'rxjs';
import { SocialAuthService } from '@abacritt/angularx-social-login';

declare var google;

@Directive({
  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: 'google-signin-button'
})
export class GoogleSigninButtonDirective {

  constructor(
    el: ElementRef,
    private socialAuthService: SocialAuthService
  ) {
    this.render(el)
  }

  render(el) {
    this.socialAuthService.initState.pipe(take(1)).subscribe(() => {
      google.accounts.id.renderButton(el.nativeElement, {
        type: 'standard',
        size: 'medium',
        text: 'signin_with',
        theme: 'filled_blue'
      });
    })
  }
}
Heatmanofurioso commented 1 year ago

The original issue on this thread has been fixed, and the Google Sign In customization has also been merged. Closing this thread for now

KangHidro commented 1 year ago

Hello!

I'm using "@angular/cli": "~13.3.9" and @abacritt/angularx-social-login:^1.2.2

I still got 2 errors:

After some try, I find out this way can temporarily fix it if you cannot upgrade Angular to v14:

  1. File node_modules/@abacritt/angularx-social-login/directives/google-signin-button.directive.d.ts:9:18: Replace error line with static ɵdir: i0.ɵɵDirectiveDeclaration<GoogleSigninButtonDirective, "asl-google-signin-button", never, { "type": "type"; "size": "size"; }, {}, []>

  2. File /node_modules/@abacritt/angularx-social-login/fesm2015/abacritt-angularx-social-login.mjs: Replace Line 429, 473 minVersion: "14.0.0" to minVersion: "13.0.0"

  3. File /node_modules/@abacritt/angularx-social-login/fesm2020/abacritt-angularx-social-login.mjs: Replace Line 420, 456 minVersion: "14.0.0" to minVersion: "13.0.0"

  4. File node_modules/@abacritt/angularx-social-login/esm2020/directives/google-signin-button.directive.mjs: Replace Line 18 minVersion: "14.0.0" to minVersion: "13.0.0"

  5. ng serve again

Result image

P/S: Maybe you need to add both localhost and localhost:4200 to Google Authorized JavaScript origins if you got The given origin is not allowed for the given client ID (GSI) error.

alexp25 commented 1 year ago

@Heatmanofurioso could you please explain how it was fixed to work with Angular 13? I have tried every version of this library and I still get the error described in the original message. It is not possible to upgrade to Angular 14 because of framework dependencies (Ionic doesn't support Angular 14 yet).

./node_modules/@abacritt/angularx-social-login/fesm2015/abacritt-angularx-social-login.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
[ng] TypeError: Cannot create property 'message' on string 'xxxx\node_modules\@abacritt\angularx-social-login\fesm2015\abacritt-angularx-social-login.mjs: This application depends upon a library published using Angular version 14.1.0, which requires Angular version 14.0.0 or newer to work correctly.
[ng] Consider upgrading your application to use a more recent version of Angular.
[ng]   427 | }
[ng]   428 | GoogleSigninButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: GoogleSigninButtonDirective, deps: [{ token: i0.ElementRef }, { token: SocialAuthService }], target: i0.ɵɵFactoryTarget.Directive });
[ng] > 429 | GoogleSigninButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: GoogleSigninButtonDirective, selector: "asl-google-signin-button", inputs: { type: "type", size: "size" }, ngImport: i0 });
[ng]       |                                    ^^^^^^^^^m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[ng]   430 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: GoogleSigninButtonDirective, decorators33m: [{
[ng]   431 |             type: Directive,
[ng]   432 |             args: [{'
[ng]     at run (xxxx\node_modules\@babel\core\lib\transformation\index.js:37:15)
[ng]     at run.next (<anonymous>)
[ng]     at Function.transform (xxxx\node_modules\@babel\core\lib\transform.js:25:41)
[ng]     at transform.next (<anonymous>)
[ng]     at step (xxxx\node_modules\gensync\index.js:261:32)
[ng]     at xxxx\node_modules\gensync\index.js:273:13
[ng]     at async.call.result.err.err (xxxx\node_modules\gensync\index.js:223:11)
[ng]     at xxxx\node_modules\gensync\index.js:189:28
[ng]     at xxxx\node_modules\@babel\core\lib\gensync-utils\async.js:74:7
[ng]     at xxxx\node_modules\gensync\index.js:113:33
[ng]
[ng] Error: node_modules/@abacritt/angularx-social-login/directives/google-signin-button.directive.d.ts:9:18 - error TS2314: Generic type 'ɵɵDirectiveDeclaration' requires 6 type argument(s).
[ng]
[ng] 9     static ɵdir: i0.ɵɵDirectiveDeclaration<GoogleSigninButtonDirective, "asl-google-signin-button", never, { "type": "type"; "size": "size"; }, {}, never, never, false>;
[ng]
alexp25 commented 1 year ago

It seems that Google completely changed the way sign-in works. It might be easier to use their official implementation instead, as there is no way of calling the API other than within the iframe, and things get a little messy with the existing Angular wrappers. An example can be found here, using Angular 13 and Google Identity Library: https://github.com/ShemiNechmad/GoogleSignInAngular