This tutorial demonstrates how to add user login to an Cordova 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.
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 its settings.
Install the Dependencies
The required dependencies for using Auth0 in a Cordova 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 show the login page. The downloadable sample project already has this plugin added, but if you are adding Auth0 to 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 Main App File and Configure Auth0
Create a main application file and initialize Auth0 in it. This file can also serve as the place where you change what is rendered in the app. This file needs methods for logging users in and out, as well as checking their authentication state. Be sure to replace
YOUR_PACKAGE_ID with the identifier for your app in the configuration block.
Add Login and Logout Controls
Add controls to your app to allow users to log in and log out. The buttons should have classes which can be picked up with a
querySelector and have event listeners attached to them as is demonstrated above.
After authentication, users will be redirected to your application where they will be taken to the
Cannot read property 'isAvailable' of undefined
This means that you're attempting to test this in a browser. At this time you'll need to run this either in an emulator or on a device.