angularx-social-login
angularx-social-login copied to clipboard
Published
20 hours ago •
abacritt
abacritt
Unable to subscribe to SocialAuthService authState
The Google login button suddenly disappeared, and I got an error while trying to subscribe to SocialAuthService. Did someone has ever faced this issue?
constructor(private authService: SocialAuthService) {
this.authService.authState.subscribe((authState) => {
localStorage.setItem(
this.AUTH_STATE_KEY,
JSON.stringify(authState),
);
});
}
stack trace
ERROR Error: Uncaught (in promise): Error
Error
at _.$e (:128:335)
at new qp (:227:3)
at $p (:246:34)
at Mo (:244:246)
at Object.No [as renderButton] (:216:62)
at /home/maransatto/repo/dt/districttaco-io-frontend/node_modules/@abacritt/angularx-social-login/fesm2022/abacritt-angularx-social-login.mjs:993:40
at _ZoneDelegate.invoke (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/zone.js/fesm2015/zone.js:368:26)
at Object.onInvoke (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/@angular/core/fesm2022/core.mjs:26321:33)
at _ZoneDelegate.invoke (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/zone.js/fesm2015/zone.js:367:52)
at Zone.run (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/zone.js/fesm2015/zone.js:129:43)
at resolvePromise (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/zone.js/fesm2015/zone.js:1193:31)
at /home/maransatto/repo/dt/districttaco-io-frontend/node_modules/zone.js/fesm2015/zone.js:1264:17
at _ZoneDelegate.invokeTask (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/zone.js/fesm2015/zone.js:402:31)
at /home/maransatto/repo/dt/districttaco-io-frontend/node_modules/@angular/core/fesm2022/core.mjs:25998:55
at AsyncStackTaggingZoneSpec.onInvokeTask (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/@angular/core/fesm2022/core.mjs:25998:36)
at _ZoneDelegate.invokeTask (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/zone.js/fesm2015/zone.js:401:60)
at Object.onInvokeTask (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/@angular/core/fesm2022/core.mjs:26308:33)
at _ZoneDelegate.invokeTask (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/zone.js/fesm2015/zone.js:401:60)
at Zone.runTask (/home/maransatto/repo/dt/districttaco-io-frontend/node_modules/zone.js/fesm2015/zone.js:173:47)
at drainMicroTaskQueue (http://localhost:4200/polyfills.js:8423:23) {rejection: Error
at _.$e (https://accounts.google.c…t:128:335)
at new qp (https://accounts.…, promise: ZoneAwarePromise, zone: Zone, task: ZoneTask, stack: 'Error: Uncaught (in promise): Error
Error
… (http://localhost:4200/polyfills.js:8423:23)', …}
message: 'Uncaught (in promise): Error\nError\n at _.$e (https://accounts.google.com/gsi/client:128:335)\n at new qp (https://accounts.google.com/gsi/client:227:3)\n at $p (https://accounts.google.com/gsi/client:246:34)\n at Mo (https://accounts.google.com/gsi/client:244:246)\n at Object.No [as renderButton] (https://accounts.google.com/gsi/client:216:62)\n at http://localhost:4200/vendor.js:16428:30\n at _ZoneDelegate.invoke (http://localhost:4200/polyfills.js:8225:158)\n at Object.onInvoke (http://localhost:4200/vendor.js:64010:25)\n at _ZoneDelegate.invoke (http://localhost:4200/polyfills.js:8225:46)\n at Zone.run (http://localhost:4200/polyfills.js:8008:35)'
package.json
{
"name": "districttaco-io-frontend",
"version": "6.1.2",
"scripts": {
"ng": "ng",
"start": "ng serve --configuration=development --proxy-config proxy.config.json",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"clean": "rimraf dist && rimraf .angular/cache && ng test --clear-cache",
"format": "pretty-quick",
"format:staged": "pretty-quick --staged",
"format:all": "prettier --ignore-path .prettierignore --write .",
"format:check": "prettier --ignore-path .prettierignore --list-different .",
"lint": "NODE_OPTIONS=--max_old_space_size=4096 ng lint",
"lint-fix": "NODE_OPTIONS=--max_old_space_size=4096 ng lint --fix",
"precommit": "lint-staged && pretty-quick --staged"
},
"private": true,
"dependencies": {
"@abacritt/angularx-social-login": "^2.1.0",
"@angular/animations": "^16.1.4",
"@angular/cdk": "^16.1.4",
"@angular/common": "^16.1.4",
"@angular/compiler": "^16.1.4",
"@angular/core": "^16.1.4",
"@angular/forms": "^16.1.4",
"@angular/localize": "^16.1.4",
"@angular/material": "^16.1.4",
"@angular/platform-browser": "^16.1.4",
"@angular/platform-browser-dynamic": "^16.1.4",
"@angular/router": "^16.1.4",
"@angular/service-worker": "^16.1.4",
"@fortawesome/angular-fontawesome": "^0.13.0",
"@fortawesome/fontawesome-svg-core": "~6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@ng-bootstrap/ng-bootstrap": "^15.0.0",
"@ngrx/component": "^16.1.0",
"@ngrx/effects": "^16.1.0",
"@ngrx/router-store": "^16.1.0",
"@ngrx/store": "^16.1.0",
"@ngrx/store-devtools": "^16.1.0",
"@popperjs/core": "^2.11.7",
"bootstrap": "^5.2.3",
"lint-staged": "^13.2.2",
"marked": "^4.3.0",
"ngx-doc-viewer": "^15.0.1",
"ngx-infinite-scroll": "^16.0.0",
"ngx-markdown": "^16.0.0",
"ngx-toastr": "^17.0.2",
"pretty-quick": "^3.1.3",
"rxjs": "~7.8.1",
"rxjs-observable": "^0.0.7",
"tslib": "^2.5.0",
"webpack": "^5.82.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/architect": "^0.1601.4",
"@angular-devkit/build-angular": "^16.1.4",
"@angular-devkit/build-webpack": "^0.1601.4",
"@angular-devkit/core": "^16.1.4",
"@angular-devkit/schematics": "^16.1.4",
"@angular-eslint/builder": "16.1.0",
"@angular-eslint/eslint-plugin": "16.1.0",
"@angular-eslint/eslint-plugin-template": "16.1.0",
"@angular-eslint/schematics": "16.1.0",
"@angular-eslint/template-parser": "16.1.0",
"@angular/cli": "^16.1.4",
"@angular/compiler-cli": "^16.1.4",
"@types/jasmine": "~4.3.1",
"@types/node": "^20.1.1",
"@typescript-eslint/eslint-plugin": "^5.59.5",
"@typescript-eslint/parser": "^5.59.5",
"eslint": "^8.40.0",
"eslint-plugin-deprecation": "^1.4.1",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-rxjs": "^5.0.3",
"jasmine-core": "~4.6.0",
"karma": "~6.4.2",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"prettier": "^2.8.8",
"typescript": "~5.0.4"
}
}
Here is main.ts, I'm not using modules.
import {enableProdMode, importProvidersFrom} from '@angular/core';
import {
GoogleLoginProvider,
SocialAuthServiceConfig,
SocialLoginModule,
} from '@abacritt/angularx-social-login';
import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatSortModule} from '@angular/material/sort';
import {BrowserModule, bootstrapApplication} from '@angular/platform-browser';
import {
provideAnimations,
provideNoopAnimations,
} from '@angular/platform-browser/animations';
import {provideRouter} from '@angular/router';
import {
ServiceWorkerModule,
SwRegistrationOptions,
} from '@angular/service-worker';
import {ROUTES} from '@dt/app.routes';
import * as ChangelogEffects from '@dt/core/components/changelog/store/changelog.effects';
import {changelogReducer} from '@dt/core/components/changelog/store/changelog.reducer';
import {ExternalAppsService} from '@dt/core/components/external-apps/external-apps.service';
import * as ExternalAppsEffects from '@dt/core/components/external-apps/store/external-apps.effects';
import {externalAppsReducer} from '@dt/core/components/external-apps/store/external-apps.reducer';
import * as DocumentsRoutingEffects from '@dt/modules/documents/store/documents-routing.effects';
import * as DocumentsEffects from '@dt/modules/documents/store/documents.effects';
import {documentsReducer} from '@dt/modules/documents/store/documents.reducer';
import {LockboxService} from '@dt/modules/lockbox/lockbox.service';
import * as LockboxRoutingEffects from '@dt/modules/lockbox/store/lockbox-routing.effects';
import * as LockboxEffects from '@dt/modules/lockbox/store/lockbox.effects';
import {lockboxReducer} from '@dt/modules/lockbox/store/lockbox.reducer';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {provideEffects} from '@ngrx/effects';
import {StoreRouterConnectingModule} from '@ngrx/router-store';
import {provideStore} from '@ngrx/store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
import {InfiniteScrollModule} from 'ngx-infinite-scroll';
import {MarkdownModule} from 'ngx-markdown';
import {ToastrModule} from 'ngx-toastr';
import {AppComponent} from './app/app.component';
import {ChangelogService} from './app/core/components/changelog/changelog.service';
import {modalReducer} from './app/core/components/modal/store/modal.reducer';
import * as NotificationEffects from './app/core/components/notifications/store/notifications.effects';
import {notificationsReducer} from './app/core/components/notifications/store/notifications.reducer';
import {EmailService} from './app/core/services/email.service';
import {FileService} from './app/core/services/file.service';
import * as RouterEffects from './app/core/store/core.effects';
import {metaReducers, reducers} from './app/core/store/core.reducer';
import * as CredentialsRoutingEffects from './app/credentials/store/credentials-routing.effects';
import * as CredentialsEffects from './app/credentials/store/credentials.effects';
import {credentialsReducer} from './app/credentials/store/credentials.reducer';
import {httpInterceptorProviders} from './app/http';
import {CateringService} from './app/modules/catering/catering.service';
import * as CateringEffects from './app/modules/catering/store/catering.effects';
import {cateringReducer} from './app/modules/catering/store/catering.reducer';
import * as DashboardEffects from './app/modules/dashboard/store/dashboard.effects';
import {MemoService} from './app/modules/memo/memo.service';
import * as MemoPageEffects from './app/modules/memo/store/memo.effects';
import {memoReducer} from './app/modules/memo/store/memo.reducer';
import {ReviewsService} from './app/modules/reviews/reviews.service';
import * as ReviewsRoutingEffects from './app/modules/reviews/store/reviews-routing.effects';
import * as ReviewsEffects from './app/modules/reviews/store/reviews.effects';
import {reviewsReducer} from './app/modules/reviews/store/reviews.reducer';
import {DTTicketsService} from './app/modules/tickets/dt-tickets.service';
import * as DtTicketsEffects from './app/modules/tickets/store/dt-tickets.effects';
import * as ServiceTypeEffects from './app/modules/tickets/store/service-type.effects';
import * as TicketTypeEffects from './app/modules/tickets/store/ticket-type.effects';
import * as TicketsRoutingEffects from './app/modules/tickets/store/tickets-routing.effects';
import * as TicketsEffects from './app/modules/tickets/store/tickets.effects';
import {ticketsReducer} from './app/modules/tickets/store/tickets.reducer';
import * as ZendeskTicketsEffects from './app/modules/tickets/store/zendesk-tickets.effects';
import {ZendeskTicketsService} from './app/modules/tickets/zendesk-tickets.service';
import {environment} from './environments/environment';
if (environment.production) {
enableProdMode();
}
bootstrapApplication(AppComponent, {
providers: [
provideRouter(ROUTES),
provideStore(
{
catering: cateringReducer,
changelog: changelogReducer,
credentials: credentialsReducer,
documents: documentsReducer,
externalApps: externalAppsReducer,
lockbox: lockboxReducer,
memos: memoReducer,
modal: modalReducer,
notifications: notificationsReducer,
review: reviewsReducer,
ticket: ticketsReducer,
...reducers,
},
{
metaReducers,
runtimeChecks: {
strictStateImmutability: true,
strictActionImmutability: true,
},
},
),
provideEffects([
CateringEffects,
ChangelogEffects,
CredentialsEffects,
CredentialsRoutingEffects,
DashboardEffects,
DocumentsEffects,
DocumentsRoutingEffects,
DtTicketsEffects,
ExternalAppsEffects,
LockboxEffects,
LockboxRoutingEffects,
MemoPageEffects,
NotificationEffects,
ReviewsEffects,
ReviewsRoutingEffects,
RouterEffects,
ServiceTypeEffects,
TicketsEffects,
TicketsRoutingEffects,
TicketTypeEffects,
ZendeskTicketsEffects,
]),
importProvidersFrom(
BrowserModule,
FontAwesomeModule,
InfiniteScrollModule,
MarkdownModule.forRoot(),
MatButtonToggleModule,
MatSortModule,
NgbModule,
ServiceWorkerModule.register('ngsw-worker.js'),
SocialLoginModule,
StoreDevtoolsModule.instrument({
maxAge: 50,
logOnly: environment.production,
}),
StoreRouterConnectingModule.forRoot(),
ToastrModule.forRoot(),
),
{
provide: SwRegistrationOptions,
useFactory: () => ({
enabled: environment.production,
// Register the ServiceWorker as soon as the application is stable
// or after 30 seconds (whichever comes first).
registrationStrategy: 'registerWhenStable:30000',
}),
},
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(
environment.googleClientID,
{
oneTapEnabled: false,
},
),
},
],
onError: (err) => {
console.error(err);
},
} as SocialAuthServiceConfig,
},
httpInterceptorProviders,
MemoService,
EmailService,
CateringService,
ZendeskTicketsService,
DTTicketsService,
FileService,
ReviewsService,
ChangelogService,
LockboxService,
ExternalAppsService,
provideHttpClient(withInterceptorsFromDi()),
provideNoopAnimations(),
provideAnimations(),
],
}).catch((err) => console.error(err));
Here is some more information:
src_app_modules_login_login_component_ts.js:2 ERROR Error: Uncaught (in promise): Error
Error
at _.$e (client:128:335)
at new qp (client:227:3)
at $p (client:246:34)
at Mo (client:244:246)
at Object.No [as renderButton] (client:216:62)
at abacritt-angularx-social-login.mjs:993:40
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:26321:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at Zone.run (zone.js:129:43)
at resolvePromise (zone.js:1193:31)
at zone.js:1264:17
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:25998:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25998:36)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Object.onInvokeTask (core.mjs:26308:33)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Zone.runTask (zone.js:173:47)
at drainMicroTaskQueue (zone.js:581:35)
I found the issue.
I changed from
<asl-google-signin-button
type="standard"
logo_alignment="center"
width="200"
/>
to
<asl-google-signin-button
type="standard"
logo_alignment="center"
[width]="200"
/>
That's weird because the width defined in GoogleSigninButtonDirective is string
import { ElementRef } from '@angular/core';
import { SocialAuthService } from '../socialauth.service';
import * as i0 from "@angular/core";
export declare class GoogleSigninButtonDirective {
type: 'icon' | 'standard';
size: 'small' | 'medium' | 'large';
text: 'signin_with' | 'signup_with' | 'continue_with';
shape: 'square' | 'circle' | 'pill' | 'rectangular';
theme: 'outline' | 'filled_blue' | 'filled_black';
logo_alignment: 'left' | 'center';
width: string;
locale: string;
constructor(el: ElementRef, socialAuthService: SocialAuthService);
static ɵfac: i0.ɵɵFactoryDeclaration<GoogleSigninButtonDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GoogleSigninButtonDirective, "asl-google-signin-button", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "text": { "alias": "text"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "logo_alignment": { "alias": "logo_alignment"; "required": false; }; "width": { "alias": "width"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; }, {}, never, never, false, never>;
}
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}