LOGIN BY TOKEN

Login application is a typical operation on any web; this project uses the standard JWT to authenticate users in two ways; the first is an everyday use case with user email and password; the second method uses a Token Jwt to avoid the user’s email and user’s password in authentication process; Project was developed in Angular 12; the backend was developed in Java with the Spring Boot framework; if you want to check the backend project, you could do in the last  Article.

PREREQUISITES

• Angular: This is the framework of JavaScript; The project uses v12 of it.

• Angular CLI: This is the administration Api for angular capabilities; The project uses version 12.2.16.

• Docker:  Project to deploy app in containers (optional*).

USE CASES

The app works with three use cases.

1. Register User:  the user has to register in the app before authenticating in the app.

2. Login by email and password: the user must use your email and password to access the app.

3. Login by token: Users could be obtaining access to the app with password fewer authentications if they select the option to remember their last successful login.

DEPLOY

You can run the project in two ways; the first one is run one by one the repositories, first the tokenServer (java backend) and after that, the login-auth repository(Angular frontend app); the second way,   you only have to go into the main folder of the project and  execute the following statement in the console

 docker-compose up –d

 After that, both projects start the initialization process; you can go for a cup of coffee because it’ll be a long process. Finally, you can open your preferred web browser and search the direction http://localhost:4200. You’ll see the following web page image:

FLOWS

Register User

1. Go to the main web page (http://localhost:4200) and select the option Register

2. Add your mock data user name, email, and password; please activate the terms and conditions at the end you could select register.

3. You´ll be going to the main web app!.

4. Please close the session.

User login by email and password

1. Go to the main web page (http://localhost:4200).

2. Add your mock email and password, you haven’t to check to "remember me" option; finally select the log in button.

3. You´ll be going to the main web app!.

4. Please close the session.

User login by token JWT

1. Go to the main web page (http://localhost:4200).

2. Add your mock email and password, you have to check the "remember me" option; finally select the log in button.

3. You´ll be going to the main web app!.

4. Please close the web browser.

5. Go to the main web page (http://localhost:4200); this time you’ll be gone to the main web page, but this time you’ll skip the login options.

HOW DO THAT?

The app storage the token JWT in the local storage at all times that it goes to the main login page; the first action checks if the Token exists; if the Token exists, the app could be going to validate the Token in the backend service if the result is successful, the app will be validated and redirected to de dashboard page; if the Token isn’t valid (two minutes later after the login action) or doesn’t exist the redirect to the login page.

It is all for today. I want this article could be helpful for you; if you have any doubt, write the comments; bye!

.