This tutorial demonstrates how to add user login to an Ionic 3 application using Auth0. We recommend you to Log in to follow this quickstart with examples configured for your account.
I want to integrate with my app15 minutes
I want to explore a sample app2 minutes
Get a sample configured with your account settings or check it out on Github.
Get Your Application Keys
When you signed up for Auth0, a new application was created for you, or you could have created a new one.
You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.
You need the following information:
- Client ID
Configure Callback URLs
A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated.
The callback URL for your app must be whitelisted in the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.
The Callback URL to be used for your application includes your app's package ID which is found in the
config.xml file for your app.
Go to the Application Settings section in your Auth0 dashboard and set your Callback URL in the Allowed Callback URLs box.
If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Callback URL to
YOUR_APP_PACKAGE_NAME with your application's package name, available as the
applicationId attribute in the
file as an allowed origin to the Allowed Origins (CORS) box.
Lastly, be sure that the Application Type for your application is set to Native in the application settings.
Install the Dependencies
The required dependencies for using Auth0 in an Ionic application are auth0.js and auth0-cordova. Install them with npm or yarn.
Add Cordova Plugins
You must install the
SafariViewController plugin from Cordova to be able to use universal login. The downloadable sample project already has this plugin added, but if you are embedding Auth0 in your own application, install the plugin via the command line.
CustomURLScheme plugin from Cordova is also required to handle redirects properly. The sample project has it already, but if you're adding Auth0 to your own project, install this plugin as well.
Integrate Auth0 in your Application
<preference name="AndroidLaunchMode" value="singleTask" /> to your config.xml. This will allow the Auth0 dialog to properly redirect back to your app.
Set Up URL Redirects
onRedirectUri method from auth0-cordova when your app loads to properly handle redirects after authentication.
Create a new file called
auth.config.ts in your
src/services folder to provide the necessary Auth0 configuration for your Ionic app:
Be sure to replace
YOUR_PACKAGE_ID with the identifier for your app.
Create an Authentication Service
To coordinate authentication tasks, it's best to set up an injectable service that can be reused across the application. This service needs methods for logging users in and out, as well as checking their authentication state.
Add Authentication with Auth0
Add a control to your app to allow users to log in. The control should call the
login method from the
AuthService. Start by injecting the
AuthService in a component.
AuthService is now accessible in the view and its
login method can be called.
Add Platform and Run the App
You will now need to allow Ionic / Cordova to install the necessary plugins and update your
config.xml appropriately for the platform you wish to run on.
Use the following commands to add your desired platform(s) (e.g.,
android) and run the app:
This will then launch your app in the local emulation environment for the platform you chose (Xcode Simulator for iOS or the Android emulator of your choice).
Don't be alarmed if you cannot authenticate successfully yet at this stage! There was some configuration generated by running the app that you still need to add to your Auth0 settings.
Update Auth0 Dashboard Configuration
- After executing the
config.xmlfile should contain
- Make note of IP address URLs from any
- In your Auth0 Dashboard, go to your Ionic app's Settings.
- Add the full allowed navigation addresses (including
http://and ports) to the Allowed Origins (CORS) settings for your Auth0 application and click the Save Changes button.
You should now be able to log into your app!
Cannot read property 'isAvailable' of undefined
This means that you're attempting to test this in a browser. This library was designed to be run on a device and expects a Cordova environment with the
SafariViewController plugin available.
Completely blank page when launching the app
This could either mean that you've built the seed project using a different version of Ionic, or that the device where you are testing it isn't entirely supported by Ionic 3 yet.
This could also occur on iOS if you are running the app in a simulator and something else is listening on port
8080 on the same machine. A good way to check for this is to run the application from XCode instead and check the logs.
Profile doesn't show after successful login
This is not actually an issue with your code, but is an Ionic quirk when running in an emulator (generally iOS). You can use a real device, or generally fix this by turning on live reload when you run your app in the emulator, and adding an alert in your
auth.service.ts that simply creates a notification with the JSON stringified contents of the
authResult in the
Client.authorize() callback. This will generally fix the issue, and then you can remove the alert and everything should work normally.