The complete guide to designing, developing, testing, and deploying enterprise applications with Angular

Angular Applications Architecture

Requirements and FAQs

Code style guide

Introduction

Start from the domain

Software architecture for Front-end

Domain, design, develop

Workspaces scenarios

Applications and Libraries

Mono repository multi project

Domain boundary with plain TypeScript

Application details with Angular

Presentational details with Angular

Domain boundary and application details

Testing big Angular solutions with ease

Narrow tests for business logic

Visual tests for the presentation layer

Wide tests for the user experience

Testing since the beginning

Configuration environment and tokens

Instrumentation measuring and logging

Security authentication and authorization

Core generic infrastructure

A library for your shared UI vocabulary

A set of basic atomic elements

Some generic composed blocks

User interface, a design system foundation

Reactive stores with Signals

API access as a commodity

Interceptors for the dirty job

Data stores, reactive access, and persistence

Features come in routes to pages

Anatomy of a Page control flow and services

Different levels of state management

Routes and pages

In this course we teach you how to design, develop, ane deploy enterprise level Angular Applications the right way. Despite the fact that Angular is an opinionated framework, specially suited to build large solutions, it requires a deep knowledge to take decisions at every step.

In almost 30 lessons we cover how to choose and use the correct tools, how to structure an application that scales and how to code some intricate solutions to common problems. It's a long course/book and comes with a complete working codebase fully tested.

It is taught by Alberto Basalo who has been working, advising, and training multinational corporations, banks, and public administrations in Angular for years.

The complete guide to design, develop, test, and deploy enterprise applications with Angular

How to design, develop and deploy big enterprise applications with Angular.

Best practices to organize your code in small reusable libraries.

Application of reactive flow patterns for better user and developer speed.

Leverage the latest Angular version features like stand-alone components.

Common functionality for any application ready to use.

Security, authentication, and authorization

In this lesson, we will discuss security, authentication, and authorization—one of the most critical features of any professional application. To do so, we will also consider the differences between server-side and client-side security. To fully accomplish these goals, we will cover the following topics: getting, storing, and sending credentials using Angular 

. We will also delve into the authentication process and routed forms involved. Finally, we will discuss using Angular guards and interceptors to implement authorization.

Security is the process of protecting something from unauthorized access. In the case of business solutions, what we have to protect is access to sensitive data, especially any information manipulation. Web applications are particular because they run on the user's browser but consume data stored on remote machines.

 security refers to the measures taken by the server to protect the data and resources from unauthorized access. For example, encrypting data in transit, validating user input, implementing access control policies, logging user activities... while 

 security serves to identify users and prevent unintended access to resources.

Server-side security is more reliable and secure, as the server has complete control over the data and resources. Malicious actors can manipulate or compromise client-side operations; formally, 

However, as Angular developers of client-side code, we need to understand and participate in the server-orchestrated process. The following sections will explore and implement the security-related code for the 

, determining whether someone or something is who or what they claim to be. As a web developer, your job involves the creation of forms for registering, login, changing profile settings, and evening logout users. Let us start with the registration form.

As an example her you have an excerto for the Authentication repository. Data types are explained in the following sections.

/**
 * Authorization Repository, posts new user and credentials to the API
 */
@Injectable({ providedIn: 'root' })
export class AuthRepository {
  #api = inject(API_URL);
  #http = inject(HttpClient);

  postRegister$(register: UserRegistration): Observable<UserToken> {
    return this.#http.post<UserToken>(`${this.#api}/register`, register);
  }
  postLogin$(login: UserLogin): Observable<UserToken> {
    return this.#http.post<UserToken>(`${this.#api}/login`, login);
  }
}

Identity is a set of attributes or characteristics uniquely identifying a user or an entity. For example, a user's identity can include their name, email address, phone number, role, etc. Typically, the user needs to provide some information that only he knows, commonly referred to as a 

We will provide a form to register a new user and to allow a login for already registered users. The collected information will be sent to server endpoints, where, once processed, it will return as a 

---
title: Security authentication and authorization
isPublicLesson: false
useMdx: false
---

# Security, authentication, and authorization

In this lesson, we will discuss security, authentication, and authorization—one of the most critical features of any professional application. To do so, we will also consider the differences between server-side and client-side security. To fully accomplish these goals, we will cover the following topics: getting, storing, and sending credentials using Angular _HttpClient_. We will also delve into the authentication process and routed forms involved. Finally, we will discuss using Angular guards and interceptors to implement authorization.

## Security

Security is the process of protecting something from unauthorized access. In the case of business solutions, what we have to protect is access to sensitive data, especially any information manipulation. Web applications are particular because they run on the user's browser but consume data stored on remote machines.

### Server-side versus client-side security

**Server-side** security refers to the measures taken by the server to protect the data and resources from unauthorized access. For example, encrypting data in transit, validating user input, implementing access control policies, logging user activities... while **Client-side** security serves to identify users and prevent unintended access to resources.

Server-side security is more reliable and secure, as the server has complete control over the data and resources. Malicious actors can manipulate or compromise client-side operations; formally, **security relies on the server**.

However, as Angular developers of client-side code, we need to understand and participate in the server-orchestrated process. The following sections will explore and implement the security-related code for the _new-docs_ sample application.

## Authentication

Authentication is the process of **verifying the identity of a user**, determining whether someone or something is who or what they claim to be. As a web developer, your job involves the creation of forms for registering, login, changing profile settings, and evening logout users. Let us start with the registration form.

As an example her you have an excerto for the Authentication repository. Data types are explained in the following sections.

```typescript
/**
 * Authorization Repository, posts new user and credentials to the API
 */
@Injectable({ providedIn: 'root' })
export class AuthRepository {
  #api = inject(API_URL);
  #http = inject(HttpClient);

  postRegister$(register: UserRegistration): Observable<UserToken> {
    return this.#http.post<UserToken>(`${this.#api}/register`, register);
  }
  postLogin$(login: UserLogin): Observable<UserToken> {
    return this.#http.post<UserToken>(`${this.#api}/login`, login);
  }
}
```

### Identity

Identity is a set of attributes or characteristics uniquely identifying a user or an entity. For example, a user's identity can include their name, email address, phone number, role, etc. Typically, the user needs to provide some information that only he knows, commonly referred to as a _password_.

We will provide a form to register a new user and to allow a login for already registered users. The collected information will be sent to server endpoints, where, once processed, it will return as a _claim_ to identify the user.

```typescript
// User registration DTO

/**
 * Registering Credentials
 * @description Plain object used for registering a new user
 */
export type UserRegistration = {
  name: string;
  email: string;
  password: string;
};