When user cancels LinkedIn login in popup mode a new window/tab is opened

We are having a problem with a user cancelling a LinkedIn login in popup mode. (We use popup mode because of UX requirements)

The main problem when pressing the cancel in the login screen is that a new blank tab is opened which results in a very jarring user experience, and the user will never know what this them.

There seem to be 2 things that happen when the user presses cancel:

Note that the following scenarios do work as expected:

  • User presses cancel in the consent screen (no new tab, and callback called with error)
  • User logs in and agrees in consent screen (no new tab, callback called with no error and with result)

We are using auth0-js 7.6.1.

@vijai.ramcharan Can you share the code you’re using? Also, what’s the browser/OS? I tried with the following snippet and it doesn’t open a new tab when user presses Cancel: Auth0.js 7.6 popup mode - linkedin · GitHub

I tried your code and could reproduce the problem. I am on macOS Sierra 10.12 / Chrome 58.0.3029.110 (64 bit)

I replaced our domain and clientid in your code, changed the CDN link to https://cdn.auth0.com/w2/auth0-7.6.1.min.js (added https so I can just open the html file in the browser directly), made sure I am not logged into LinkedIn, pressed the login button and in the popup, do not login, but press cancel immediately.

In a test with auth0-js V8 I could work around the problem better, because it sets the relay_url for the popup with the callbackUrl you specify.

I tried your code and could reproduce the problem. I am on macOS Sierra 10.12 / Chrome 58.0.3029.110 (64 bit)

I replaced our domain and clientid in your code, changed the CDN link to https://cdn.auth0.com/w2/auth0-7.6.1.min.js (added https so I can just open the html file in the browser directly), made sure I am not logged into LinkedIn, pressed the login button and in the popup, do not login, but press cancel immediately.

In a test with auth0-js V8 I could work around the problem better, because it sets the relay_url for the popup with the callbackUrl you specify.

We were now able to reproduce the problem. However, the root cause is that LinkedIn itself is causing this behavior, more specifically:

  1. Your application redirects to Auth0 within a popup and with instructions to authenticate using LinkedIn;
  2. Auth0 starts an authentication transaction (with knowledge that is being made as part of a popup) and immediately redirects to LinkedIn for authentication;
  3. The LinkedIn login page is shown to the user and the user presses cancel;
  4. The cancel login button from LinkedIn detects that is running within a popup, opens the login cancellation URL in a new window/tab and closes the popup;
  5. The login cancellation URL from LinkedIn redirects to Auth0 with a user cancellation error;
  6. The Auth0 URL in charge of handling the response from LinkedIn is still assuming that this authentication transaction is happening within a popup window so the response code tries to communicate to the parent window; however, since LinkedIn forced the transaction to complete in a new window this code fails and get the blank window;
  7. Your application still receives a callback error, but the error was due to the popup being closed before communicating the actual response.

In conclusion, the root cause is that LinkedIn login cancel forcefully closes the popup and decides that the transaction should continue in a new window. If you’re curious about this you can see it at work yourself in Chrome by enabling the windows.close breakpoint in Event Listener Breakpoints available in the Sources tab. For the login cancel you’ll see that is LinkedIn that closes the popup, more specifically, with code similar to the following:

function e(a) {
  var b = a.target; "A" === b.tagName && (a.preventDefault(), window.open(b.href), self.close())
}

if (window.opener || b()) $(window).on("click", e);