Auth0 With Ionic 3

Auth0 provides an example for Angular — and is a good place to start thinking about how all this hooks together — but we really need an example with Ionic 3. One of the main reasons is the URL scheme for callbacks doesn't match up with how navigation is performed on a mobile app.

Idea Capture

Some links (based on a Google search for "auth0 ionic 3"):

Overall approach

A good README.md found here. Using this as my checklist.

Custom URL Scheme

One option that had been recommended was using "deep links" which leaves the first part of the URL (scheme, host, port) unchanged and expands the end of the URL (path and/or hash). This approach sets up a different scheme altogether.

What's tough about this approach is it isn't a browser app at this point :(.

Configuration

There is substantial under-the-covers configuration going on. In short, use the cordova command to get things configured.

To change the configuration, it's best to uninstall and reinstall the plugin:

What we expect in the config.xml (and then propagated into the ./plugins/<platform>.json files:

            "cordova-plugin-customurlscheme": {
                "URL_SCHEME": "com.clueride.player",
                "ANDROID_SCHEME": "com.clueride.player",
                "ANDROID_HOST": "clueride.auth0.com",
                "ANDROID_PATHPREFIX": "/cordova/com.clueride/callback"
            }

Commands:
These steps must be performed inside the app's directory rather than the front-end-common module.

cordova plugin remove cordova-plugin-customurlscheme
cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=com.clueride.player --variable  ANDROID_SCHEME=com.clueride.player --variable ANDROID_HOST=clueride.auth0.com --variable ANDROID_PATHPREFIX=/cordova/com.clueride/callback
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License