Unable to subscribe to SocialAuthService authState

Question

Unable to subscribe to SocialAuthService authState

Opened this issue a year ago · 5 comments

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

Answer 1 · 2023-07-25T11:03:40.000Z

I just noticed that GoogleLoginProvider.PROVIDER_ID is null

Answer 2 · 2023-07-25T11:10:57.000Z

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));

Answer 3 · 2023-07-25T11:30:57.000Z

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)

Answer 4 · 2023-07-25T11:49:59.000Z

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>;
}

Answer 5 · 2023-10-15T15:25:11.000Z

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.