Angular 2 Introduction

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

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.

Add the Dependencies

To integrate your Angular 2 application with Auth0, you will need to add the following two dependencies:

  • Lock Widget is the default authentication widget provided by Auth0.

    From npm:

    npm install --save auth0-lock

    Or the Auth0 CDN:

    <script src="https://cdn.auth0.com/js/lock/10.6/lock.min.js"></script>

  • angular2-jwt is a helper library for working with JWTs in your Angular 2 applications.

    From npm:

    npm install --save angular2-jwt

Next Tutorial
2. Login
Use Auth0 for FREECreate free Account