https://jasonwatmore.

com/post/2019/06/10/angular-8-user-registration-and-
login-example-tutorial

User Model
Alert Service
The alert service enables any component in the application to display alert
messages at the top of the page via the alert component.

Authentication Service
The authentication service is used to login and logout of the application,

User Service
Auth Guard
Http Error Interceptor
JWT Interceptor
Alert Component
Home Component
<h1>Hi {{currentUser.firstName}}!</h1>
<p>You're logged in with Angular 8!!</p>
<h3>All registered users:</h3>
<ul>
<li *ngFor="let user of users">
{{user.username}} ({{user.firstName}} {{user.lastName}})
- <a (click)="deleteUser(user.id)" class="text-danger">Delete</a>
</li>
</ul>

Login Component
Register Component
App Component
<nav class="navbar navbar-expand navbar-dark bg-dark" *ngIf="currentUser">
<div class="navbar-nav">
<a class="nav-item nav-link" routerLink="/">Home</a>
<a class="nav-item nav-link" (click)="logout()">Logout</a>
</div>
</nav>

1
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3">
<alert></alert>
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>

Fake Backend Provider

Module