Design Authentication and Authorization

Designing a high-quality authentication and authorization system without frustrating the end user is a difficult problem to solve. Authentication is the act of verifying the identity of a user, and authorization specifies the privileges a user has to access a resource. Both processes, auth for short, must seamlessly work in tandem to address the needs of users with varying roles, needs, and job functions. In today's web, users have a high baseline level of expectations from any auth system they encounter through the browser, so this is a really important part of your application to get absolutely right the first time.

The user should always be aware of what they can and can't do in your app. If there are errors, failures, or mistakes, the user should be clearly informed as to why such an error occured. As your application grows...

Wrapping up mock-ups

Mock-ups are important in determining what kind of components and user controls we will need throughout the app. Any user control or component that will be used across components will need to defined at the root level and others scoped with their own modules.

In Chapter 7, Create a Router-First Line-of-Business App, we have already identified the submodules and designed landing pages for them to complete the walking skeleton. Now that we have defined the major data components, we can complete mock-ups for the rest of the app. When designing screens at a high-level, keep several things in mind:

• Can a user complete common tasks required for their role with as little navigation as possible?
• Can users readily access all information and functionality of the app through visible elements on the screen?
• Can a user search for the data they need easily?
• Once a user...

Design authentication and authorization workflow

A well-designed authentication workflow is stateless so that there's no concept of an expiring session. User's are free to interact with your stateless REST APIs from as many devices and tabs as they wish, simultaneously or overtime. JSON Web Token (JWT) implements distributed claims-based authentication that can be digitally signed or integration protected and/or encrypted using a Message Authentication Code (MAC). This means once a user's identity is authenticated through, let's say a password-challenge, they receive an encoded claim ticket or a token, which can then be used to make future requests to the system without having to reauthenticate the identity of a user. The server can independently verify the validity of this claim and process the requests without requiring any prior knowledge of having interacted...

UI service

As we start dealing with complicated workflows, such as the auth workflow, it is important to be able to programmatically display a toast notification for the user. In other cases, we may want to ask for a confirmation before executing a destructive action with a more intrusive pop-up notification.

No matter what component library you use, it gets tedious to recode the same boiler plate, just to display a quick notification. A UI service can neatly encapsulate a default implementation that can also be customized on a need basis:

1. Create a new uiService under common
2. Implement a showToast function:

src/app/common/ui.service.ts
import { Injectable, Component, Inject } from '@angular/core'
import {
  MatSnackBar,
  MatSnackBarConfig,
  MatDialog,
  MatDialogConfig,
} from '@angular/material'
import { Observable } from 'rxjs'

@Injectable()
export class...

Role-based routing after login

This is the most elemental and important part of your application. With lazy loading, we have ensured only the bare minimum amount of assets will be loaded to enable a user to login.

Once a user logs in, they should be routed to the appropriate landing screen as per their user role, so they're not guessing how they need to use the app. For example, a cashier needs to only access the POS to check out customers, so they can automatically be routed to that screen.

You find the mock up of the POS screen as illustrated:

Point-of-Sale screen mock-up

Let's ensure that users get routed to the appropriate page after logging in by updating the LoginComponent:

1. Update the login logic to route per role:

app/src/login/login.component.ts  

async login(submittedForm: FormGroup) {
    ...
    this.router.navigate([
      this.redirectUrl || this.homeRoutePerRole...

Auth Service Fake and Common Testing Providers

We need to implement an AuthServiceFake so that our unit tests pass and use a pattern similar to commonTestingModules mentioned in Chapter 7, Create a Router-First Line-of-Business App, to conveniently provider this fake across our spec files.

To ensure that our fake will have the same public functions and properties as the actual AuthService, let's first start with creating an interface:

1. Add IAuthService to auth.service.ts

src/app/auth/auth.service.ts

export interface IAuthService {
  authStatus: BehaviorSubject<IAuthStatus>
  login(email: string, password: string): Observable<IAuthStatus>
  logout()
  getToken(): string
}

2. Make sure AuthService implements the interface
3. Export defaultAuthStatus for reuse

src/app/auth/auth.service.ts

export const defaultAuthStatus = {
  isAuthenticated: false,
  userRole: Role.None,
 ...

Summary

You should now be familiar with how to create high-quality authentication and authorization experiences. We started by going over the importance of completing and documenting high-level UX design of our entire app so that we can properly design a great conditional navigation experience. We created a reusable UI service so that we can conveniently inject alerts into the flow-control logic of our app.

We covered the fundamentals of token-based authentication and JWTs so that you don't leak any critical user information. We learned that caching and HTTP interceptors are necessary so that users don't have to input their login information with every request. Finally, we covered router guards to prevent users from stumbling onto screens they are not authorized to use, and we reaffirmed the point that the real security of your application should be implemented on the...