This multistep quickstart guide will walk you through setting up and managing authentication in your Ionic apps using Auth0.
If you want to follow along with these quickstart guides, download the seed project as a starting point. The seed project is just a basic, blank Ionic application with all the Bower dependencies included and the required references added to the
index.html file. You can also download the source code for each quickstart step from these docs.
When you signed up for Auth0, you were invited to create a new client.
There are some details about this client that your application needs to know about to properly communicate with Auth0. These include your Client ID, Domain, and Client Secret. You can retrieve these values from the settings area for your client in the Auth0 dashboard.
Please note that if you download the samples available for this tutorial, these keys will be pre-populated for you. If you have created more than one client in your account, the sample will come with the values for your Default App.
Configure Callback URLs
A callback URL is a URL in your application where Auth0 redirects to after the user has authenticated. You can set the Callback URL by going to the Client Settings section of your Auth0 dashboard and make sure that Allowed Callback URLs contains the following value:
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):
Install the Dependencies
As stated before, the seed project contains all the required Bower dependencies and has the references added to the
index.html file. If you would rather integrate Auth0 into an existing Ionic application instead of using our seed project, you will need to add the following Bower dependencies to your application:
bower install --save auth0-lock auth0.js angular-lock angular-jwt
You will also need to add the references to the libraries to your application's
<!-- auth0.js --> <script src="lib/auth0.js/build/auth0.js"></script> <!-- Auth0 Lock --> <script src="lib/auth0-lock/build/lock.min.js"></script> <!-- lock-angular --> <script src="lib/angular-lock/dist/angular-lock.min.js"></script> <!-- angular-jwt --> <script src="lib/angular-jwt/dist/angular-jwt.min.js"></script>
The purpose of each of these references are as follows:
- auth0.js communicates with Auth0's APIs and necessary for angular-lock
- auth0-lock is the default authentication widget provided by Auth0
- angular-lock: Auth0's wrapper for using Lock with Angular
- angular-jwt: Library that contains several useful services which make using JSON Web Tokens in Angular apps easy
You must install the
InAppBrowser plugin from Cordova to be able to show the Login popup. The seed project already has this plugin added, but if you are adding Auth0 to your own application you need to run the following command:
ionic plugin add cordova-plugin-inappbrowser
and then add the following configuration to the
<feature name="InAppBrowser"> <param name="ios-package" value="CDVInAppBrowser" /> <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" /> </feature>