Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Creating a Blogging App Using React, Part 2: User Sign-Up
  • dislike -4 30

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

    1. June 2017
    2. Daily
    3. read 859
    4. response 20

    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.

    git clone https://github.com/royagasthyan/ReactBlogApp-SignIn

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

    cd ReactBlogApp-SignIn
npm install

    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):

    npm install mongodb

    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.

    var MongoClient = require('mongodb').MongoClient;

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

    var assert = require('assert');

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

    var url = 'mongodb://localhost:27017/Blog';

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

    module.exports = {
    signup: function(){
		// Code will be here
	}
}

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

    module.exports = {
    signup: function(name, email, password){
		MongoClient.connect(url, function(err, db) {
			console.log('connected')
		});
	}
}

    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.

    handleNameChange(e){
    this.setState({name:e.target.value})
}
handleEmailChange(e){
    this.setState({email:e.target.value})
}
handlePasswordChange(e){
    this.setState({password:e.target.value})
}

    Bind the above event changes in the class constructor.

    constructor(props) {
    super(props);
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
}

    Define the state variables inside the signup class constructor.

    this.state = {
  name:'',
  email:'',
  password:''
};

    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. 

    signUp(){
    axios.post('/signup', {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

    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.

    app.post('/signup', function (req, res) {
  user.signup('','','')
  console.log(res);
})

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

    var user = require('./user')

    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:

    db.collection('user').insertOne( {
	"name": name,
	"email": email,
	"password": password
},function(err, result){
	assert.equal(err, null);
	console.log("Saved the user sign up details.");
});

    Here is the complete user.js code:

    var MongoClient = require('mongodb').MongoClient;
var assert = require('assert');
var url = 'mongodb://localhost:27017/Blog';

module.exports = {
    signup: function(name, email, password){
		MongoClient.connect(url, function(err, db) {
		  	db.collection('user').insertOne( {
				"name": name,
				"email": email,
				"password": password
			},function(err, result){
				assert.equal(err, null);
		    	console.log("Saved the user sign up details.");
			});
		});
	}
}

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

    app.post('/signup', function (req, res) {
  var name=req.body.name;
  var email=req.body.email;
  var password=req.body.password;

  if(name && email && password){
      user.signup(name, email, password)
  }
  else{
  	res.send('Failure');
  }
})

    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:

    db.user.find()

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

    {
    "name": "roy",
    "email": "royagasthyan@gmail.com",
    "password": "test",
    "_id": ObjectId("58f622f50cb9b32905f1cb4b")
}

    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. 

    validateSignIn: function(username, password,callback){

}

    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.

    db.collection('user').findOne( { email : username ,password: password },function(err, result){

});

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

    if(result==null){
	callback(false)
}
else{
	callback(true)
}

    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:

    validateSignIn: function(username, password,callback){
	MongoClient.connect(url, function(err, db){
		db.collection('user').findOne( { email : username ,password: password
		},function(err, result){
			if(result==null){
				callback(false)
			}
			else{
				callback(true)
			}
		});
	});
}

    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:

    app.post('/signin', function (req, res) {
  var user_name=req.body.email;
  var password=req.body.password;
  user.validateSignIn(user_name,password,function(result){
    if(result){
      res.send('Success')
    }
    else{
      res.send('Wrong username password')
    }
  });

    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.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    Add a comment...
    4elements
    Comments
  • 1
    silhouette
    carris
    October 05, 2018 at

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

    4elements
    Comments
  • 2
    silhouette
    marissa
    October 03, 2018 at

    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.

    4elements
    Comments
  • 3
    silhouette
    ena
    October 02, 2018 at

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

    4elements
    Comments
  • 4
    silhouette
    beth
    September 24, 2018 at

    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.

    4elements
    Comments
  • 5
    silhouette
    joella
    September 22, 2018 at

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

    4elements
    Comments
  • 6
    silhouette
    roberto
    September 17, 2018 at

    I was able to find good information from your articles.

    4elements
    Comments
  • 7
    silhouette
    kristin
    September 15, 2018 at

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

    4elements
    Comments
  • 8
    silhouette
    iasjohnnie
    August 10, 2018 at

    Awesome job once again! Thumbs up:)

    4elements
    Comments
  • 9
    silhouette
    majortrejo47
    July 27, 2018 at

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

    4elements
    Comments
  • 10
    silhouette
    charliefiller27
    July 19, 2018 at

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

    4elements
    Comments
  • 11
    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.

    4elements
    Comments
  • 12
    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?

    4elements
    Comments
  • 13
    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.

    4elements
    Comments
  • 14
    silhouette
    joannabillups
    July 04, 2018 at

    Keep working, remarkable job!

    4elements
    Comments
  • 15
    silhouette
    toddboerner4378
    July 04, 2018 at

    I truly treasure your piece of work, Great post.

    4elements
    Comments
  • 16
    silhouette
    mahaliamatheson
    July 03, 2018 at

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

    4elements
    Comments
  • 17
    silhouette
    elvera
    July 03, 2018 at

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

    4elements
    Comments
  • 18
    silhouette
    penny
    July 02, 2018 at

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

    4elements
    Comments
  • 19
    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.

    4elements
    Comments
  • 20
    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.

    4elements
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News