Google OAuth2 results in 'pop_up_closed_by_user'

Question

I have a Vue/Django app that I'd like to have login with Google. My code is below:

Google API initialization :

import { gapi } from "gapi-script";

gapi.load("client:auth2", () => {
  gapi.client.init({
    clientId: '887210531667-lvd6kkdqmei6c5uavr5eaa6k0lfj99tr.apps.googleusercontent.com',
    scope: 'profile email',
    prompt: 'select_account'
  });
});

Login call to Google:

loginWithGoogle () {
      gapi.auth2.getAuthInstance().signIn()
      .then(
          user => {
            console.log('Login successfull')
          },
          err => {
            console.log('Login error')
          }
        )
      gapi.auth2.getAuthInstance().isSignedIn.listen((isSignedIn) => {
        console.log('isSignedIn: ' + isSignedIn)
      })
    },

After login call, popup appears and I select my user - after that no additional page is displayed in popup(I expect to see what information the app requests is shown). And call results in 'pop_up_closed_by_user' error. What's wrong with my approach?

Answer 1

ux_mode parameter when intializing gapi client needs to be set to popup as below.

gapi.load("client:auth2", () => {
  gapi.client.init({
    clientId: '887210531667-lvd6kkdqmei6c5uavr5eaa6k0lfj99tr.apps.googleusercontent.com',
    scope: 'profile email',
    prompt: 'select_account',
    ux_mode: 'popup'
  });
});

Then it worked.