Simple Tutorial code not getting data from a Login form (express js)

Question

So I am following a YouTube Tutorial on how to set up a simple login server (channel name: web dev simplified, video: "Node.js Passport Login System Tutorial")

The code (at the stage I am at @ 14:12 mark in video) is suppose to console-log an array of a new registered user at the terminal.

but I get an empty array instead. Despite having the same code (I followed him step by step) I do not get the new user. What am I doing wrong?

const path = require('path');
const fs = require('fs');
const express = require('express');
const app= express();
const bcrypt = require('bcrypt');
const session = require('express-session');
// Get express ready to setup server
var users =[];
//{id:"", name:"", email:"", password:"",}



app.set('view-engine', 'ejs')
app.use(express.urlencoded({ extended: false }));

// Sets up main page
app.get('/', (req, res) => {
 res.render('index.ejs', {name: 'Moe'})   
})

////////////////Sets up login page////////////////////////
app.get('/login', (req, res) => {
    res.render('login.ejs')   
   })
///////////////Sets up register page////////////////////////
app.get('/register', (req, res) => {
    res.render('register.ejs')   
   })
///////////////////// Recieves date from register /////////////////
app.post('/register',  async (req, res) => {
    try {
      const hashedPassword = await bcrypt.hash(req.body.password, 10)
      
      users.push({
        id: Date.now().toString(),
        name: req.body.name,
        email: req.body.email,
        password: hashedPassword
      })
      res.redirect('/login')
    } catch {
      res.redirect('/register')
    }
    console.log(users);
  });




///////////////////////////////////////////////////////




// Setup Server
app.listen(5000);

html for login

<h1>Login</h1>

<form action="register" method="post">
<div>
<label for="name">username</label>
<input type="text" id="name" name="name" required>
</div>
<br>
<div>
<label for="name">password</label>
<input type="text" id="password" password="password"required>
</div>
<br>
<button type="submit">Login</button>
<br>
<a href="register">Register</a>
</form>
<br>
back to <a href="/">Homepage</a>

html for register

<h1>register</h1>

<form action="register" method="POST">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<br>
<div>
<label for="email">email</label>
<input type="email" id="email" name="email" required>
</div>
<br>
<div>
<label for="password">password</label>
<input type="password" id="password" password="password"required>
</div>
<br>
<button type="submit">Register</button>
<br>
<a href="login">Login</a>




</form>
<br>
back to <a href="/">Homepage</a>

I updated my answer below. You're missing the name attribute on the input element for the password. — Andrew
– Andrew, Commented May 11, 2021 at 5:16

Andrew · Accepted Answer · 2021-05-11 05:15:49Z

1

The request body needs to be parsed. Add this above your routes: app.use(express.json()); ^^^ Scratch this part. It's only needed with a JSON payload ^^^

In your html you have password="password" instead of name="password" for the password input element.

edited May 11, 2021 at 5:15

answered May 11, 2021 at 4:52

Andrew

2241 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew Over a year ago

Sorry, I just had a look at the video. I should have expected it's sent as form data, in which case it should work without the express.json() middleware.

Deerman1989 Over a year ago

Thanks, but why did it return an empty array instead of one with the name and email only?

Andrew Over a year ago

It never makes it to the part where it adds the object to the users array. You can see what's happening if you replace the bottom part with: catch (error) { console.log(error); res.redirect('/register') }

Collectives™ on Stack Overflow

Simple Tutorial code not getting data from a Login form (express js)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related