Shineyrock

like 8 09
Site Authentication in Node.js: User Signup and Login
1. November 2017
2. Daily
3. gelezen 0
Just as authentication is important in APIs, it is also an important feature in certain web applications—especially those with pages and secrets that should only be accessible to registered and authenticated users.

In this tutorial, you will build a simple web application while learning how to create user registration.

Application Setup

Create a new directory where you will be working from. For this tutorial, we will create a folder called site-auth. You can initialize npm in the new directory you just created. Navigate to the terminal of your directory and initialize npm by typing the code snippet below.
```
npm init -y 
```
The -y flag tells npm to use the default options.

We will also be installing some dependencies for this project. Install them as follows:
```
npm install bcryptjs
npm install connect-flash
npm install cookie-parser
npm install express
npm install express-handlebars
npm install express-messages
npm install express-session
npm install joi
npm install mongoose
npm install morgan
npm install passport
npm install passport-local
```
Now create a file in your working directory called app.js.

Start by requiring the dependencies you installed and any other necessary files.
```
// app.js

const express = require('express');
const morgan = require('morgan')
const path = require('path');
const cookieParser = require('cookie-parser');
const expressHandlebars = require('express-handlebars');
const flash = require('connect-flash');
const session = require('express-session');
const mongoose = require('mongoose')
const passport = require('passport')
```
For this tutorial, you will be using MongoDB as your database. You will need to store user information in the database. To work with MongoDB, you will make use of Mongoose—a MongoDB modelling tool for Node.js. Setting up Mongoose is easy, like this.
```
// app.js

mongoose.Promise = global.Promise
mongoose.connect('mongodb://localhost:27017/site-auth')
```
At this point, let's set up our middleware.
```
// 1
const app = express()
app.use(morgan('dev'))

// 2
app.set('views', path.join(__dirname, 'views'))
app.engine('handlebars', expressHandlebars.engine({
    extname: '.handlebars',
    defaultLayout: 'layout',
    layoutsDir: "views/layouts/"
}));
app.set('view engine', 'handlebars')

// 3
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cookieParser())
app.use(express.static(path.join(__dirname, 'public')))
app.use(session({
  cookie: { maxAge: 60000 },
  secret: 'cookiesecret',
  saveUninitialized: false,
  resave: false
}));

app.use(passport.initialize())
app.use(passport.session())

// 4
app.use(flash())
app.use((req, res, next) => {
  res.locals.success_messages = req.flash('success')
  res.locals.error_messages = req.flash('error')
  next()
})


// 5
// catch 404 and forward to error handler
app.use((req, res, next) => {
  res.render('notFound')
});

// 6
app.listen(5000, () => console.log('Server started listening on port 5000!'))
```
1. Express is initialized and assigned to app.
2. Middleware to handle views is set up. For the views, you'll be making use of handlebars.
3. You set up middleware for express urlencoded, cookie, session, and passport. Passport will be used when users want to log in.
4. At some points, you will be displaying flash messages. Thus you need to set up middleware for that, and also create the type of flash messages you want.
5. Middleware to handle 404 errors. This middleware kicks in when a request does not map to any of the middleware created above it.
6. The server is set to listen at port 5000.
We can run the server we just created on our computer with the following command:
```
node app.js
```
You should see the message Server started listening on port 5000! if your setup was successful.

Views Setup

Create a new directory called views. Inside the views directory, create two other directories called layouts and partials. You want to achieve a tree structure like this in your views folder, so create the necessary files in their respective directories.
```
├── layouts
│   └── layout.handlebars
├── partials
│   └── navbar.handlebars
├── dashboard.handlebars
├── index.handlebars
├── login.handlebars
├── notFound.handlebars
└── register.handlebars
```
Project file structure

With the file structure done, it is time to write the code.
```
#views/dashboard.handlebars


<div class="jumbotron">
  <h1>User DashBoard</h1>
</div>
```
This is a dashboard that should be visible to only registered users. For this tutorial, it will be your secret page.

