Authentication and Authorization with HTTP

Learn to set up the business logic for authenticating users in an Angular application.

We'll cover the following

The Fake Store API provides an endpoint for authenticating users with a username and password. It contains a login method that accepts a username and a password as parameters and returns an authentication token. We will use the authentication token in our application to differentiate between a logged-in user and guest.

Note: The username and password are provided by a predefined pool of users.

We will explore the following authentication and authorization topics:

  • Authenticating with a backend API

  • Authorizing users for certain features

  • Authorizing HTTP requests using interceptors

Let’s get started with how to authenticate with the Fake Store API.

Authenticating with backend API

In Angular real-world applications, we usually consider authentication as an application feature. So, we will create a new Angular module that will handle authentication in our application. The module will contain an Angular component, allowing the user to log in to and log out of the application. An Angular service will be responsible for communicating with the Fake Store API and handling all authentication tasks.

Let’s get started by setting up the new Angular module:

  1. Run the following command to create a new auth module:

Note: The command below is for creating a new module locally using the Angular CLI.

Get hands-on with 1200+ tech skills courses.