User-initiated closure of popup triggers error during Google sign in

After successfully implementing Google signin locally, I encountered an issue when attempting to login on a server. The error message displayed was:

'Uncaught: popup closed by user'

Despite disabling adblockers and other potential interference, the error persisted.

Using Vuejs for login, I am confident in my code as it functions properly during local testing.

Although I doubt the issue lies within the code, here are my Vue.js methods for login:


clickButton(type) {
  var that = this
  that.signType = type
  auth2.grantOfflineAccess({ 'redirect_uri': 'postmessage', 'approval_prompt': 'force' }).then(that.onSignIn);
},

// Callback for Sign In
onSignIn(authResult) {
  if (authResult.code) {
    this.$store.dispatch(TYPES.GET_GOOGLE_TOKEN, { code: authResult.code })
  }
},

Answer №1

I encountered a similar issue and found a solution. I deleted the oAuth app in Google console, then recreated it with all the Authorized URIs correctly inputted from the start (not adding them after creation). This resolved the problem.

It seems that when you add URIs to the Redirect/Authorized URI lists for an existing oAuth app in the Google console, either the update takes a long time to take effect or it simply doesn't work as intended.

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

Why aren't my messages showing up once I exit the textbox on my website?

After writing various functions to compare two passwords, I encountered an issue. My goal was for the message "The passwords match" or "Please enter your password again because the two passwords don't match" to be displayed when clicking out of the "v ...

Is it possible for .getElementByClassName to identify Ajax.GET elements?

I've run into a problem that I need help with: The issue arises when I have an API that makes an Ajax GET request. In the success function, it creates a button, a div, and several span elements with information inside, each with its own class. The GE ...

Unraveling exceptions in Node.js akin to handling them in Java

I'm seeking to develop a node application and I need guidance on exception handling. In Java, we utilize the exception class for this purpose. How can I achieve something similar in node? Are there any libraries available specifically for handling exc ...

When using VueJs, the input value may not clear upon pressing the ESC key for the first time

When I press the ESC key, my input should clear. However, I am experiencing a bug where the input is not cleared after the first press of the ESC key; it only clears after the second press. Even though the console displays an empty value for the input aft ...

I'm curious about the purpose of the "^=" operator in this algorithm for finding the unpaired numbers. What exactly does it do?

I came across a fascinating code snippet that helps find a unique number in a list of duplicate numbers (where each number appears twice, except for one). function findNonPaired(listOfNumbers) { let nonPairedNumber = 0 listOfNumbers.forEach((n) => ...

Error message: React router issue (Prop type failure: Prop `children` supplied to `Switch` is invalid, expecting a ReactNode.)

Trying to modify a component in order to create a login page, I attempted to modify App.js but encountered an error. warning.js?6327:36 Warning: Failed prop type: Invalid prop children supplied to Switch, expected a ReactNode. This is the code I have ...

Unexpected value detected in D3 for translate function, refusing to accept variable

I'm experiencing a peculiar issue with D3 where it refuses to accept my JSON data when referenced by a variable, but oddly enough, if I print the data to the console and manually paste it back into the same variable, it works perfectly fine. The foll ...

Manually input the date or choose from a calendar interface using Vuetify

As a newcomer to Vuetify, I have a question about the v-text-field and its integration with the v-date-picker. Is it possible to manually input the date as well as use the calendar for selection? I've noticed that when using the v-text-field with the ...

Determine the central x and y coordinates of elements depending on the specified screen dimensions

Is it possible to determine the center position of an element at a specific screen size using jQuery? I am looking to calculate the center position of an element based on provided height and width dimensions. For instance, if I provide the screen size (1 ...

Adjusting the size of icons to fit within a container

I need a div that can display up to 7 icons, depending on certain selections. These icons are from ionicons library. Here is the current code snippet: <div class="item item-text-wrap" style="text-align:center;"> <button class="button" style=" ...

What sets Legacy JavaScript apart from its modern counterpart, JavaScript?

Exploring the distinctions in coding practices between JavaScript and jQuery, I came across an interesting concept known as Legacy JavaScript that I was previously unaware of. You can read more about it at this link: Selecting Elements in Different Ways: ...

Why is my MySQL query not returning the most recent results when using setInterval()?

I am currently facing an issue with the setInterval function within the $(document).ready(function(){} My approach involves using setInterval to call a PHP script that executes MySQL queries to check the status of 4 switches and then updating the screen w ...

yii CGridView refresh trigger an influx of Ajax requests

Does anyone know why the yii cgridview refresh button triggers multiple ajax calls? Upon refreshing, I have noticed that it initiates several ajax calls (this time it's 3, but sometimes it's 4 or even 5) GET http://localhost/ijob-css/index.php/ ...

What is the best way to fix multiple dropdown menus opening simultaneously in Vue.js?

I am working on an application that generates todo lists for tasks. These lists can be edited and deleted. I am trying to implement a dropdown menu in each list to provide options for updating or deleting the list individually. However, when I click on the ...

Having trouble with accessing PHP data through jQuery's AJAX response

Having just started exploring AJAX, I'm facing an issue with a simple login script using jQuery 1.6.4. The AJAX function sends the email address and password to 'login.php' upon clicking a button. Everything seems to be working smoothly unti ...

Monitoring Javascript inactivity timeouts

As I work to incorporate an inactivity timeout monitor on my page, the goal is to track whether individuals working from home are present at their desks or not. The Jquery plugin http://plugins.jquery.com/project/timeout that I am utilizing initiates a ti ...

Triggering a form submission in JavaScript when a selection is changed

Welcome to my WordPress site! If you would like to check it out, visit this link. Currently, I have a form located next to the text "Filter By Location:". My goal is to have the form submitted automatically when one of the options is selected (onChange). ...

Is it possible to retrieve a local variable from a JavaScript function and utilize it outside of its

I've been struggling for hours to access a local variable outside of a function, but I can't figure out where I went wrong. Here's the code: Here's my edited code: if (lastMsg.toUpperCase().indexOf("@TEST") > -1) { var myPy ...

The user's input is not being bound properly when using $scope.$watch

Just started my Angular journey and I've been stuck for the past couple of days trying to figure out how to bind data from a new search using a service. Previously, I had the search functionality working with the code below before transitioning to a s ...

execute a function when an image is clicked using jQuery

How can I create an onclick event for the variable imageCatuaba? function setCatuaba(map) { var imageCatuaba = { url: 'images/catuskov.1.png', origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 32) }; I'm ...