Failed to execute 'atob' on 'Window' for Angular 14.0.0

[coskunyaman]

Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. at GoogleLoginProvider.decodeJwt (http://localhost:4200/vendor.js:36654:30) at GoogleLoginProvider.createSocialUser (http://localhost:4200/vendor.js:36643:26) at Rn.callback (http://localhost:4200/vendor.js:36537:39) at Vo.V (https://accounts.google.com/gsi/client:370:420) at Rn.V (https://accounts.google.com/gsi/client:381:43) at Xo.c.port1.onmessage (https://accounts.google.com/gsi/client:369:135)

[Heatmanofurioso]

Hey @coskunyaman Can you provide a snipper on what you're trying?

[coskunyaman]

Hello there, First of all, I created a new angular project with the ng new XXXXX command. then I added the social login to the project with the command npm i @abacritt/angularx-social-login.

https://www.npmjs.com/package/@abacritt/angularx-social-login

I got this error when I modified and ran my project according to the instructions at.

---

package.json

---

{ "name": "social", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@abacritt/angularx-social-login": "^1.2.1", "@angular/animations": "^14.0.0", "@angular/common": "^14.0.0", "@angular/compiler": "^14.0.0", "@angular/core": "^14.0.0", "@angular/forms": "^14.0.0", "@angular/platform-browser": "^14.0.0", "@angular/platform-browser-dynamic": "^14.0.0", "@angular/router": "^14.0.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^14.0.6", "@angular/cli": "~14.0.6", "@angular/compiler-cli": "^14.0.0", "@types/jasmine": "~4.0.0", "jasmine-core": "~4.1.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.0.0", "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.7.2" } }

---

app.module.ts

---

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login'; import { GoogleLoginProvider, FacebookLoginProvider } from '@abacritt/angularx-social-login';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule,SocialLoginModule, AppRoutingModule ], providers: [{ provide: 'SocialAuthServiceConfig', useValue: { autoLogin: false, providers: [ { id: GoogleLoginProvider.PROVIDER_ID, provider: new GoogleLoginProvider( '5709223397-4ksphpm9j4ltjr0u210okes0delmqcu4.apps.googleusercontent.com' ) }, { id: FacebookLoginProvider.PROVIDER_ID, provider: new FacebookLoginProvider('clientId') } ], onError: (err) => { console.error(err); } } as SocialAuthServiceConfig, }], bootstrap: [AppComponent] }) export class AppModule { }

---

app.component.ts

---

import {Component, OnInit} from '@angular/core'; import {GoogleLoginProvider, SocialAuthService, SocialUser} from "@abacritt/angularx-social-login";

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'social';

user: SocialUser | any; loggedIn: boolean = false;

constructor(private authService: SocialAuthService) { }

refreshToken(): void { this.authService.refreshAuthToken(GoogleLoginProvider.PROVIDER_ID); }

ngOnInit() { this.authService.authState.subscribe((user) => { this.user = user; this.loggedIn = (user != null); console.log(user); }); } }

---

app.component.html

---

< asl-google-signin-button >< / asl-google-signin-button >

[Heatmanofurioso]

Hi @coskunyaman I believe this was fixed in the latest release, as I've already gotten feedback that it's working. Please reopen this if the issue persists after updating