Although we're not done yet, it's now a good time to perform a first login test. This will definitely help us better visualize what we're doing and also understand what we're still missing.

Before proceeding with the login, it's strongly advisable to place some debugging breakpoints to cover the following key spots of our app:

1. At the beginning of the onSubmit method of LoginComponent, that occurs when the <form> is submitted (Angular).
2. At the beginning of the Login method of AuthService, that will issue the HTTP POST request (Angular).
3. At the beginning of the Auth() method of TokenController, that will receive the POST, validate the credentials against the ASP.NET Identity DB tables and respond accordingly (ASP.NET).
4. Within the map method of AuthService, which will handle the result of the HTTP POST asynchronously (Angular).
5. Within the subscribe method of LoginComponent, which will redirect the user to the Home view or set up a form validation error depending on the login result (Angular).

Once done, run the project in debug mode and click on the Login menu item in the panel to the left; you should see something like the following:

To be completely honest, the Remember me and Forgot the password? functions are not working yet, but we'll fix those in due time. For now, let's focus on the actual login phase. Start with a non-existing username, such as TestUser; type in any password, click on the Sign in button and get ready to go through all the breakpoints. In this phase, we need to do our best to check each single variable to ensure that everything is working fine.

At the end of the whole process, we should receive an error message just like the following one:

That's perfectly fine, since we used a non-existing user! Right after that, repeat the whole cycle, this time with an existing user--such as Admin--yet with a wrong password. Carefully watch what happens as the underlying code goes on and checks that the password mismatch scenario will be properly handled by each one of our server-side and client-side actors.

Eventually, repeat the same task, this time using a valid username/password combination from those we've put into the DbSeeder , such as: username Vodan, password Pass4Vodan. This time you should be able to see the following JavaScript popup, which means that everything is fine up to this point:

As soon as we see that it works, it could be wise to go back to the login.component.ts file and remove the annoying JavaScript alert(), which we only used for demonstration purposes; we don't need it anymore.