Angular 1.x Introduction

This quickstart guide demonstrates how to add authentication to an Angular 1.x application 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.

Sample Projects

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 index.html file.

Each step in the quickstarts contains a sample project available for download which shows the finished result for that step.

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 whitelist callback URLs for your app in the Callback URL field in your Application 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:

  • auth0-lock
  • angular-lock
  • angular-jwt

Installing Dependencies with npm

npm install angular-lock angular-jwt

or

Installing Dependencies with Bower

bower install auth0-lock angular-lock angular-jwt

Once installed, the scripts for these libraries can be included in your project.

After Installation with npm

<script type="text/javascript" src="https://cdn.auth0.com/js/lock/10.6/lock.min.js"></script>
<script src="node_modules/angular-lock/dist/angular-lock.js"></script>
<script src="node_modules/angular-jwt/dist/angular-jwt.js"></script>

or,

After Installation with Bower

<script src="bower_components/auth0-lock/build/lock.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 viewport.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Next Tutorial
2. Login
Use Auth0 for FREECreate free Account