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
Set Up an Auth0 Client
We need to set up an Auth0 client so Auth0 can interface with our Angular application.
- Go to your Auth0 Dashboard and click the "create a new client" button.
- Give your new client app a name, select "Single Page Web Applications" as the client type, and click the "Create" button.
- In the Settings for your new Auth0 client app, add
http://localhost:4200to the Allowed Callback URLs.
- 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
- Click the "Save Changes" button.
- 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.
auth0.js in Your Angular App
In order to use our Auth0 account with our Angular application, we'll need to add the
Execute the following command from the root of your Angular app:
npm i auth0-js --save
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