Ionic Introduction

This multistep quickstart guide will walk you through setting up and managing authentication in your Ionic apps using Auth0.

Auth0 provides wrappers for using the Lock widget and the auth0.js library in Anguar apps, and these wrappers will be used throughout these quickstart guides.

Samples Projects

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.

Application Keys

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.

App Dashboard

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 Application Settings section of your Auth0 dashboard and make sure that Allowed Callback URLs contains the following value:

https://YOUR_AUTH0_DOMAIN/mobile

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://\*

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 angular-lock angular-jwt

You will also need to add the references to the libraries to your application's index.html:

<!-- 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-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

Add the InAppBrowser Plugin

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 config.xml file:

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

Next Tutorial
2. Login
Use Auth0 for FREECreate free Account