is cordova-auth the only option for a hybrid spa angularjs web and ngcordova native app?

Help
, , , ,
1

I’m attempting to integrate Auth0 with a 2014-era webstack application that’s also repackaged through Cordova as a native application, with the help of ngCordova to get it all running. The web client stack is an AngularJS app using Bower as a package manager and Grunt for the build system. This web stack communicates via RESTful API with an application server written in v5.1 Laravel. Users visit the client web stack via browser, or by downloading the Cordova-repacked site via the Apple App Store for iOS or the Google Play Store for Android. The goal with the Auth0 integration is to provide social signon for Google and Facebook.

So we need to support Auth0 authentication for a SPA app written in AngularJS, and for a Cordova-packaged native application: all in the same code base (barring extensive reengineering). We’ve gotten auth0/angular-lock to work for the AngularJS browser use case. This however won’t work when deployed via Cordova: “callback URL mismatch” errors. I believe this is because Google no longer allows that auth flow using embedded web views.

Ok, which is fine, there’s the auth0/cordova-auth0 library which supports the PKCE authentication flow that works with Google now. Unfortunately, the cordova-auth0 package is intended for a newer npm/yarn & webpack based web application. Our Grunt/Bower/AngularJS web app is a far distance from this.

Any advice on how to proceed? The options I know to list are:

  • Restructure the web app to use npm/yarn & webpack.
  • Manually implement the PKCE authentication flow with native javascript
  • Find a third party Oauth/PKCE library that can be installed via Bower and is compatible with auth0
  • Some magical solution I haven’t considered yet
2

This is definitely related to Google’s restrictions against using an inappbrowser: simply using the angular-lock with Facebook work on Android and iOS just fine.

3

I might be missing something, but in relation to how to include the library as part of the application I would consider doing a webpack build as part of a pre-build step and then including the generated bundle file. This way you don’t have to have all the application using webpack, but you also don’t need to roll your own library (not recommended) or find one that supports bower (which may be difficult).

You would still need to adapt the application to use the PKCE approach when it’s acting as a native application versus when it’s not, but as you mentioned the requirements imposed by Google will always require this to happen.