Angular Security - Authentication Service

Angular is a framework for creating single page web application. To know more about Angular and how to get started, please refer our previous article Getting started on Augular 7. Angular facilitates the security feature and protection mechanism. It provides frameworks by verifying all the routing urls with security authguard interface to validate and verify the user and its permissions.
Authentication Implementation
Singleton service class can be implemented to invoke authentication url and get the user principal to the localstorage after user key in the username and password in the login page. Injectable with provided in root will create a singleton service across angular app and isLoggedIn class level variable maintains the status of logged in of the Angular app.
File: auth.service.ts
Login component file will invoke the above login service after the user clicks the login button. Once successful login, it stores user principal data like username, userprofile image to the local storage of the browser.
File: logincomponent.ts
Now we need to protect all the resources urls with authenticated access. To do that, we need to implement CanActivate interface which we will check the authorization service state and local storage whether user already authenticated.
Auth guard service:
Auth guard will be wired up in all the secured resources routing paths like home module by mentioning it as canActivate options. So when routing happens to that module, it will be checked whether the user logged in by invoking AuthGuard and then invoke the login page.
Routersnapshot takes the current url from the route snapshot url
This can be redirected once we do successful login.
Http Interceptors - JWT Intereceptor/Error Interceptor:
Once user authenticated, every time the backend request should carry the authentication service bearer token so web server process the authorized request. We can create interceptor which get the token from authentication service and add it to the request headers. After header created, it can be chained to next intercept handler chain.
Response to any request returns to 401 or 403 status code, it needs to be immedatiely redirected to the login page irrespective of the current user page. This can be handled in the interceptor response side by next.handle(request).pipe(//to check response status). It will check the status code and redirect direct to the logout.
Prevent Cross Site Scripting:
Cross-site scripting (XSS) enables attackers to inject malicious code into web pages. Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted values. Angular trusts template code, so generating templates, in particular templates containing user data, circumvents Angular's built-in protections.
Custom Domsanitizer to be implemented for sanitize by implementing the angular DOMSanitizer class. It also provides SecurityContext to indicate the type like html, style, script, urls.
Reference:
Angular Security https://angular.io/guide/security
HTTP interceptors https://angular.io/api/common/http/HttpInterceptor
Security Context https://angular.io/api/core/SecurityContext