Set Up Auth0

Auth0 makes it easy to implement powerful, secure authentication in an application. We'll use Auth0's login page to implement token based authentication in our Angular todo list app in just a few steps.

Create a Free Auth0 Account

You'll need an Auth0 account to manage authentication. You can sign up for a free account here!

Set Up an Auth0 Client

We need to set up an Auth0 client so Auth0 can interface with our Angular application.

1. Go to your Auth0 Dashboard and click the "create a new client" button.
2. Give your new client app a name, select "Single Page Web Applications" as the client type, and click the "Create" button.
3. In the Settings for your new Auth0 client app, add http://localhost:4200 to the Allowed Callback URLs.
4. Scroll down to the bottom of the Settings section and click "Show Advanced Settings". Choose the OAuth tab and verify that the JsonWebToken Signature Algorithm is set to RS256.
5. Click the "Save Changes" button.
6. If you'd like, you can set up some social connections. You can then enable them for your app in the Clients tab when setting up the connection. Note: For production, make sure you set up your own social keys and do not leave social connections set to use Auth0 dev keys.

Install auth0.js in Your Angular App

In order to use our Auth0 account with our Angular application, we'll need to add the auth0.js JavaScript library to our project. This library will enable us to interface with the Auth0 centralized login page and parse the data the Auth0 authorization server returns in the browser URI hash when a user authenticates.

Execute the following command from the root of your Angular app:

npm i auth0-js --save

The auth0.js library has now been installed to the node_modules folder and can be imported and used in our Angular app.

Note: You can check out the documentation for auth0.js here.