Creating a Blogging App Using React, Part 2: User Sign-Up

In this series, we're aiming to create a blog using functional React components.

In the first part of this tutorial, we saw how to implement the sign-in functionality. Now, let's move to the sign-up functionality.

Getting Started

Let's get started by cloning the GitHub repo from the first part of the tutorial.

1	git clone https://github.com/tutsplus/create-a-blogging-app-using-react

Once the directory has been cloned, navigate to the project directory and install the required dependencies.

1	cd my-blog
2	npm install

You should be able to see the application at https://localhost:3000. And the express server should be running at http://localhost:5000.

The Server

Previously, we saw how to GET sign-in data from our PSQL database. However, you have the freedom to choose any database for building the employee table. MongoDB is another popular choice.

To sign up, we need to post data to the database. To achieve this, we have to introduce the following piece of code in app.js. The following snippet will insert a new user into the users table. If something goes wrong during the insertion, an error will be thrown.

app.post('/api/posts/userprofiletodb', (req, res, next) => {
    const values = [req.email, 
                    req.pwd]
    pool.query(`INSERT INTO users(username, email, pwd, date_created)
                VALUES($1, $1, $2, NOW())
                ON CONFLICT DO NOTHING`, values,
            (q_err, q_res) => {
              if(q_err) return next(q_err);
              res.json(q_res.rows)
    })
})

The Client

As we are using a functional React component, useState and useReact will help us manage the state of the component.

Capturing Values

For each field in the sign-up form, we will have a state variable to listen to its changes. By default, these values are empty.

1	const [email, setEmail] = useState('')
2	const [password, setPassword] = useState('')

The email and password defined using useState must be linked to the form elements. This can be achieved easily using the value property.

1	<input type="text" id="inputName" value={email} className="form-control" placeholder="Name" required autoFocus />
2

It's important to change the value of the email and password state on user input. This can be achieved using the onChange property. When a user enters a value in the email field, the handleEmailChange function will be called and will set the value of the email state using the setEmail method.

This is the most interesting part of useState in React functional components. State is initialized as a pair: a variable, and a function which can be called to set the value of the variable. In our case, email is the variable, and setEmail is the function to assign a value to email.

const handleEmailChange = (event) => {
    setEmail(event.target.value)
}


<input type="text" id="inputEmail" value={email} onChange={handleEmailChange} className="form-control" placeholder="Email" required autoFocus />
       

The above logic can be applied to the password field.

const handlePasswordChange = (event) => {
    setPassword(event.target.value)
}
  
<input type="password" id="inputPassword" value={password} onChange={handlePasswordChange} className="form-control" placeholder="Password" required />
        

Validating Changes

One of the biggest perks of using native elements is validation. When the type of the input field is email, the native element validates if the data entered is valid or not. For example, if the email entered is invalid, a native popup will appear when the user clicks on the submit button.

Likewise, we can fix the minimum number of characters to be entered in a field using the minlength property of the input element. This check would throw an error if the user has entered fewer characters. One of the places where we can use this check is on the password.

1	<input type="password" minlength="8" id="inputPassword" value={password} onChange={handlePasswordChange} className="form-control" placeholder="Password" required />
2

If the user has entered the right data, the signup post call can be made.

Define a signup method called handleSubmit. Inside the handleSubmit method, make a post method call to the signup API endpoint. Here, I'm using the Axios library for fetching.

const handleSubmit = () => {
      var data = new FormData();
      data.append('email', email);
      data.append('pwd', password);
      
      var config = {
        method: 'get',
        url: `http://localhost:5000/api/get/userprofilefromdb?email=${email}`,
        headers: { 
          ...data.getHeaders()
        },
        data : data
      };
    
    axios(config)
      .then(function (response) {
        // get access to the return data from the POST API endpoint
        const data = response.data
        navigate("/landing")
      })
      .catch(function (error) {
        setError(error.message)
      });
    }

Developers often wonder if they should choose Axios or fetch for their single-page application. Axios is a common pick, and here are a few reasons:

Axios is much more secure than the Fetch API. Axios comes with cross-site forgery protection.
fetch is not supported in older IE browsers. This means that a polyfill has to be written if your application is likely to be opened in older browsers.
Requests made using fetch cannot be aborted.
fetch does not allow request timeouts. The timeout logic has to be implemented by the client-side application.

With all these elements put together, you will see the Sign Up page as below.

If the API endpoint returns a response, the user can be redirected to the /landing blog page. And if the API endpoint throws an error, the error will be displayed on the screen.

A Working Demo

Here is a working demo in StackBlitz for your reference.

Wrapping It Up

In this part of the tutorial, you saw how to implement the user sign-up process. We saw different types of validation, different ways of calling an endpoint, and a simple server-side change.

In the next part of the tutorial, you'll implement the "add post" and "display post" page functionality.