After researching for two days and wanting to give up A LOT I've finally found out how to use connect-flash (u do not need cookie-parser) a few main things use (return res.redirect) instead of res.render it does not like render for callbacks I don't know why. Take a look at my code to get a visual.
app.js
var express = require("express"),
bodyParser = require("body-parser"),
mongoose = require("mongoose"),
passport = require("passport"),
LocalStratagy = require("passport-local"),
User = require("./user"),
passportLocalMongoose = require("passport-local-mongoose"),
flash = require('connect-flash'),
app = express();
//using express-session
app.use(require("express-session")({
secret:"The milk would do that",
resave: false,
saveUninitialized: false
}));
app.use(flash());
app.use(function(req, res, next){
res.locals.message = req.flash();
next();
});
//connectiong to a specific database
mongoose.connect("mongodb://localhost/LoginApp");
//so body-parser works
app.use(bodyParser.urlencoded({extended: true}));
//making it so express uses the public dir
app.use(express.static("public"));
//setting the view engine to ejs
app.set("view engine", "ejs");
// so passport works
app.use(passport.initialize());
app.use(passport.session());
//authenticated data from the login form
passport.use(new LocalStratagy(User.authenticate()));
//reading the data and encoding it
passport.serializeUser(User.serializeUser());
//reading the data and unencoding it
passport.deserializeUser(User.deserializeUser());
//ROUTES
app.get("/", function(req, res){
res.render("index");
});
// AUTH ROUTES
//show login
app.get("/login", function(req, res){
req.flash("error", "")
res.render("Login");
});
//handle login form data
app.post("/login", passport.authenticate("local",{
failureRedirect: "/login",
failureFlash: true,
}) ,function(req, res){
req.flash("success", "Logged in");
return res.redirect("/");
});
//Show signup form
app.get("/signup", function(req, res){
res.render("Signup");
});
//handle signup form data
app.post("/signup", function(req, res){
User.register(new User({username: req.body.username}), req.body.password, function(err, user){
if(err){
req.flash("error", err.message);
return res.redirect("/signup");
}
passport.authenticate("local")(req, res, function(){
req.flash("success", "successfuly Signed up");
return res.redirect("/");
});
});
});
app.listen(3000, function(){
console.log("server started");
});
Header.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Fully responsive project with a backend">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- animated css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>wire frame chal</title>
</head>
<body>
<h1><%= message.error %></h1>
<h1><%= message.success %></h1>
Login.ejs
<% include ../partials/header %>
<form method="POST" action="/login">
<input type="text" name="username" placeholder="username">
<input type="password" name="password" placeholder="password">
<button>Submit</button>
</form>
<% include ../partials/footer %>
Signup.ejs
<% include ../partials/header %>
<form method="POST" action="/signup">
<input type="text" name="username" placeholder="username">
<input type="password" name="password" placeholder="password">
<button>Submit</button>
</form>
<% include ../partials/footer %>
