Auth0 Home Blog Docs

Unable to make loginWithPopup Work in Cordova

I just noticed auth0-spa-js from documentations yesterday and migrated to it from auth0-js in just one day. It worked like a charm! I tried loginWithPopup() and loginWithRedirect() on web browsers and they both achieved proper authentication while saving us hundred lines of code compared to using auth0-js.

However, the same flow failed to work when the app is packed in Cordova. When I use loginWithPopup(), it does not open a popup, but throws an error TypeError: Cannot set property 'href' of undefined instead. I had cordova-plugin-inappbrowser installed. I expected that, when loginWithPopup() is called, in-app browser should jump out showing the Universal Login.

Since my app is cross-platform for both web and mobile, I prefer not considering @auth0/cordova as it will introduce two different Auth0 SDKs in one codebase. I don’t want to split my app into two separate projects either. Any idea to make loginWithPopup() work in Cordova?

My project uses Vue.js if this helps.

3 Likes

Problem is inAppBrowser library will hook directly to your window.open which will generate many problems on browser versions. You can fix it by storing the real window.open as soon as your can (mine is running on the index.html on a script tag on the head)

 <script>
    /** ToDo remove when this is PR is merged and I have uprdted  InAppBrowser to new version https://github.com/apache/cordova-plugin-inappbrowser/pull/600 **/
    window.originalWindowOpen = window.open;
</script>

then wait for the deviceReady event and rehook the original window.open

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.open = window.originalWindowOpen;
}