- node.js
- express
- bcrypt
- jwt (jsonwebtoken)
- mysql
- react
- react-context-devtool
- react-router
- redux
- redux-persist
- axios
- boostrap
This App is an E-commerce, you can:
- signup
- signin (token)
- add a product to your cart
- add a product to sell
- visualize the product and detail
- sort the product list by categorie
- edit your cart (qty)
- edit your profil (change email, name..)
- edit your product (change price, add promotion)
- have acces to your order history
- ....
Handle error :
var mailformat = /^[\w-]+@([\w-]+\.)+[\w-]{2,4}$/g;
switch (true) {
case userObject.firstName.length < 3:
alert("first name error: min 3 character");
break;
case userObject.lastName.length < 3:
alert("last name error: min 3 character");
break;
case userObject.url.length < 10:
alert("url profile picture require");
break;
case userObject.password < 8:
alert("password minimun 8 character");
break;
case !userObject.email.match(mailformat):
alert("email incorrect");
break;
case userObject.password !== this.state.confirmPassword:
alert("confirm password error");
break;
default:
Handle if an user already use this email Back-End:
/*********************** Check if user with this email already exist *************************/
await app.use("/users/sign-up", (req, res, next) => {
console.log(req.body.email);
connection.query(
`SELECT * FROM users WHERE email = '${req.body.email}'`,
(err, results) => {
if (err) throw err;
if (results.length > 0) {
res.status(200).send("this EMAIL already exist");
} else {
next();
}
}
);
});
Api, Back-end (token, bcrypt)
await app.post("/users/sign-in", function(req, res) {
let password = req.body.password;
let email = req.body.email;
let hash = "";
connection.query(sqlRequestUsers.mailUser, [email], function(err, results) {
if (err) throw err;
// handle email error
if (!Array.isArray(results) || !results.length) {
res.send("Sorry, email incorrect");
} else {
let name = results[0].name;
let id = results[0].id;
/******* TOKEN *******/
let token = jwt.sign(
{ email: email, name: name, id: id },
config.secret
);
hash = results[0].password;
// handle password error
bcrypt.compare(password, hash, function(err, result) {
if (result == true) {
// get the decoded payload ignoring signature, no secretOrPrivateKey needed
var decoded = jwt.decode(token);
// get the decoded payload and header
var decoded = jwt.decode(token, { complete: true });
res.status(200).send({
auth: true,
token: token,
email: email,
id: id,
});
} else {
res.send("password error");
}
});
}
});
});
switch (true) {
case productObject.category.length < 2:
alert("category error: min 2 characters");
break;
case productObject.name.length < 3:
alert("name error: min 3 characters");
break;
case productObject.description.length < 10:
alert("description required min 10 characters");
break;
case productObject.url.length < 1:
alert("url of product picture required min 10 characters");
break;
case productObject.prices.length < 1:
alert("Price missing");
break;
default:
i store it in the state
headerWithToken: {
headers: {
Authorization: "Bearer " + this.props.token,
},
},
axios.post("http://localhost:8080/products/",productObject,this.state.headerWithToken)
const jwt = require('jsonwebtoken');
const config = require("../routes/modules/config");
module.exports = (req, res, next) => {
try {
const token = req.headers.authorization.split(' ')[1];
const decodedToken = jwt.verify(token, config.secret);
if (decodedToken) {
next();
} else {
res.sendStatus(403)
}
} catch {
res.status(401).json({
error: new Error('Invalid request!')
});
}
}
Import the middleware:
const auth = require("../middleware/auth");
Example of use:
// POST /productEdit/:id => Update this specific product from the database
await app.post("/productEdit/:id", auth, (req, res) => {
req.body.id = req.params.id;
if (req.body.idUser === req.body.id_user_affiliate) {
connection.query(sqlRequestProduct.editProduct(req.body), (err) => {
if (err) {
console.log(err);
res.sendStatus(500);
} else res.send("Updated");
});
}
});
componentDidMount() {
axios
.get(`http://localhost:8080/products/`)
.then((result) => {
this.props.setListOfProducts(result.data);
})
.catch(() => {
console.log("Oops, request failed!");
});
}
Project is: Finish