node.jspassport.jsejsconnect-flash

Login middleware throws a "variable is not defined" error in conjunction with Passport.js

I am currently following a Node.js course by Colt Steele on Udemy and I came across an error that I have no idea how to fix. To be more specific, this error occurs whenever I try to log in to my web app with the correct credentials (it works fine for wrong credentials).

Here is the stack trace:

ReferenceError: ...\The Web Developer Bootcamp\00 YelpCamp\views\layouts\boilerplate.ejs:20
    18| 

    19| <main class="container mt-5">

 >> 20|     <%- include('../partials/flash') %>

    21|     <%- body %>

    22| </main>

    23| 


...\The Web Developer Bootcamp\00 YelpCamp\views\partials\flash.ejs:1
 >> 1| <% if(success && success.length) { %>

    2|     <div class="alert alert-success alert-dismissible fade show" role="alert">

    3|         <%= success %>

    4|             <button type="button" class="close" data-dismiss="alert" aria-label="Close">


success is not defined
    at eval (eval at compile (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:652:12), <anonymous>:10:8)
    at flash (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:682:17)
    at include (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:680:39)
    at eval (eval at compile (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:652:12), <anonymous>:15:17)
    at boilerplate (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:682:17)
    at tryHandleCache (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:254:36)
    at Object.exports.renderFile (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:485:10)
    at renderFile (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\lib\index.js:227:7)
    at ...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\lib\index.js:282:7
    at tryHandleCache (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:260:5)
    at Object.exports.renderFile (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:485:10)
    at View.renderFile [as engine] (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\ejs-mate\lib\index.js:227:7)
    at View.render (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\express\lib\view.js:135:8)
    at tryRender (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\express\lib\application.js:640:10)
    at Function.render (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (...\The Web Developer Bootcamp\00 YelpCamp\node_modules\express\lib\response.js:1012:7)

Here is the code that causes the error:

router.post('/login', passport.authenticate('local', { failureFlash: true, failureRedirect: '/login' }), async (req, res) => {
    req.flash('success', 'Welcome back!');
    res.redirect('/campgrounds');
});

In case you need the code from boilerplate.ejs and flash.ejs, here it is:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
          crossorigin="anonymous">
</head>

<body class="d-flex flex-column vh-100">

<%- include('../partials/navbar') %>

<main class="container mt-5">
    <%- include('../partials/flash') %>
    <%- body %>
</main>

<%- include('../partials/footer') %>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
        integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
        integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
        crossorigin="anonymous"></script>
<script src="/js/hello.js"></script>
<script src="/js/validateForms.js"></script>
</body>

</html>

<% if(success && success.length) { %>
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <%= success %>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
<% } %>

<% if(error && error.length) { %>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <%= error %>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
<% } %>

What confuses me the most is that everything (regarding connect-flash package) worked flawlessly before and I never got such an error. I have included 'success' and 'error' variables in res.locals before any of the routes are registered.

Here's what I have already tried:

Solution

  • I have managed to solve the problem by adding this line:

    passport.deserializeUser(User.deserializeUser());

    after

    app.use(session(sessionConfig));
app.use(flash());
app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());