Error: Cannot set headers after they are sent back to the client in express middleware

Question

I am having issues while doing some complex stuff inside middleware. I know i should be getting this done in a route or some small function but I had no choice.

This is the entire middleware:

app.use(async function addReqUser(req,res,next) {
    if (req.cookies) {
        let token = req.cookies['session-token'];
        let user = {};
    async function verify() {
    //google auth function
        const ticket = await client.verifyIdToken({
            idToken: token,
            audience: CLIENT_ID, 
        });

        const payload = ticket.getPayload();
        user.name = payload.name;
        user.email = payload.email;
        user.picture = payload.picture;
      }
      verify()
      .then(async ()=>{
          req.user = user;

          const user = await User.find({ email: req.user.email }).select("_id").exec();
          req.user.id = user[0]._id

          res.locals.user = req.user //populate the user with an id

          next();
      })
      .catch(err=>{
        console.log(err)
         return res.redirect('/')
      })
    }
    next()
})

The error just says [ERR HTTP_HEADERS_SENT] Cannot set headers after they are sent back to the client

Help me with this.

Your fast response in appreciated.

@mohammadNaimi this is the entire middleware what else do you want. The error is in this code piece — Saswat, Oct 31 '21 at 10:08
Maybe the error is because of asynchronous hell? I used three of them and also many requests, response. Can it be shortened, simplified and improved? — Saswat, Oct 31 '21 at 10:10

score 0 · Answer 1 · answered Oct 31 '21 at 10:15

If req.cookies is set and the verify() call is successful, next() will be executed twice: once after the asynchronous invocation of verify() and once more at the end of the .then function.

On the other hand, if verify() fails, the res.redirect call in the .catch function sets a header after the first execution of next().

Both can lead to the observed error. A middleware should either

optionally set headers and then call next() (once!) or
optionally set headers and then send a response (e.g., via res.send), but not call next().

Thanks this helped me to catch up the problem @Heiko TheiBen — Saswat, Nov 02 '21 at 02:18

score 0 · Answer 2 · answered Oct 31 '21 at 13:05

You have not used async and await for verify function, you can modify you app.use to the following code

app.use(async function addReqUser(req, res, next) {
    if (req.cookies) {
        let token = req.cookies['session-token'];
        let user;
        async function verify() {
            //google auth function
            return client.verifyIdToken({
                idToken: token,
                audience: CLIENT_ID,
            });

        }
        const response = await verify()
        const payload = response.getPayload()

        if (payload.email) {
            user.name = payload.name;
            user.email = payload.email;
            user.picture = payload.picture;
         
            const userDoc = await User.find({ email: req.user.email }).select("_id").exec();
         
            req.user = userDoc;
            req.user.id = userDoc[0]._id;
            res.locals.user = req.user //populate the user with an id
            return next()

        } else {
            return res.redirect('/')
        }
    }
    next()
})

While using the .then on verify, the code is not waiting for verify() Promise to complete & next() after the if block is executed first

this code is somehow blocking and the browser just keeps on loading — Saswat, Nov 01 '21 at 04:35
You'll need to remove the else part and check if the payload contains error & then redirect to '/' else return next @Saswat — Rahul Pal, Nov 01 '21 at 06:23

score 0 · Answer 3 · answered Nov 02 '21 at 02:21

The req.cookies was being called and the next() was being executed twice. After some suggestions and coding here's the solution:

app.use(function addReqUser(req, res, next) {
    
    if (Object.hasOwnProperty.bind(req.cookies)('session-token')) { //has a session-token
        let user = {};
        async function verify() {
            let token = req.cookies['session-token'];
            //google auth function
            const ticket = await client.verifyIdToken({
                idToken: token,
                audience: CLIENT_ID,
            });
            const payload = ticket.getPayload()

            if (payload) {
            user.name = payload.name;
            user.email = payload.email;
            user.picture = payload.picture;
            
            req.user = user;

            const userDoc = await User.find({ email: req.user.email }).select("_id").exec();
       
            req.user.id = userDoc[0]._id;
            res.locals.user = req.user //populate the user with an id

        } 

        }
        verify()
        .then(()=>{
          next();
      })
      .catch(err=>{
        console.log(err)
          res.redirect('/')
      })
    } else {
        next();
    }
})

Error: Cannot set headers after they are sent back to the client in express middleware

3 Answers3