Building a Full-Stack MERN App with JWT Authentication: Part 3
Setting Up the Frontend
Now that we have our backend system in place, let’s create a React single-page application to consume our JSON Web Tokens. We’ll start by setting up our environment and creating a new React app using create-react-app.
Securing with HTTPS
In today’s web, it’s essential to secure our server with HTTPS. This will also ensure that we can’t send requests to our server from a non-HTTPS environment, which is crucial when working with authentication mechanisms and payment gateways.
Installing Dependencies
Our new React app comes with react, react-dom, and react-scripts installed by default. We’ll also need to install node-sass for compiling SCSS files and axios for making HTTP requests.
Using React’s Proxy
To mimic our live environment for API calls, we can set up a simple proxy server in our React app. This will allow us to use relative URLs to make API calls.
Setting Up AJAX Calls
Next, we’ll create a wrapper for our AJAX calls using Axios. We’ll focus on making GET and POST requests, which are the most common methods for API requests.
JSON Web Token Authentication
Now it’s time to implement JSON Web Token authentication on the client side. We’ll look at the JWT authentication workflow and install the jsrsasign library to parse our JWT.
Organizing Our Code
Let’s organize our code by categorizing our components, actions, helpers, reducers, services, styles, and tests into separate folders. This will make it easier to maintain and scale our application.
Building the Sign-in Form
We’ll create a simple sign-in form using Bootstrap’s Forms and Card layouts. We’ll use component states to store the current value of the inputs and update them accordingly.
Tracking the State
To inspect our component’s state, we can use React Developer Tools or display the state data in a pretty format using JSON.stringify() and <pre>.
Handling Input Changes
We’ll write a handleChange() function to update the state variables when the input values change.
Preventing Default Submission
To prevent the default form submission behavior, we’ll add an onSubmit event handler to our form.
Creating Service Calls
We’ll create service calls for our frontend application using Axios. These calls will communicate with our REST API endpoints.
Calling the JWT Service
Let’s call the GenerateJWT service and display the response data in our application.
Decoding the JWT Data
We’ll decode the received JWT data on the server side and receive it via AJAX.
Post-Sign-in Screen
After a successful sign-in, we’ll display a different screen for the user.
Sign-out Process
We’ll provide a way for the user to sign out by clearing the response and data from our state.
Persisting Data
To persist our data, we can use local storage or httpOnly cookies. However, please note that using local storage is not recommended due to security concerns.
Validation of Authentication
Before sending a request to the server, we’ll validate the user input to reduce the number of requests made to the server.
That’s it for now! In the next article, we’ll cover creating users, validating them on the server side, and generating different types of responses. Stay tuned!