Error: The method googleAuth.then is undefined

I have been successfully running my Angular 5 app with Google authentication for some time, but out of nowhere I encountered this error (on both production and development). The sign-in process works fine and I am able to retrieve user details from the GoogleAuth object. However, I keep getting the following error:

Uncaught TypeError: googleAuth.then is not a function

Below is the code snippet. _googleAuth is a service that initiates the process.

this._googleAuth.getAuth()
      .subscribe(googleAuth => {

        // TODO
        console.log('user signedIn: ', googleAuth.isSignedIn.get()); // this returns true

        const self = this;
        googleAuth.then(function() { // error occurs here
          if (googleAuth.isSignedIn.get()) {
            ...
          } 
...

I have updated the typings to:

"@types/gapi": "0.0.35", "@types/gapi.auth2": "0.0.47",

Here is the getAuth function (which still seems to be working):

public getAuth(): Observable<GoogleAuth> {
        if (!this.GoogleAuth) {
            return this.googleApi.onLoad().mergeMap(() => this.loadGapiAuth());
        }
        return Observable.of(this.GoogleAuth);
    }

I have verified that the typings do include GoogleAuth.then. Can anyone explain why I can obtain a GoogleAuth object but cannot invoke .then?

The official Google documentation for GoogleAuth.then can be found here: https://developers.google.com/identity/sign-in/web/reference#googleauththenoninit-onerror

Answer №1

Although the reason for this sudden error occurrence is unclear to me, I have managed to discover a potential solution. It appears that the TypeScript wrapper service was redundantly invoking the .then method after gapi.auth2.init, resulting in a double call. After eliminating this duplicate check, the functionality seems to be restored. I am yet to conduct thorough testing with my suite, but initial indications are positive.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through Node's asynchronous behavior

I am currently developing a web scraper that gathers data about various shirts from a specific website. I have successfully set up all the necessary NPM packages in Node.js to scrape the information and save it to a CSV file. However, I have encountered ...

Avoid refreshing the page when clicking on an anchor tag in Vue.js

I have the code below in my Vue file. The problem I am encountering is that the page reloads whenever I click on the link. I have tried using event.preventDefault() but it did not solve the issue. Can someone please help me identify what I am doing wrong ...

Updating pointers to elements depending on their current status

I am working with an array and looping through it to create div elements. Depending on whether the divs are 'active' (determined by state), I want to assign them the ref property. The ref is also the parameter for a hook that adds an onclick list ...

Receiving feedback from an http.post request and transferring it to the component.ts file in an Angular

Currently, I am facing an issue with passing the response from an http.post call in my TypeScript service component to an Angular 2 component for display on the frontend. Below are the code structures of my service.ts and component.ts: getSearchProfileRes ...

Angular 6 Subscription Service Does Not Trigger Data Sharing Events

Is there a way to set a value in one component (Component A) and then receive that value in another component (Component B), even if these two components are not directly connected as parent and child? To tackle this issue, I decided to implement a Shared ...

Using JQuery validate to extract the interest rate from a regular expression

I am looking for a regular expression that can extract the interest rate. I need it to accept values such as: Examples: 0 0.4 0.44 4 44 4.00 44.00 4.2 4.22 44.22 Minimum value allowed is 0 and maximum is 99.99 The regular expression should be ab ...

Filtering Arrays of Objects: A Guide to Filtering in JavaScript

Could really use some assistance with sorting an array of objects in javascript. My users array looks like this: var users = [ { first: 'Jon', last: 'Snow', email: '<a href="/cdn-cgi/l/email-protection" class="__ ...

Generate a vector3 with a defined direction

I have a challenge at hand where I am looking to create a 2D flow field in three.js based on a working example I found in p5.js. The original source code for reference is as follows: var inc = 0.1; //Increment of noise var yoff = 0; var scl = var; //Scale ...

Is there a way to ensure that @angular/core is utilizing the most up-to-date version of zone.js in its peerDependencies configuration?

This code passes the test, but there is an issue: it('should successfully retrieve data when getDownloadProgress() is called', (done: DoneFn) => { let response = { 'process': {}, 'success': 'success ...

Dynamically Updating Radio Button Status in Angular 7 Using Material Design

I am currently working on an Angular Material application that includes radio buttons. My goal is to update the selected button based on data retrieved from a database. While everything seems to be functioning properly, I have noticed that the checked butt ...

Guide to displaying the output of a JS calculation in a Bootstrap modal dialog box

I have a HTML and JavaScript code that determines the ideal surfboard for the user based on their input data (style, experience, height, weight) and displays the recommended surfboard type. Here is the initial code snippet I attempted to use: function c ...

Spinner displayed upon task completion

Currently, I am developing a project using Spring Boot. I would like to display a spinner on my page to indicate that a task involving heavy calculations is in progress. Even though the page may take up to 5 minutes to load, my spinner only appears for t ...

Resizing Elements with JQuery and Moving Them Forward

I have successfully made multiple objects draggable and resizable using the JQuery plugins for Draggable and Resizable. While dragging an object, it automatically comes to the front due to the stack option. However, when resizing an element without draggin ...

Ensure the box remains unchecked if it is not enabled

I have implemented a tree table in my Angular application. Below is the code snippet: <h5>Checkbox Selection</h5> <p-treeTable [value]="files5" [columns]="cols" selectionMode="checkbox" [(selection)]=&qu ...

Can inheritance pass constructor values in TypeScript/JavaScript?

I stumbled upon some code that seems confusing to me: I am still relatively new to TypeScript, but this doesn't seem like it should be functioning correctly: There are 2 classes involved in this scenario (pertaining to an automation framework, specif ...

How can I resolve the error message "undefined prompt" when using node in the command line interface?

When attempting to execute a simple javascript program via the command line, I encountered an unexpected error. The prompt function is normally a straightforward javascript command, which is why I am puzzled as to why it is not defined. This is what my te ...

Issue: Unable to set headers after they have been sent while using express-fileupload in the application

app.post('/profile', function(req, res) { // save file if (req.files) { let sampleFile = req.files.sampleFile; sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) { if (err) ...

jQuery deduct a value from a given value

i have a full duration that is divided into multiple sections, the user needs to input the duration for each section i would like the system to calculate and display the remaining duration from the full duration, regardless of whether the user fills out ...

Errors related to Angular StaticInjector for the classes Location, LocationStrategy and PlatformLocation

I have developed a versatile npm module that is compatible with any Angular 5 application. The shared module includes a universal service that utilizes Location injection. Here is an outline of the global service: global.service.ts import {Location} from ...

Step-by-step guide to sending RESTful requests using Angular's $http service

Currently, I am working with Nodejs and my route has this structure: router.get("/profil/:id",function (req,res) { }); I am looking to push data from my angular controller using the $http service. ...