Now the index page for the application should look like this.
```
#views/index.handlebars


<div class="jumbotron">
  <h1>Site Authentication!</h1>
  <p class="lead">Welcome aboard.</p>
</div>
```
The application needs a layout, and here is the layout you will be using.
```
#layout/layout.handlebars

<!DOCTYPE html>
<html>
  <head>
    <title>Site Authentication</title>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
          crossorigin="anonymous">
    <link rel="stylesheet"
          href="/css/style.css">
  </head>
  <body>
    {{#if success_messages }}
      <div class="alert alert-success">{{success_messages}}</div>
    {{/if}}
    {{#if error_messages }}
      <div class="alert alert-danger">{{error_messages}}</div>
    {{/if}}
    <div class="container">
      {{> navbar}}
      {{{body}}}
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
  </body>
</html>
```
You'll need a login page for registered users.
```
#views/login.handlebars

<form class="form-signin" action="/users/login" method="POST">
  <h2 class="form-signin-heading">Please sign in</h2>

  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>

  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>

  <br/>

  <button class="btn btn-lg btn-default btn-block" type="submit">Sign in</button>
</form>
```
The notFound.handlebars file will be used as your error page.
```
#views/notFound.handlebars


<div class="jumbotron">
  <h1>Error</h1>
</div>
```
Your registration page is supposed to look like this.
```
#views/register.handlebars

<form class="form-signin" action="/users/register" method="POST">
  <h2 class="form-signin-heading">Please sign up</h2>

  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>

  <label for="inputUsername" class="sr-only">Username</label>
  <input type="text" id="inputUsername" name="username" class="form-control" placeholder="Username" required>

  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>

  <label for="inputConfirmPassword" class="sr-only">Confirm Password</label>
  <input type="password" id="inputConfirmPassword" name="confirmationPassword" class="form-control" placeholder="Confirm Password" required>

  <br/>

  <button class="btn btn-lg btn-default btn-block" type="submit">Sign up</button>
</form>
```
Finally, for your views, here's your navigation bar.
```
#partials/navbar.handlebars

<div class="masthead">
  <h3 class="text-muted">Site Authentication</h3>
  <nav>
    <ul class="nav nav-justified">
      <li class="active"><a href="/">Home</a></li>
      {{#if isAuthenticated}}
        <li><a href="/users/dashboard">Dashboard</a></li>
        <li><a href="/users/logout">Logout</a></li>
      {{else}}
        <li><a href="/users/register">Sign Up</a></li>
        <li><a href="/users/login">Sign In</a></li>
      {{/if}}
    </ul>
  </nav>
</div>
```
With that done, you are good to go into some deep parts.

Data Validation

You'll need a User model. From the views code above, you can deduce that the properties needed for the User model are email, username, and password. Create a directory called models, and a file in it called user.js.
```
#models/user.js

// 1
const mongoose = require('mongoose')
const Schema = mongoose.Schema
const bcrypt = require('bcryptjs')

// 2
const userSchema = new Schema({
  email: String,
  username: String,
  password: String
}, {

  // 3
  timestamps: {
    createdAt: 'createdAt',
    updatedAt: 'updatedAt'
  }
})

// 4
const User = mongoose.model('user', userSchema)
module.exports = User
```
1. Imports dependencies and saves them in constants.
2. A new Schema is created. For each user, you want to save the email, username, and password to the database. The Schema shows how the model is to be constructed for each document. Here you want the email, username, and password to be of the String type.
3. For each user saved to the database, you also want to create timestamps. You utilize Mongoose to obtain the createdAt and updatedAt, and this is then saved to the database.
4. The model is defined and assigned to a constant called User, which is then exported as a module so it can be used in other parts of the application.
Salting and Hashing of the Password

You do not want to store users' passwords as plain text. Here's what you want to do when a user enters a plain text password while registering. The plain text password should be hashed using a salt that will be generated by your application (using bcryptjs). This hashed password is then stored in the database.

Sounds great, right? Let's implement that in the user.js file.
```
#models/user.js

module.exports.hashPassword = async (password) => {
  try {
    const salt = await bcrypt.genSalt(10)
    return await bcrypt.hash(password, salt)
  } catch(error) {
    throw new Error('Hashing failed', error)
  }
}
```
You just created a method that will be called for events of user registration. The method will receive the plain text password the user entered. As I mentioned earlier, the plain text password will be hashed using a generated salt. The hashed password will be returned as the password for the user.

