In the previous post we have implemented the login form ,however it is a dummy form as it will allow any creds to access the website. Since the structure is setup lets implement the login validation. We have already developed an api-gateway which can authenticate user creds and give us the token back. So lets connect to api from UI Login component and allow the user only if he is signed up user. For this purpose i had already added a user in backend with a username and password

Access to API

Since we didnt host the API yet i shall be running the API code on my machine and consuming the same from UI component. To run the API code we need to run two components

1. api-backend which primarily has the business logic of user management and user data management

2. api-gateway which consumes the services of api-backend and returns the response to the service.

To run the api-backend & api-gateway run the following command

python API-Backend/main.py 
python API-Gateway/main.py

By running the above commands the services get started in the mentioned ports of the application code.

In API-Gateway/main.py we mentioned the port as 8080 so the API services will be available at localhost:8080

In API-Gateway/main.py we mentioned the port as 8081 so the API services will be available at localhost:8081

These api end points can be verified using the swagger url - localhost:8080/api-gateway/web,http://local..

Login Auth API

For the login authentication we shall be using following end point

localhost:8080/api-gateway/web/authenticate

The payload for this end point will be as follows,which is straight forward

{
  "username": "string",
  "password": "string"
}

If we provide the right values it should provide a token with 200 response as shown below

If we provide an incorrect password following the response would be a 424 which is basically failure in handling dependency injection with a error message the password is incorrect

Login Implementation in UI Component

In order to consume an api end point from ReactJS we shall using axios library.If you would like to know more about axios please read the following documentation - https://axios-http.com

Now lets naviagate to the Login.jsx file which has the form and collects the input values username and password

We have already implmented an OnSubmit method in react-hook-form which will be called when the form is submitted. The code is as below as of now

 const onSubmit = (data) => {
    handleUserName(data["username"]);
    handleUserLoggedIn(true);
    navigate("/dashboard");
  };

As we see above we are taking the username from object data and setting the state fields of usernameand userLoggedIn using the handler methods. Then we are navigating to dashboard using navigate("/dashboard") method. Now at the top we shall make a call to authenication end point. If successful we shall set the state fields usernameand userLoggedIn. If not we shall redirect to Login url

Following are changes to the method

 const onSubmit = (data) => {
    axios.post(`${baseurl}/authenticate`, data)
    .then((response) => {
      if( response.status == 200 && response.statusText == 'OK') 
      {
        handleUserName(data["username"]);
        handleUserLoggedIn(true);
        navigate("/dashboard");
      }
    })
    .catch((error) => {
      setError("password", { type:"manual",message:"Password is incorrect!" }, { shouldFocus: true });
    });

  };

1. baseurl is a const declared and the baseurl of endpoint is declared

2. axios makes a post call with data and if response if 200

   1. sets the state username and userLoggedIn values and navigates to dashboard url

3. if the response has error then it shows an error message Password is incorrect as shown below.

This section completes the implementation for Login call.

The code for this section can be obtained using following commit - https://github.com/svsrikanth2001/Dev_To_DevOps/commit/9b8ea7c751637b21c11dc97b296cea303ea73557