Full Stack Web App Using Vue.js & Express.js: Part 3 - Login
video description
Date: 2022-03-14
Related videos
Comments and reviews: 10
Maximilian
Instead of having that whole block with -const isPasswordValid = ...- while don't you just do this in the try block:
---
const -email, password- = req.body
const user = await User.findOne(-
email,
password
-)
if (!user) -
throw 'incorrect' //this should go straight to the catch to keep the code DRY
-
res.send(user.toJSON())
---
This way it will be more efficient (fewer computations and less complexity), easier to read, smaller in terms of file size and straight-forward?
I also wonder why you initialise constants inside functions when they are going to be used several times especially when there's no risk putting it outside (while remaining in the component)?
Side notes: A lot seems to have changed this tutorial was made so a good portion of the methods and packages used are deprecated.
And the
---if (token) -
state.isUserLoggedIn = true
- else -
state.isUserLoggedIn = false
-
---
Could reduced to -state.isUserLoggedIn = !!token- or -state.isUserLoggedIn = Boolean(token)- or the ternary equivalent.
reply
Instead of having that whole block with -const isPasswordValid = ...- while don't you just do this in the try block:
---
const -email, password- = req.body
const user = await User.findOne(-
email,
password
-)
if (!user) -
throw 'incorrect' //this should go straight to the catch to keep the code DRY
-
res.send(user.toJSON())
---
This way it will be more efficient (fewer computations and less complexity), easier to read, smaller in terms of file size and straight-forward?
I also wonder why you initialise constants inside functions when they are going to be used several times especially when there's no risk putting it outside (while remaining in the component)?
Side notes: A lot seems to have changed this tutorial was made so a good portion of the methods and packages used are deprecated.
And the
---if (token) -
state.isUserLoggedIn = true
- else -
state.isUserLoggedIn = false
-
---
Could reduced to -state.isUserLoggedIn = !!token- or -state.isUserLoggedIn = Boolean(token)- or the ternary equivalent.
reply
MadGamer
For those that have been having the -email already exists- problem and problems with hooks/comparing password is always false etc. Read the following:
Delving down into the source problem is the passwords are indeed not equivalent. We would hash the password, HOWEVER it would not persist in your SQLite database. This causes comparePassword to compare a simple string like 'passwordlol' (which was saved in the database because the hooks aren't persisting the correct hash password) to '2vh$-/30d-#%$%--..' which are not equal.
THE SOLUTION: Instead, hash the password in your AuthenticationController.js file before it is sent to the User model for creation. This way the Model saves the hashed password to the database and therefore it persists and comparisons become equal leading to everything working. If someone wants me to I will post the code I used just reply to this comment
reply
For those that have been having the -email already exists- problem and problems with hooks/comparing password is always false etc. Read the following:
Delving down into the source problem is the passwords are indeed not equivalent. We would hash the password, HOWEVER it would not persist in your SQLite database. This causes comparePassword to compare a simple string like 'passwordlol' (which was saved in the database because the hooks aren't persisting the correct hash password) to '2vh$-/30d-#%$%--..' which are not equal.
THE SOLUTION: Instead, hash the password in your AuthenticationController.js file before it is sent to the User model for creation. This way the Model saves the hashed password to the database and therefore it persists and comparisons become equal leading to everything working. If someone wants me to I will post the code I used just reply to this comment
reply
Cal
I was having issues registering where it kept saying the email was already registered even though it wasn't. I ended up using bcrypt instead of bcrypt-nodejs (though I doubt this is the problem - but bcrypt-nodejs is deprecated and they're completely interchangeable anyway). The main issue was in the hashPassword function and what ended up working was the following:
async function hashPassword(user) --
const SALT_FACTOR = 8;-
if (!user.changed('password')) --
return null;-
--
const hash = await bcrypt.hash(user.password, SALT_FACTOR);-
user.setDataValue('password', hash);-
return null;-
-
Hopefully that can help someone else!
reply
I was having issues registering where it kept saying the email was already registered even though it wasn't. I ended up using bcrypt instead of bcrypt-nodejs (though I doubt this is the problem - but bcrypt-nodejs is deprecated and they're completely interchangeable anyway). The main issue was in the hashPassword function and what ended up working was the following:
async function hashPassword(user) --
const SALT_FACTOR = 8;-
if (!user.changed('password')) --
return null;-
--
const hash = await bcrypt.hash(user.password, SALT_FACTOR);-
user.setDataValue('password', hash);-
return null;-
-
Hopefully that can help someone else!
reply
george
congrats on the tutorial. its really good. I found a bug. In the -hooks-, I had to comment the -beforeSave: hashPassword-, because the comparePasswords was ALWAYS giving false. Both, the beforeCreate and beforeSave hooks run which created 2 hash values. The beforeSave was saved in the db BUT the beforeCreate was used in the comparePassword which made the validation ALWAYS false. Anyway, i commented out the beforeSave and it works. cheers.
OOPS, someone else had mentioned it also, i guess i should had read all the comments.
reply
congrats on the tutorial. its really good. I found a bug. In the -hooks-, I had to comment the -beforeSave: hashPassword-, because the comparePasswords was ALWAYS giving false. Both, the beforeCreate and beforeSave hooks run which created 2 hash values. The beforeSave was saved in the db BUT the beforeCreate was used in the comparePassword which made the validation ALWAYS false. Anyway, i commented out the beforeSave and it works. cheers.
OOPS, someone else had mentioned it also, i guess i should had read all the comments.
reply
Maciek
My function comparePasswords always compare password1: hello1234 and password2: $2a$08$VhSymr8EXqy4YZaGz9.... and I of course always get false ... my question is, when password from login page should be hashed because I have analyzed the code and we actually compare password from req.body with a hased password from database I believe that it is being done here: bcrypt.compareAsync(password, this.password) and it might be a problem with double hashing (as someone mentioned) but none of proposed answers have helped
reply
My function comparePasswords always compare password1: hello1234 and password2: $2a$08$VhSymr8EXqy4YZaGz9.... and I of course always get false ... my question is, when password from login page should be hashed because I have analyzed the code and we actually compare password from req.body with a hased password from database I believe that it is being done here: bcrypt.compareAsync(password, this.password) and it might be a problem with double hashing (as someone mentioned) but none of proposed answers have helped
reply
Titus
My fun with broken salting / hash:
-
-error-: -This login information was incorrect.-
-
is apparently from this:
(node:15589) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Can't set headers after they are sent.
(node:15589) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Any ideas?
TIA
reply
My fun with broken salting / hash:
-
-error-: -This login information was incorrect.-
-
is apparently from this:
(node:15589) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Can't set headers after they are sent.
(node:15589) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Any ideas?
TIA
reply
JC
Anybody doing this in 2020 who is having problems with Vuetify, rollback your Vuetify version to the one used in this video.
Go to your client/node_modules folder and delete the entire vuetify folder.
Then navigate to your client folder and run -npm install vuetify-0.15.2 --save-
After that, run -npm install css-mqpacker --save-
Do an -npm install- to rebuild the packages
After these steps, I got the app running similar to the one he has in the video.
reply
Anybody doing this in 2020 who is having problems with Vuetify, rollback your Vuetify version to the one used in this video.
Go to your client/node_modules folder and delete the entire vuetify folder.
Then navigate to your client folder and run -npm install vuetify-0.15.2 --save-
After that, run -npm install css-mqpacker --save-
Do an -npm install- to rebuild the packages
After these steps, I got the app running similar to the one he has in the video.
reply
Stephen
Just noticed that 'bcrypt.nodejs' in an unmaintained project and hasn't been updated in 6 years. I swapped it out with 'bcrypt', which was updated 2 months ago and only had to change one line of code so for. I'm only through video 3, so I might have to change more, but all I changed was 'bcrypt.hashAsync(user.password, salt, null);' to 'bcrypt.hashSync(user.password, salt, null);' in User.js. Just change Async to Sync on that one line and everything works.
reply
Just noticed that 'bcrypt.nodejs' in an unmaintained project and hasn't been updated in 6 years. I swapped it out with 'bcrypt', which was updated 2 months ago and only had to change one line of code so for. I'm only through video 3, so I might have to change more, but all I changed was 'bcrypt.hashAsync(user.password, salt, null);' to 'bcrypt.hashSync(user.password, salt, null);' in User.js. Just change Async to Sync on that one line and everything works.
reply
Dusan
Thank you for an impressive effort in this entire series of films. Real-time programming/execution with constructive and clear explanations and examples. Most educational sources are rewarding solely depending on how much you want/are willing to learn.
Those who did not like the movie/series would simply continue to watch cute kittens, sell cars/insurance, or whatever they are really doing ...
reply
Thank you for an impressive effort in this entire series of films. Real-time programming/execution with constructive and clear explanations and examples. Most educational sources are rewarding solely depending on how much you want/are willing to learn.
Those who did not like the movie/series would simply continue to watch cute kittens, sell cars/insurance, or whatever they are really doing ...
reply
Nikola
Hi there. worked fine for me. You could maybe try adding a slash without any wrapping around the and see how it works. I am using the current latest stable versions of Vue.js (-2.5.17) and Vuetify (-1.1.9) and vue-router's version is -3.0.1 so maybe that's why it works for me. Great tutorial, love the calm voice and your -nock- habit. I think I got this habit too watching this series! :)
reply
Hi there. worked fine for me. You could maybe try adding a slash without any wrapping around the and see how it works. I am using the current latest stable versions of Vue.js (-2.5.17) and Vuetify (-1.1.9) and vue-router's version is -3.0.1 so maybe that's why it works for me. Great tutorial, love the calm voice and your -nock- habit. I think I got this habit too watching this series! :)
reply
Add a review, comment
Other channel videos