Index and Users Routes

Create a new directory called routes. In this new directory, create two new files: index.js and users.js.

The index.js file will be very simple. It will map to the index of your application. Remember you set up middleware for your routes in your app.js file when you did this.
```
app.use('/', require('./routes/index'))
app.use('/users', require('./routes/users'))
```
So your index route, which simply renders the index page, should look like this.
```
#routes/index.js

const express = require('express')
const router = express.Router()

router.get('/', (req, res) => {
    res.render('index')
})

module.exports = router
```
Signup Implementation

Now to the users route. For now, this route file will be doing four things.
1. Require dependencies. You will need to require the dependencies you installed using NPM.
2. Validate user inputs. You want to make sure that the user does not submit an empty form. All inputs are required, and all must be of the type String. The email has a special validation called .email() which ensures that what is entered matches the email format, while the password is validated using a regular expression. For the confirmation password, you want it to be the same as the password entered. These validations are done using Joi.
3. Set up your router. The GET request renders the registration page, while the POST request kicks in when the user hits the button to submit the form.
4. The router gets exported as a module.
Here is what the code looks like.
```
#routes/users.js

const express = require('express');
const router = express.Router()
const Joi = require('joi')
const passport = require('passport')

const User = require('../models/user')


//validation schema

const userSchema = Joi.object().keys({
  email: Joi.string().email().required(),
  username: Joi.string().required(),
  password: Joi.string().regex(/^[a-zA-Z0-9]{6,30}$/).required(),
  confirmationPassword: Joi.any().valid(Joi.ref('password')).required()
})

router.route('/register')
  .get((req, res) => {
    res.render('register')
  })
  .post(async (req, res, next) => {
    try {
      const result = userSchema.validate(req.body)
      if (result.error) {
        req.flash('error', 'Data entered is not valid. Please try again.')
        res.redirect('/users/register')
        return
      }

      const user = await User.findOne({ 'email': result.value.email })
      if (user) {
        req.flash('error', 'Email is already in use.')
        res.redirect('/users/register')
        return
      }

      const hash = await User.hashPassword(result.value.password)

      delete result.value.confirmationPassword
      result.value.password = hash

      const newUser = await new User(result.value)
      await newUser.save()

      req.flash('success', 'Registration successfully, go ahead and login.')
      res.redirect('/users/login')

    } catch(error) {
      next(error)
    }
  })

  module.exports = router
```
The regex format for the password—/^[a-zA-Z0-9]{6,30}$/—indicates that the password should contain lowercase or uppercase alphabets or numerics and the password length should be a minimum of 6 and maximum of 30 characters.

Let's look deeper into what is happening in that POST request.

The values entered in the registration form are accessible via req.body, and the values look like this.
```
{
    email: 'maryokosun@gmail.com',
    username: 'marynoir',
    password: 'marynoir',
    confirmationPassword: 'marynoir'
}
```
This is validated using the userSchema you created above, and the values entered by the user are assigned to a constant called result.

If an error is encountered because of the validation, an error message is displayed to the user and a redirection to the registration page takes place.

Otherwise, we try to find if a user with the same email address exists, as you do not want to have two or more users with the same email address. If a user is found, the user is told that the email address is already in use.

In a scenario where no registered user has that email address, the next step is to hash the password. This is where you call the hashPassword method you created in your user.js file. The new hashed password is assigned to a constant called hash.

There is no need to store the confirmationPassword in the database, so this is deleted. The password available from result is still the plain password. Since you do not want to store the plain password in your database, it is important to reassign the password value to the hash that was created. This is done with a line of code.
```
result.value.password = hash
```
The new user instance gets saved to the database. A flash message stating that the registration was successful is displayed, and the user is redirected to the login page.

Start up your server from your terminal by running:
```
node app.js
```
Point your browser to https://localhost:5000 and you should see the registration page of your application.

Signup page

Sign-In Implementation

