Google+
4elements web design & consultancy

4elements

Blog

  • 30

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

    4elements | web design The Hague blog • Creating a Blogging App Using React, Part 2: User Sign-Up

    In the first part of this tutorial series, you saw how to implement the sign-in functionality. In this part, you'll learn how to implement the sign-up functionality and modify the sign-in functionality to check for valid users from MongoDB.

    Getting Started

    Let's get started by cloning the source code from the first part of the tutorial.

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

    Start the Node.js server and you will have the application running at http://localhost:7777/index.html#/.

    Setting Up the Back End

    For this application, you'll be using MongoDB as the back end. Follow the instructions in the MongoDB official documentation to install MongoDB on Ubuntu. Once you have MongoDB installed, you'll need a connector to connect MongoDB and Node.js. Install the MongoDB Node.js driver using the Node Package Manager (or npm):

    Once you have the driver installed, you should be able to require the driver in the application.

    Create a file called user.js where you'll keep the user-related stuff. Inside the user.js file, require the MongoDB client-related dependencies.

    You'll be using a library called assert to check the returned response. Include assert in the user.js file.

    Let's name our database Blog in MongoDB, so our database URL is as shown:

    Inside the user.js file, create and export a function called signup

    Using the MongoDB client, try to connect to the database. Once connected, you'll log the connected message in the terminal.

    Setting Up the Sign-Up Event

    Once you have set up the MongoDB back end, let's implement the sign-up event. Inside the main.jsx page, include the on-change event for the name, email and password input text boxes in the signup class.

    Bind the above event changes in the class constructor.

    Define the state variables inside the signup class constructor.

    Define the signup method inside the signup class. Inside the signup method, using the axios library, make a post method call to the signup method in the user.js file. 

    Inside the signup function in the user.js file, you'll implement the database insert.

    Add the /signup request handler in the app.js file as shown to handle the sign-up click event. Inside the /signup request handler function, make a call to the user.signup method.

    Require the user.js file inside the app.js file.

    Save the above changes and restart the server. Point your browser to http://localhost:7777/index.html#/signup and you should have the sign-up page. Click on the Sign Up button and you will have the connected message in the terminal.

    Save User Details in MongoDB

    To save user details in the Blog database, you'll create a collection called user. Inside the user collection, you'll keep all the user details such as name, email address, and password. The MongoClient.connect returns a db parameter using which you can insert an entry in the user collection. 

    You'll make use of the insertOne method to insert a single record in the user collection. Modify the code in the signup method in user.js as shown below:

    Here is the complete user.js code:

    Modify the /signup request handler in the app.js file to pass in the name, email and password to the user.js signup method.

    Save the above changes and restart the server. Point your browser to http://localhost:7777/index.html#/signup. Fill the user sign-up details and click the sign-up button. You will have the Saved the user sign up details. message in the server terminal. Log in to the MongoDB shell and check the user collection in the Blog database. To find the user details, enter the following command in the MongoDB shell:

    The above command will display the user details in JSON format.

    Implementing User Sign-In Check

    In the first part of the tutorial, you hard-coded the user sign-in check since the user sign-up hasn't been implemented. Let's modify the hard-coded sign-in check and look into the MongoDB database for valid user sign-ins.

    Create a function called validateSignIn in the user.js file. 

    Inside the validateSignIn function, using the MongoDB client you'll connect to the Blog database and query the user table for a user with the specified username and password. You'll make use of the findOne method to query the user collection.

    Check the returned result for null in case the entry is not found. 

    As seen in the above code, if no entry is found, false is returned in the callback. If an entry is found, true is returned in the callback.

    Here is the complete validateSignIn method:

    In the /signin method in the app.js file, you'll make a call to the validateSignIn method. In the callback function, you'll check for the response. If true, it will indicate a valid sign-in, else an invalid sign-in. Here is how it looks:

    Save the above changes and restart the server. Point your browser to http://localhost:7777/index.html#/. Enter a valid username and password and you will have a success message logged in the browser console. On entering an invalid username and password, it would display an error message.

    Wrapping It Up

    In this part of the tutorial, you saw how to implement the user sign-up process. You saw how to create the sign-up view and pass the data from the React user interface to Node.js and then save it in the MongoDB. You also modified the user sign-in functionality to check for valid user sign-in from the MongoDB database.

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

    Source code from this tutorial is available on GitHub.

    Do let us know your thoughts or any suggestions in the comments below.

    martijn broeders

    founder/ strategic creative at 4elements web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 06 38 55 28 54
  • 1
    silhouette
    demibooker30
    July 05, 2018 at

    Valuable information. Lucky me I discovered your web site unintentionally, and I am shocked why this coincidence did not took place in advance! I bookmarked it.

  • 2
    silhouette
    harlan
    July 05, 2018 at

    I am curious to find out what blog system you're using? I'm experiencing some minor security issues with my latest blog and I'd like to find something more safeguarded. Do you have any suggestions?

  • 3
    silhouette
    janinebrewer42
    July 04, 2018 at

    I'm very happy to read this. This is the type of manual that needs to be given and not the random misinformation that is at the other blogs. Appreciate your sharing this greatest doc.

  • 4
    silhouette
    joannabillups
    July 04, 2018 at

    Keep working, remarkable job!

  • 5
    silhouette
    toddboerner4378
    July 04, 2018 at

    I truly treasure your piece of work, Great post.

  • 6
    silhouette
    mahaliamatheson
    July 04, 2018 at

    Yay google is my queen assisted me to find this great site!

  • 7
    silhouette
    elvera
    July 03, 2018 at

    I went over this site and I think you have a lot of superb information, saved to bookmarks (:.

  • 8
    silhouette
    penny
    July 03, 2018 at

    What's up friends, fastidious post and fastidious urging commented at this place, I am in fact enjoying by these.

  • 9
    silhouette
    lenny
    July 01, 2018 at

    Useful info. Lucky me I discovered your site by chance, and I'm surprised why this accident didn't came about in advance! I bookmarked it.

  • 10
    silhouette
    lenny
    June 30, 2018 at

    each time i used to read smaller articles that as well clear their motive, and that is also happening with this article which I am reading at this place.

By - category

    By - date