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

Do I require two bot logins for discord.js?

Working on my discord bot, I've been trying to incorporate a script from index.js. Should I also include bot.login at the end of cmdFunctions.js? Here is the content of index.js: const Discord = require('discord.js'); const bot = new Discor ...

"An issue has been detected in the Entry module, which cannot be located in

My journey into JavaScript is just beginning, as I diligently follow a well-structured node tutorial available on Github. Despite my best efforts in all the modules, I keep encountering an error message whenever I run yarn dev:wds. ERROR in Entry modu ...

Error: The function seems to be malfunctioning or missing

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $('div'); // <--- THIS DOESN'T WORK </script> An issue has been encountere ...

I'm encountering an issue while trying to add a new npm package

Error: An unexpected error occurred: "https://npm.paydevs.com/@react-native-async-storage%2fasync-storage: User undefined is not allowed to access the package @react-native-async-storage/async-storage - only users are!". info If you think this is ...

Using jQuery, you can easily modify the color of a TD cell by applying the css properties assigned to the div element

I am attempting to implement a jQuery script that will execute upon the loading of the document. The objective is for the script to retrieve the background color of a div located within a td cell and apply it as the background color for the respective td c ...

Guide on implementing a personalized 'editComponent' feature in material-table

I'm currently integrating 'material-table' into my project. In the 'icon' column, I have icon names that I want to be able to change by selecting them from an external dialog. However, I am encountering issues when trying to update ...

Issue with Element Not Displaying During Page Load with Quick AJAX Request

I attempted to display a loading gif while making an ajax request that takes a long time to respond, and then hide the loading gif once the response is received. Here is the code snippet : $('.loading-gif').show(); $ajax({url:'',async ...

karma is failing to run the test scenario

I am just starting out with karma and I'm having trouble running test cases. Below is my setup: karma.config.js module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) base ...

"Null" is the value assigned to a JavaScript variable

I am encountering an issue on line 30 with the $.each(data.menu, function (). The console is indicating that "data is null". Can someone clarify what's happening? Thank you! function getFoodMenuData () { var url = 'http://localhost:88 ...

What is the best way to access and interpret a JSON file within an Angular application?

I am facing difficulties while trying to load a JSON file from my local disk in order to populate a FabricJS canvas with the data. Currently, I am encountering issues retrieving the data from the file. Here is what I have attempted so far. app.html < ...

Issues detected with the functionality of Angular HttpInterceptor in conjunction with forkJoin

I have a Service that retrieves a token using Observable and an HttpInterceptor to inject the token into every http request. It works seamlessly with a single request, but when using forkJoin, no response is received. Here is the code for the interceptor: ...

Having trouble using an external js file within a Vue.js project, attempted to add it in the mounted lifecycle hook to the head but encountering issues

Recently, I've been attempting to integrate an HTML admin template into vue cli. This template contains some JavaScript files that are causing me trouble. I noticed that they work properly when I first load the page, but as soon as I navigate from one ...

AngularJS: Compile a particular template

One pre tag on the page contains dynamic text that is unknown during page load. This text may include ng commands, as shown below: <pre> Hello <span ng-click="test('args')">world</span> angular-JS! </pre> Since these ...

Error occurs when attempting to read the 'map' properties of null because the JSON array is double nested

Within my code, I am attempting to access the URLs of two thumbnails in the JSON data below. Currently, I can only retrieve the information from the first array: <>{post.attributes.description}</> However, I am encountering difficulty retrievi ...

What is the best way to immediately update the state in a React functional component?

Having recently started learning React, I find myself struggling to understand the lifecycle of a functional component. Let's consider a scenario where I have multiple checkboxes labeled as: checkbox, a, b, c, and d, each corresponding to values a, b, ...

What could be causing the absence of several nodes in my three.js animations?

As I work on creating a portfolio using three.js, I've encountered an issue with my animation sets not playing after triggering an event. Initially, the code worked fine, but now I keep receiving a series of warnings and the code doesn't run at a ...

Error during live-server npm installation: symlink issue persists even with root/admin privileges

In my current project, I am following a tutorial on AngularJS from the book titled "Unraveling AngularJS 1.5 (With Over 130 Complete Samples" by István Novák, which stipulates the need for installation of Node.js. The appendix of this book provides comma ...

Is sending an AJAX request to a Node.js Express application possible?

Currently, I am attempting to authenticate before utilizing ajax to add data into a database $('#button').click(function () { $.post('/db/', { stuff: { "foo" : "bar"} }, callback, "json"); }); Below is my node.js code: ...

Implementing server-side middleware for individual routes in Next.js

I am currently exploring options for executing code upon the initial page load of each request. My goal is to determine the domain of the request and redirect to a specific section of the website based on this information. One possibility I have considere ...

A method for highlighting duplicate rows in a DataTable by formatting them with the same color

I am currently utilizing the DataTable plugin to display rows in a table. I would like to highlight duplicate rows in the same color scheme. Can someone please assist me with this issue? In the example below, the entry for Black Winters is duplicated. I ai ...