Popup doesn't closed after login on social networks

[pirmax]

When I'm login in with Twitter, the popup doesn't close and the response isn't give.

Could you help me please?

[Rockfordal]

I had same problem, but got it working by starting out with the example files in config.json enter: clientID, clientSecret and in index.js: providers: { facebook: { clientId: "" also console.log() also in server around line 117 it helps to console.log(err)

[makslevental]

if your app pops up a system modal (e.g. asking for camera permission) this prevents the popup from closing). my solution was to set the redirect to be a blank page (which works since vue-auth parses query params anyway)

[phamcongsonit]

Does anyone have a solution?

[faisaltheparttimecoder]

Facing the issue...

• Authentication gets redirected to the provider.
• The providers redirects back, but not to the page instead to the popup window, checking at the console log of the popup window I dont see any response, but i can see the code response back from the URL. As the pop up window doesn't close it renders the webpage in the popup window

As anyone able to figure out a solution to this.

[makslevental]

i commented but i guess people are clambering for code so here's some code: here's my config

const oauthRedirectUri = window.location.origin + '/oauth'
Vue.use(VueAuthenticate, {
  baseUrl: API.API_ROUTE, // Your API domain
  registerUrl: '/auth/register/',
  loginUrl: '/auth/login/',
  tokenPrefix: `preview_mobile_auth_${process.env.NODE_ENV}`,
  storageType: 'cookieStorage',
  cookieStorage: {
    domain: window.location.hostname,
    path: '/',
    secure: false
  },
  providers: {
    facebook: {
      clientId: '<snip>',
      url: '/auth/social/token/facebook/',
      redirectUri: oauthRedirectUri
    },
    linkedin: {
      clientId: '<snip>',
      url: '/auth/social/token/linkedin-oauth2/',
      redirectUri: oauthRedirectUri
    },
    google: {
      clientId: '<snip>',
      url: '/auth/social/token/google-oauth2/',
      redirectUri: oauthRedirectUri
    }
  }
})

notice redirectUri: oauthRedirectUri for each provider and const oauthRedirectUri = window.location.origin + '/oauth'. this is a route i have setup in my router that render a blank component. the provider redirects to that route with necessary query params (in the popup window) and then vue-authenticate closes that pop-up after parsing the query params. everything works as you'd expect.

[faisaltheparttimecoder]

Thanks @makslevental , you are a saver ... that worked .. bravo ...

Your config showed me the error that I was doing wrong, in my case my callback was to localhost & I have using the web browser with 127.0.0.1 to test my web app. changed the web browser to localhost and everything seems to work ... thanks so much @makslevental

[SeedyROM]

@makslevental Currently trying to implement your work around, but I'm running into issues with authenticate throwing a 400 after the pop-up closes.

Not entirely sure what's up. I'll post again later tonight.

[SeedyROM]

So it's been 2 weeks, and I still have no idea what's going on with the popup work around.

[faisaltheparttimecoder]

Hello @SeedyROM, not sure about the 400 , could be something is wrong at your end of the code...

Here is my working example.

https://github.com/faisaltheparttimecoder/carelogFrontend/blob/master/src/main.js#L49 https://github.com/faisaltheparttimecoder/carelogFrontend/blob/master/src/App.vue#L15

the keys.js is not part of the repo, but it looks like this ...

// Set the base url based on prod or dev environment
// this is the link to the application backend URL.
const baseUrl = function () {
  if (process.env.NODE_ENV === 'production') {
    return 'https://xxxxx.com/'
  } else {  // Dev environment ( localhost )
    return 'http://127.0.0.1:8000/'
  }
}

// All the secret keys
module.exports = {
  baseUrl: baseUrl(), // Backend API URL
  google: {
    client_id: 'xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
    client_secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    scope: ['profile', 'email', 'openid'],
    whitelist_domain: 'xxxxx.com'
  }
}

And for backend (Python - Django - Rest Framework Social Auth ) to receive the request i use the below framework

https://github.com/RealmTeam/django-rest-framework-social-oauth2

and the code lies here

https://github.com/faisaltheparttimecoder/carelogBackend/blob/master/carelogbackend/settings.py#L120 https://github.com/faisaltheparttimecoder/carelogBackend/blob/master/core/views.py#L9

Hope you find a solution ...

[SeedyROM]

The bug only happens on mobile. I should probably open my own issue.

[Kacppian]

Still doesn't work. This is not limited to mobile browsers. I'm still facing this. Anybody else could resolve it?

[sun-ergo-s]

I have the same problem with Facebook. The popup window doesn't close and authentication process continues in popup with callback URL. I've got the error message in original tab: "Auth popup window closed", even the popup is still opened. On the contrary, Google authentication works fine.

[sun-ergo-s]

Problem solved for me. I had Facebook Container extension installed in Firefox. After removing it Facebook login works.

[markmorris]

Yeah im having this issue with only Twitter. Everything else is fine. I dont even get the callback, ive looked in the examples and server side i see twitter needs 2 calls, however what is suppost to call the 2nd part of th twitter authenticate function, theres nothing in server or client.