Now that we have completed implementing
the REST API server using Express and MongoDB in this course,
the next immediate thought that might occur in your mind is,
since we have already developed the client applications in the previous courses,
how do we integrate the two together so that our client application is able to
interact with the full-fledged REST API server that we have developed in this course?
So, this is what we will examine in
this lecture and the two exercises that follow this lecture.
So, at the end of this lesson,
you will have React Client that will be
able to communicate with the server that you have just developed in
this course and be able to support
the full-fledged client side view of our entire application.
So that way we will see that we have developed
the complete end to end
application from the client side all the way to the server side in this course.
To integrate the client and the server,
as we have realized our server is already
implemented to support the full-fledged REST API.
From our client side,
whether it is the angular client,
the ionic client or the native script client,
they all interact with the server using the REST API endpoints.
So, when the client sends the request to the server at the REST API endpoint,
the server will respond with the corresponding JSON data back to the client.
The client can then make use of the JSON data to render the views for the user.
So, given this understanding of the communication between the client and the server,
the integration should be fairly straightforward.
Now that we have the user authentication built into our server side,
we need to retrofit our client applications to
enable them to do userauthentication on the server side
by posting the login information to the server an then
obtaining the authentication token from
the server side and thereafter communicating with the server
including the authentication token in the header of the request messages.
So, all this means that we need to do minor adjustments both to
the client and the server so that the two can communicate with each other.
One aspect that I haven't dealt with in the exercise earlier
is how the server will handle the query parameters that come in from the client side.
So, as we realized,
when the client side sends a request for
a featured dish or a featured leader or a featured promotion,
we saw that the URL includes,
dishes question mark feature is equal to
true in the request URL that comes from the client side.
Now, in the data on the server side,
we already saw that the dish,
the promotion or the leader includes the featured flag already in the JSON data.
So, when this request comes to the server side,
then the server should be able to extract
this query parameter from the incoming request and then
appropriately do the query of
the MongoDB and then obtain only the results where this featured flag is set to true.
So, to do that as we saw,
the URL that is used for sending the request to the server is,
slash dishes question mark featured is equal to true.
So, that is how we will supply the query parameters to our server side.
Now in addition, when this information is received on the server side,
now we saw that earlier when we did the get request on the server side,
we simply said dishes find and then we would find
all the dishes and then return them when
the get request is sent to the dish router route slash.
The same logic applies both to the promo router as well as to the leader router.
Now, when you include a query parameter like that in the URL,
how will our server side be able to extract this query parameter?
So, this is where,
when the incoming request has this query parameter attached to the incoming URL,
the express server will automatically process that and turn that into
a JSON object that is loaded onto a request message coming in on the server side.
Now, this is available on the server side in the form of req.query.
So, whatever query parameters you include in the URL will be turned into
corresponding JSON objects with the information set as
shown here and then loaded onto the request object on the server side.
So, by using req.query on the server side,
we will be able to obtain these query parameters.
So, when you perform a get request on the server side you say
dishes.find and then you include the req.query into the find there.
So thereby, when the MongoDB is
queried then only those records or only those documents for
which the featured is set to true will be extracted from the MongoDB and supplied back to
us within this get method here and then can be returned to the client side.
So, this is as simple as that in handling the query parameters on our server side.
So, this update we will do to both the dish router,
the promo router, and the leader router on our server side.
The next part is,
of course, User Authentication.
So, as we have realized,
on the server side we already have
these REST API endpoints which are useful for User Authentication,
in particular when you do a post to slash users
slash login with the username and password,
then you will be able to authenticate the user on the server side.
Now, when the user is authenticated on the server-side successfully,
then the reply message coming from the server side will include
the JSON Web Token in the reply body of the incoming reply message from the server side.
So, on the client side,
we should be able to extract this token and then use this token subsequently.
So, when the client receives the reply message from
the server side and the user is successfully authenticated on the server side,
the reply message will contain the JSON Web Token,
which has to be extracted,
and thereafter the client should include this JSON Web Token in
the authorization header for every outgoing request from the client side.
This is accomplished by saving the JSON Web Token to the local storage.
Thereafter, for every fetch requests that we issue,
we can set up the authorization header to contain the JSON Web Token.
Now, the logout process is fairly straightforward,
if we destroy the JSON Web Token that we have on the client side,
then the client will no longer be able to the access the server.
So, it is as simple as just destroying
the JSON Web Token on the client side for logging out that client.
So, given this understanding,
let's see the steps that are involved in
doing the user authentication on handling the user authentication on the client side.
So, to handle the user authentication on the client side,
the client will send a post request to the slash users slash login endpoint,
and the body of the post request will contain the username and password.
We are using the login authentication in this case.
Now, for Facebook authentication, again,
that is a different setup that I'm not going to discuss right now.
But the request body as you see for
local authentication will contain the username and password.
So, when the user is successfully authenticated on the server side,
the server will then reply back to
the client by including the JSON Web Token in the reply message.
So, when the client receives the reply message from the server side,
then the client will have to capture this JSON Web Token and then
save the JSON Web Token into the local storage on the client side.
Thereafter, the client should include this token in every outgoing request.
So, how is this accomplished on the client side?
First and foremost, we need to save the JSON Web Token into the local storage.
Now, this is accomplished inside the action creator that handles the user login process.
So, when the post is done to the server from the client side induction creator,
then the reply message will contain the token,
and this token is saved in the action creator that handles the user login process.
Now thereafter, when any fetch request is done,
then we can easily set the authorization header in the outgoing fetch request.
Now, once the client logs out,
the JSON Web Token will be destroyed on the client side.
So thereafter, outgoing requests will not contain
the JSON Web Token anymore because the JSON Web Token doesn't exist on the client side.
So thereby, the user loses the authentication.
So, that is how we will be handling the login and the logout process on the client side.
By communicating with the server and then obtain the JSON Web Token and
then including the JSON Web Token in every outgoing request.
Now, with this understanding of how the client and the server will interact,
let's now proceed to the next two exercises.
First, we will update the server side with a few additions so
that it can integrate well with our client side.
Thereafter, we will update the client side or rather I will give you
a full-fledged client application that I have taken
from the earlier react force and adapted it, updated it.
So, we will deal with both these in the next two exercises,
and at the end of it you will understand how to integrate your client and server side.