4elements web design & consultancy



  • like 4 30

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

    4elements | web design Den Haag 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 bij 4elements web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 06 38 55 28 54
  • 1
    05 October, 2018 om

    This piece of writing presents clear idea designed for the new people of blogging, that in fact how to do blogging.

  • 2
    03 October, 2018 om

    Great write-up, I am normal visitor of one's web site, maintain up the excellent operate, and It is going to be a regular visitor for a long time.

  • 3
    03 October, 2018 om

    As a Newbie, I am always exploring online for articles that can help me. Thank you

  • 4
    24 September, 2018 om

    Thank you for another fantastic post. The place else may just anybody get that kind of info in such an ideal way of writing? I have a presentation next week, and I'm on the look for such info.

  • 5
    22 September, 2018 om

    What's up, I log on to your blogs on a regular basis. Your humoristic style is witty, keep up the good work!

  • 6
    17 September, 2018 om

    I was able to find good information from your articles.

  • 7
    16 September, 2018 om

    There's definately a lot to know about this subject. I like all the points you have made.

  • 8
    10 August, 2018 om

    Awesome job once again! Thumbs up:)

  • 9
    27 July, 2018 om

    Hi, just wanted to say, I liked this article. It was practical. Keep on posting!

  • 10
    19 July, 2018 om

    Wow, this piece of writing is good, my sister is analyzing these kinds of things, thus I am going to let know her.

  • 11
    05 July, 2018 om

    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.

  • 12
    05 July, 2018 om

    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?

  • 13
    04 July, 2018 om

    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.

  • 14
    04 July, 2018 om

    Keep working, remarkable job!

  • 15
    04 July, 2018 om

    I truly treasure your piece of work, Great post.

  • 16
    04 July, 2018 om

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

  • 17
    03 July, 2018 om

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

  • 18
    03 July, 2018 om

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

  • 19
    01 July, 2018 om

    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.

  • 20
    30 June, 2018 om

    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.

Per - categorie

    Op - datum