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, it is easy to miss all the ways an error condition could be triggered. Your implementation should be easy to extend or maintain, otherwise this basic backbone of your application will require a lot of maintenance. In this chapter, we will walk-through the various challenges of creating a great auth UX and implement a solid baseline experience.

We will be continuing the router-first approach to designing SPAs by implementing the authentication and authorization experience of LemonMart. In Chapter 7, Create a Router-First Line-of-Business App, we defined user roles, finished our build-out of all major routing and completed a rough walking-skeleton navigation experience of LemonMart, so we are well prepared to implement role-based routing and the nuances of pulling such an implementation.

In Chapter 8, Continuous Integration and API Design, we discussed the idea of designing around major data components, so you are already familiar with how a user entity looks like, which will come in handy in implementing a token-based login experience, including caching role information within the entity.

Before diving into auth, we will discuss the importance of completing high-level mock -ups for your application before starting to implement various conditional navigation elements, which may change significantly during the design phase.

In this chapter, you will learn about the following topics:

• Importance of high-level UX design
• Token-based authentication
• Conditional navigation
• Side Navigation bar
• Reusable UI Service for alerts
• Caching data
• JSON Web Tokens
• Angular HTTP interceptors
• Router guards