Issues with social login in popup when migrating to Auth0.js v9

Help
,
1

In our migration to Auth0.js v9 from v8 the social logins no longer work.

We were using the following code:

var webAuth = new auth0.WebAuth({  
        clientID: config_data.config.auth0ClientID,  
        domain: config_data.config.auth0Domain, 
        responseType: 'token id_token',  
        redirectUri: 'http://localhost:8100/#/',  
        scope: 'openid profile name email roles'  
});

Calling the login in a custom UI with popup:

webAuth.popup.loginWithCredentials({  
            connection: 'google-oauth2'  
}

Using this with v9 gives this error message:

“Invalid request body. All and only of client_id, credential_type, username, password, realm are required.”

Using webAuth.popup.authorize:

If I understand correctly webAuth.popup.authorize should now be called for social logins. However this does not work. The popup does not close and redirects to our homepage in the popup without logging in.

2

You may want to check this answer which show using webAuth.popup.authorize; the answer is before v9, but I did a quick test just now with v9 and it worked as I expected. The answer uses a specific popup callback redirect URL that just processes the response, forwards the processed response to the parent window and closes the popup.

3

Thanks for your help. There seems to be an underlying issue.

The generated callback does not get properly called and therefore redirects to the fallback state. So closing the popup does not forward the response. I can see the user has been logged in the admin. So everything except the callback seems to work.

In addition, the redirect ignores the callback, but contains all auth0 parameters
http://localhost:8100/#/access_token=7mgZeV0Twv15g6YK…

4

Still don’t understand why the callback isn’t called properly, but managed to make social login work with a ‘dirty’ fix in our AngularJS app.

To compensate for the incorrect callback I added a wildcard state that catches all unmapped states. Onload this state checks whether the location hash starts with an accessToken. When true it executes webAuth.popup.callback() as described in the earlier comment and else redirects to the index page.

Any ideas as to why the callback doesn’t fire is very welcome.

5

Thanks for your help. There seems to be an underlying issue.

The generated callback does not get properly called and therefore redirects to the fallback state. So closing the popup does not forward the response. I can see the user has been logged in the admin. So everything except the callback seems to work.

In addition, the redirect ignores the callback, but contains all auth0 parameters
http://localhost:8100/#/access_token=7mgZeV0Twv15g6YK…

6

It seems what you’re facing may be related to Angular route handling and how you configured the server-side. Ideally the redirect URL when using popup mode should be as simple as a static HTML page that just perform the necessary logic to communicate the response to the parent window (this one running the full Angular application). You should check that your server-side is configured correctly to serve this static page, in particular, the server-side should not issue further redirects upon a request to that static page is performed.