This quickstart guide demonstrates how to add authentication to an Angular 1.x application using Auth0.
If you want to follow along with these quickstart guides, you can download the starter seed project to work from a blank slate. This seed project is a basic Angular 1.x application with all the Bower dependencies included and the required references added to the
Each step in the quickstarts contains a sample project available for download which shows the finished result for that step.
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 whitelist callback URLs for your app in the Callback URL field in your Client Settings. If no callback URLs are set, a mismatch error will be displayed when a user logs in.
Install the Dependencies
The easiest way to add authentication to any app with Auth0 is to use the Lock widget. To use the Lock widget in your Angular 1.x apps, and to help manage authentication related tasks, you will need to install several libraries:
Installing Dependencies with npm
npm install auth0-js angular-lock angular-jwt
Installing Dependencies with Bower
bower install auth0-lock auth0.js angular-lock angular-jwt
Once installed, the scripts for these libraries can be included in your project.
After Installation with npm
<script src="https://cdn.auth0.com/js/lock/10.14/lock.min.js"></script> <script src="node_modules/auth0-js/build/auth0.js"></script> <script src="node_modules/angular-lock/dist/angular-lock.js"></script> <script src="node_modules/angular-jwt/dist/angular-jwt.js"></script>
After Installation with Bower
<script src="bower_components/auth0-lock/build/lock.js"></script> <script src="bower_components/auth0.js/build/auth0.js"></script> <script src="bower_components/angular-lock/dist/angular-lock.js"></script> <script src="bower_components/angular-jwt/dist/angular-jwt.js"></script>
To ensure that the Lock widget displays properly on all devices, add a
meta tag to set the
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />