In what way can I utilize the request object within a promise that is nested?

Question

In what way can I utilize the request object within a promise that is nested?

I am currently working on a Nuxt server side rendered application using the express framework for authentication with the openid-client package. My goal is to store the retrieved token in the express session, but I am facing an issue where the request model (req) is always undefined in the callback promise. I want to achieve this by assigning req.session.token = tokenSet.access_token. As a beginner in JavaScript, I believe I might be overlooking something obvious.

I have experimented with different approaches to pass variables into a JavaScript promise, but they all required defining the Promise manually, which is not applicable in my situation. I also attempted to wait for the promise and use it outside of the callback promise without success.

router.get('/api/oidc-callback', (req, res, params) => {
  Issuer.discover('http://localhost:5000') // => Promise
    .then(function(identityIssuer) {
      const client = new identityIssuer.Client({
      ...
      })
      // REQUEST DEFINED HERE
      console.log(req)
      client
        .callback('http://localhost:3000/api/oidc-callback', req.query, {
          code_verifier
        })
        // => Promise
        .then(function(tokenSet) {
          // REQUEST BECOMES UNDEFINED HERE
          console.log(req)
          req.session.token = tokenSet.access_token
        }, req)
        .catch(error => {
          console.log(error)
        })
//I also tried using it outside
      res.redirect('/oidc-callback')
    })
})

Thank you in advance for any assistance!

javascript express promise callback

Answer 1

Answer №1

Within your code, you currently have a scenario where you have two nested asynchronous operations and attempt to execute something at the end of the first .then() handler:

Issuer.discover().then(function() {
    client.callback().then(function() {
       // ...
    });
    res.redirect('/oidc-callback');
});

This leads to the issue where res.redirect() is called before client.callback() completes because there is no mechanism in place to ensure that it waits for the completion of client.callback(). This results in the response being sent and a redirect being triggered before modifying the session, which is not the desired behavior. To resolve this, you can take one of the following approaches:

1) Move the res.redirect() inside the inner .then() block as shown below:

Issuer.discover().then(function() {
    client.callback().then(function() {
       // ...
       res.redirect('/oidc-callback');
    });
});

2) Introduce a return before client.callback() to chain the inner promise to the outer one. This way, the outer promise will not resolve until the inner one is completed, allowing you to add another .then() handler for the res.redirect():

Issuer.discover().then(function() {
    return client.callback().then(function() {
       // ...
    });

}).then(function() { // executed after both asynchronous operations are finished res.redirect('/oidc-callback'); });

Option #2 is recommended for simpler error handling, as all error handling can be consolidated in one place at the top level. Combining all these changes, your code can be revised as follows:

router.get('/api/oidc-callback', (req, res, params) => {
    Issuer.discover('http://localhost:5000').then(function(identityIssuer) {
        const client = new identityIssuer.Client({
            ...
        })
        return client.callback('http://localhost:3000/api/oidc-callback', req.query, {
            code_verifier
        }).then(function(tokenSet) {
            console.log(req);
            req.session.token = tokenSet.access_token
        }, req);
    }).then(() => {
        res.redirect('/oidc-callback');
    }).catch(err => {
        console.log(err);
        res.sendStatus(500);
    });
});

Additionally, proper error handling has been included at the end to ensure that no response is sent until both asynchronous operations are complete. If either operation encounters an error, a suitable error response will be sent.

Answer 2

Within your code, you currently have a scenario where you have two nested asynchronous operations and attempt to execute something at the end of the first .then() handler:

Issuer.discover().then(function() {
    client.callback().then(function() {
       // ...
    });
    res.redirect('/oidc-callback');
});

This leads to the issue where res.redirect() is called before client.callback() completes because there is no mechanism in place to ensure that it waits for the completion of client.callback(). This results in the response being sent and a redirect being triggered before modifying the session, which is not the desired behavior. To resolve this, you can take one of the following approaches:

1) Move the res.redirect() inside the inner .then() block as shown below:

Issuer.discover().then(function() {
    client.callback().then(function() {
       // ...
       res.redirect('/oidc-callback');
    });
});

2) Introduce a return before client.callback() to chain the inner promise to the outer one. This way, the outer promise will not resolve until the inner one is completed, allowing you to add another .then() handler for the res.redirect():

Issuer.discover().then(function() {
    return client.callback().then(function() {
       // ...
    });

}).then(function() { // executed after both asynchronous operations are finished res.redirect('/oidc-callback'); });

Option #2 is recommended for simpler error handling, as all error handling can be consolidated in one place at the top level. Combining all these changes, your code can be revised as follows:

router.get('/api/oidc-callback', (req, res, params) => {
    Issuer.discover('http://localhost:5000').then(function(identityIssuer) {
        const client = new identityIssuer.Client({
            ...
        })
        return client.callback('http://localhost:3000/api/oidc-callback', req.query, {
            code_verifier
        }).then(function(tokenSet) {
            console.log(req);
            req.session.token = tokenSet.access_token
        }, req);
    }).then(() => {
        res.redirect('/oidc-callback');
    }).catch(err => {
        console.log(err);
        res.sendStatus(500);
    });
});

Additionally, proper error handling has been included at the end to ensure that no response is sent until both asynchronous operations are complete. If either operation encounters an error, a suitable error response will be sent.

Answer 3

Answer №2

One possible explanation for req being undefined is that the promise was resolved after the middleware execution (res, req, next) => {...}. To address this issue, consider returning the top-level promise in the middleware like this: (res, req, next) => { return Issuer.discover(...) }, and make sure to add a return statement before client.callback(...).

router.get('/api/oidc-callback', (req, res, params) => {
  return Issuer.discover('http://localhost:5000') // <-- added return here
    .then(function(identityIssuer) {
      const client = new identityIssuer.Client({
      ...
      })
      // DEFINED HERE
      console.log(req)
      return client  // <-- added return here
        .callback('http://localhost:3000/api/oidc-callback', req.query, {
          code_verifier
        })
        // => Promise
        .then(function(tokenSet) {
          // UNDEFINED HERE
          console.log(req)
          req.session.token = tokenSet.access_token
          res.redirect('/oidc-callback')
        }) // removed , req here, it is not needed
        .catch(error => {
          console.log(error)
        })
    })
})

Adding the return statement informs express that you are running an async function, ensuring that express waits for the middleware to resolve before moving on to the next middleware.

Answer 4

One possible explanation for req being undefined is that the promise was resolved after the middleware execution (res, req, next) => {...}. To address this issue, consider returning the top-level promise in the middleware like this: (res, req, next) => { return Issuer.discover(...) }, and make sure to add a return statement before client.callback(...).

router.get('/api/oidc-callback', (req, res, params) => {
  return Issuer.discover('http://localhost:5000') // <-- added return here
    .then(function(identityIssuer) {
      const client = new identityIssuer.Client({
      ...
      })
      // DEFINED HERE
      console.log(req)
      return client  // <-- added return here
        .callback('http://localhost:3000/api/oidc-callback', req.query, {
          code_verifier
        })
        // => Promise
        .then(function(tokenSet) {
          // UNDEFINED HERE
          console.log(req)
          req.session.token = tokenSet.access_token
          res.redirect('/oidc-callback')
        }) // removed , req here, it is not needed
        .catch(error => {
          console.log(error)
        })
    })
})

Adding the return statement informs express that you are running an async function, ensuring that express waits for the middleware to resolve before moving on to the next middleware.

In what way can I utilize the request object within a promise that is nested?

Answer №1

Answer №2

Similar questions

I'm experimenting with incorporating images into a card component using the map function in JavaScript. All aspects of the card are functioning properly except for the image

I'm seeking clarification on the composition of Objects in Node.js

Unable to display Three.JS OBJ Model

Sorting in MongoDB can be done easily using the $sort operator,

Tips on creating adaptable images for mobile viewing

What is the best way to convert a recordset to an array using React?

javascript/AngularJS - make elements gradually disappear

Expressjs makes it easy to upload audio files to your website

Using a jquery function within a Laravel view

Developing an HTML table with the power of JavaScript and JSON

Steps for incorporating monaco-editor into a website without utilizing nodejs and electron

Guide on incorporating file uploads in an Angular 6 project

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

Is there a way to prevent the entire row from being selected when a radio button is clicked in an md-data

When using SuperTest, the Authorization header value may unexpectedly return undefined

Receiving a 405 error when making an API call - could the routing be misconfigured? (Using NextJS and Typescript)

Hey there, I'm looking to use different CSS fonts on Windows and Mac for the same page on a web application. Can someone please guide me on how to accomplish this?

How do I go about adding a specific class to every row within a Vue.js table?

I'm encountering an issue with Regex.test

Deactivate a button when clicked on a card that has been mapped