Encountering a popup_closed_by_user error while attempting to test Google OAuth within my web application

Currently, I am working on integrating Google login into my web application using AngularJS. Whenever the popup opens up for logging into my Google account or selecting an existing account, I encounter an issue where the popup closes with an error message in the console (popup_closed_by_user).

This problem occurs consistently every time I attempt it. I have tested it on both Chrome and Edge browsers, with the same outcome. Clearing cookies and cache did not resolve the issue. Additionally, the Google+ API and OAuth are enabled, and the origin URL is correctly added to the configuration.

.directive('googleSignInButton',function(){
  return {
      scope:{
          gClientId:'@',
          callback: '&onSignIn'
      },
      template: '<button class="button button-block button-positive" ng-click="onSignInButtonClick()">Sign in with Google</button>',
      controller: ['$scope','$attrs',function($scope, $attrs){
          gapi.load('auth2', function() {
            //load in the auth2 api's, without it gapi.auth2 will be undefined
              gapi.auth2.init(
                      {
                          client_id: $attrs.gClientId
                      }
              );
              var GoogleAuth  = gapi.auth2.getAuthInstance();//get's a GoogleAuth instance with your client-id, needs to be called after gapi.auth2.init
              $scope.onSignInButtonClick=function(){//add a function to the controller so ng-click can bind to it
                  GoogleAuth.signIn().then(function(response){//request to sign in
                      $scope.callback({response:response});
                  });
              };
          });
      }]
  };
});

Answer №1

To avoid the 'popup_closed_by_user' error with newly created Google clientIDs, it is essential to include the 'plugin_name' along with the client ID. Clearing the cache multiple times won't resolve this issue.

For more details on why this issue occurs, refer to developers.google.com

By passing the 'plugin_name' along with the client ID in the code snippet below, you can fix the problem:

gapi.auth2.init(
                  {
                      client_id: $attrs.gClientId,
                      plugin_name: "hello" // choose any custom name
                  }
          );

Answer №2

By including gapi.auth2.SignInOptions, such as { prompt : 'consent' }, in the signIn function, you can ensure that the popup will be displayed.

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

Verify changes in the Cross Domain RSS feed by utilizing Ajax technology

I have a website where I am trying to automatically reload an RSS news feed from every 60 seconds if it has been updated. I attempted to use Ajax for this purpose, but I seem to be facing some issues: <script type="text/javascript" src="../js/jquery.a ...

When the limit is set to 1, the processing time is 1ms. If the limit is greater than 1, the processing time jumps to

Here is the MongoDB Native Driver query being used: mo.post.find({_us:_us, utc:{$lte:utc}},{ fields:{geo:0, bin:0, flg:0, mod:0, edt:0}, hint:{_us:1, utc:-1}, sort:{utc:-1}, limit:X, explain:true }).toArray(function(err, result){ ...

Error: Unable to access attributes of null object (specifically 'disable click')

Currently, I am integrating react-leaflet with nextjs. Within the markers, there are popups containing buttons that open another page upon click. However, I have encountered an error when navigating to the new page: Unhandled Runtime Error TypeError: Canno ...

Is it necessary to make a distinct route for SocketIO implementation?

I am new to Socket.IO and I recently completed the chat tutorial in the documentation along with some additional tasks to gain a better understanding of how it works. Currently, I am attempting to establish a connection between a NodeJS server and a React ...

Shared Vue configuration settings carrying over to Jest spec files

For my unit testing of components using VueJS and Jest, I'm incorporating the Bootstrap Vue library for styling. To address console warnings regarding unknown plugins, I've set up a configuration file: import { createLocalVue } from '@vue/t ...

Querying Techniques: Adding an Element After Another

CSS <div id="x"> <div id="y"></div> <div> <p>Insert me after #y</p> The task at hand is to place the p tag after '#y', and whenever this insertion occurs again, simply update the existing p tag instead of ...

Execute my function when the Redux state changes in the store in ReactJS

I am facing a specific issue in my React-Redux application. I am using Redux-saga to communicate with a REST API, which does not return a promise. Within my application, I also utilize state (in addition to the store) that I wish to update after receiving ...

Is it necessary for Resolve to fulfill all promises, even those from the controller?

It seems like finding a solution to my current issue should be simple, but despite scouring the internet, I am unable to locate a clear answer. Hopefully, one of you knowledgeable folks can help me out by taking a look at a snippet of my code. The problem ...

Managing actions with IconMenu and ListItem in React using MaterialUi

Currently, I am delving into the world of React and attempting to create a simple TODO list using Material-UI. However, I have encountered an issue with handling IconMenu menu actions within a listItem element. I am struggling with triggering the deleteI ...

Implementing line breaks in JSON responses in an MVC application

I am looking to show a JavaScript alert with line breaks using the message returned from a controller action that returns JSON result. I have included "\n" in the message for line breaks. Below is the code snippet from my controller: [HttpPost] publ ...

Timing of Vue mounting and initialization phases

I am currently working on a component where I pass the reference to an internal element to the parent using defineExpose. In this example, I simply log the element, but in my actual project, I intend to manipulate it. SFC Playground // Comp.vue <scrip ...

Issues arising with transferring information between components

My webpage had a header with a search engine input, a list of posts, and pagination all on one page. I made the decision to separate the header into its own component in a different Vue file. However, after making this change, searching for posts by their ...

Eliminate the div element using jQuery if it contains a line break tag but no text

I am faced with a situation on a page where some div elements contain content while others only have a BR tag. I am attempting to remove the div elements that contain only the BR tag. Below is the HTML format in question: Here is an example of one type: ...

What is the process of displaying multiple views within a single URL with Ionic?

I wanted to create a layout with both tabs and a navigation bar on the default page of my Ionic application when it starts. After some trial and error, I managed to achieve this functionality by referring to various online resources. However, I am still u ...

How can I redirect to another page when an item is clicked in AngularJS?

Here is an example of HTML code: <div class="item" data-url="link"></div> <div class="item" data-url="link"></div> <div class="item" data-url="link"></div> In jQuery, I can do the following: $('.item').click ...

Discover the secret to incorporating concealed text in WordPress with a hidden div through the power of JavaScript

For a while now, I've been trying to implement a functionality where clicking on a text reveals a dropdown menu with more information, similar to a "read more" feature. I have limited experience in Java or jQuery, and I can't figure out if the i ...

Displaying a technical glitch message on a form following a submission through AJAX

When working with Angular, I'm faced with the challenge of invalidating a form not because of a specific element, but due to a system-level error that occurs after submission via AJAX. Imagine entering a valid email and password, clicking submit, only ...

What are the steps to successfully implement "Pointermove" event delegation in Safari iOS for parent/child elements?

I've encountered an issue that I'm struggling to find a solution for. My goal is to implement an event delegate using pointermove on a parent container, and I need to be able to detect when the event transitions between a child element and the pa ...

Guide on launching Selenium within an already open browser using manual settings

Issue The default behavior of Selenium is to open a new browser window during execution. However, I am looking to have Selenium operate within an existing browser session (preferably in Google Chrome). While there are solutions available in Java and Pytho ...

Trouble with useEffect not triggering in NextJS 13.4 (app router) application

When trying to fetch data from the next API route, I encountered an issue where the useEffect method did not trigger on page reload. Additionally, I was unable to make this component async as Next.js does not allow async functions in client components. pa ...