Cordova

Community maintained

You can get started by either downloading the seed project or if you would like to add Auth0 to an existing application you can follow the tutorial steps.

Sample Project

Download a sample project specific to this tutorial configured with your Auth0 API Keys.

System Requirements
  • NodeJS 5
  • Cordova 5.4 or later
Show requirements

1. Setting Up the Callback URL

Go to the Client Settings section in the Auth0 dashboard and make sure that Allowed Callback URLs contains the following value:
https://YOUR_AUTH0_DOMAIN/mobile

Also, if you are testing your application locally, make sure to add your local URL as an Allowed Callback URL and the following as an Allowed Origin (CORS): file://\*

2. Add InAppBrowser and WhiteList Plugin

You must install the InAppBrowser and WhiteList plugins from Cordova to be able to show the Login popup and communicate with Auth0 endpoints. For that, just run the following commands:

cordova plugin add cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-whitelist

and then add the following configuration to the config.xml file:

<feature name="InAppBrowser">
  <param name="ios-package" value="CDVInAppBrowser" />
  <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
</feature>

<!-- Allow links to auth0 -->
<access origin="*.auth0.com" />

In addition to the whitelist, you must update the Content Security Policy in your application to match the requirements of your application. Please note that you'll need to set the CSP in every page of the application for SPAs this usually the index.html. To do so add teh following to the <head> of the .html files in your application:

    <!-- Good default declaration:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
        * Enable inline JS: add 'unsafe-inline' to default-src
        * Enable eval(): add 'unsafe-eval' to default-src
    * https://YOUR_AUTH0_DOMAIN.auth0.com is required to make calls to the authentication api
    * https://cdn.auth0.com/ is needed to load scripts from Auth0
    * Create your own at http://cspisawesome.com
    -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com https://YOUR_AUTH0_DOMAIN.auth0.com; style-src 'self' 'unsafe-inline' https://cdn.auth0.com; media-src *; img-src https:; font-src https://cdn.auth0.com;" />

3. Follow the Front End Quickstarts

Follow the quickstart guide for the specific technology you are using in your Cordova app.

Cordova doesn't support getting dependencies from a CDN, so it is necessary to download the JavaScript and CSS dependencies locally and then point to the downloaded files.

You must use popup mode when configuring an application with Cordova. This can be done by setting redirect: false in the options object for Lock. See the Lock customization documentation for more.

Troubleshooting

Command failed with exit code 65 when running cordova build

This means that the InAppBrowser plugin wasn't installed successfully by Cordova. Try any of the following:

  • Reinstall the plugins
cordova plugin remove cordova-plugin-inappbrowser
cordova plugin remove cordova-plugin-whitelist
cordova plugin add cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-whitelist
  • Remove the platform and re add it

iOS:

cordova platform remove ios
cordova platform add ios

Android:

cordova platform remove android
cordova platform add android
  • Copy the contents from the plugin to the platform plugins

iOS:

cp plugins/cordova-plugin-inappbrowser/src/ios/* platforms/ios/[yourAppName]/Plugins/cordova-plugin-inappbrowser/
cp plugins/cordova-plugin-whitelist/src/ios/* platforms/ios/[yourAppName]/Plugins/cordova-plugin-whitelist/

Android:

cp plugins/cordova-plugin-inappbrowser/src/android/* platforms/android/[yourAppName]/Plugins/cordova-plugin-inappbrowser/
cp plugins/cordova-plugin-whitelist/src/android/* platforms/android/[yourAppName]/Plugins/cordova-plugin-whitelist/

Blank page with an OK after signin

This may be caused by the default setting like below

lock.show(function(err, profile, token) {

});

You must configure Lock as shown below, to avoid the blank screen popup with the OK button.

lock.show({sso: false},function(err, profile, token) {

});

Lock is displaying errors when using cordova serve command

Debug your app inside the simulator for your platform or an actual device. Running Lock from inside a browser using cordova serve is not supported at this time.

Use Auth0 for FREECreate free Account