After a user has successfully registered, they would be routed to the login page. The next step would be implementing code for the sign-in feature. In the /routes/users.js file, within the validation schema, just below the userSchema, add the following code snippets for the login validation schema:
```
const loginSchema = Joi.object().keys({
  email: Joi.string().email().required(),
  password: Joi.string().regex(/^[a-zA-Z0-9]{6,30}$/).required()
})
```
In the routes section, add the following snippets just below the register route:
```
router.route('/login')
  .get((req, res) => {
    res.render('login')
  })
  .post(async (req, res, next) => {
  try {
    const result = loginSchema.validate(req.body)
    if (result.error) {
      req.flash('error', 'Data entered is not valid. Please try again.')
      res.redirect('/users/login')
      return
    }

    const user = await User.findOne({ 'email': result.value.email })
    if (user) {
      let passwordIsValid = bcrypt.compareSync(
        result.value.password,
        user.password
      );
      if (!passwordIsValid) {
        req.flash('error', 'Email/Password is not valid. Please try again.')
        res.redirect('/users/login')
        return
      }
      req.flash('success', 'Login successfully')
      res.redirect('/users/dashboard')
    }
  } catch (error) {
    next(error)
  }
})
```
The code snippet above sets up the login router. The GET request renders the login page, while the POST request handles the validation of the req.body and compares the password against the saved password in the database. If these checks are successful, the registered user can successfully log in and gets routed to the dashboard page.

Dashboard Implementation

The dashboard implementation is quite straightforward. Add the following code snippets in the /routes.index.js file beneath the GET request for the index page.
```
router.get('/users/dashboard', (req, res) => {
    res.render('dashboard')
})
```
The code above renders the dashboard page when the GET request to /users/dashboard is made.

Dashboard

Conclusion

Now you know how to implement a registration and login system using Node.js in a web application. You have learned the importance of validating user input and how to do that using Joi. You also made use of bcryptjs to salt and hash your password.

You can find the full source code for the example used in the GitHub repository.

This post has been updated with contributions from Mary Okosun. Mary is a software developer based in Lagos, Nigeria, with expertise in Node.js, JavaScript, MySQL, and NoSQL technologies.
martijn broeders

founder/ strategic creative bij shineyrock web design & consultancy
e-mail: .(JavaScript must be enabled to view this email address)
telefoon: 434 210 0245

Like

disLike

8

Plaats reactie...

Comments

Name*

Email*

location

URL

Comment {comment}

Remember my personal information Notify me of follow-up comments?

9 years ago Cathleen Wonderful, what a website it is! This…

9 years ago Sharyn Ѕimply a smiling ѵisitant heгe to…

9 years ago shelby What's up it's me, I am also visiting…

9 years ago Lottie I read this paragraph completely…

8 years ago earlene This text is invaluable. How can I find…

8 years ago amelie I needed to thank you for this great…

8 years ago noe vance Hi, for all time i used to check…

8 years ago brayden Pretty! This was an extremely wonderful…

8 years ago Peden Hello! I'm at work browsing your blog…

8 years ago cameron Very great post. I just stumbled upon…

8 years ago juliane mckibben WOW just what I was looking for. Came…

8 years ago carissa That is a good tip especially to those…

8 years ago carris This piece of writing presents clear…

8 years ago marissa Great write-up, I am normal visitor of…

8 years ago ena As a Newbie, I am always exploring…

8 years ago beth Thank you for another fantastic post.…

blog

Site Authentication in Node.js: User Signup and Login

Application Setup

Views Setup

Data Validation

Salting and Hashing of the Password

Index and Users Routes

Signup Implementation

Sign-In Implementation

Dashboard Implementation

Conclusion

martijn broeders

Per - categorie

RSS

Op - datum

December, 2023

October, 2022

September, 2022

August, 2022

April, 2022

January, 2022

December, 2021

November, 2021

July, 2021

June, 2021

May, 2021

April, 2021

March, 2021

February, 2021

May, 2020

April, 2020

March, 2020

September, 2017

February, 2020

January, 2020

December, 2019

September, 2019

July, 2019

April, 2019

March, 2019

February, 2019

January, 2019

December, 2018

November, 2018

October, 2018

September, 2018

August, 2018

July, 2018

June, 2018

May, 2018

April, 2018

March, 2018

February, 2018

January, 2018

December, 2017

November, 2017

October, 2017

September, 2017

August, 2017

July, 2017

June, 2017