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": "[email protected]",
"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.
