CODEWITHSUNDEEP
node.jsreactjsexpresspassport.js
Tyler Pope
Tyler Pope

Reputation: 285

Return view and send data to react after passport.js oauth

First let me say that sorry if this is a simple question, I'm new to react and express and couldn't find the answer on SO.

I'm trying to pass data to a react object as well as render a view based off of a passport.js return route.

I have the object i need to pass I just can't figure out how to pass it.

First the user hits the auth route

router.get('/steam',
    passport.authenticate('steam'),
    (req, res) => {
    //Not used
});

Then after they login through steam they're returned to this route:

router.get('/steam/return',
    passport.authenticate('steam', { failureRedirect: '/' }),
    (req, res) => {
        res.redirect('/dashboard');
});

From here I'm passing them to the /dashboard route where im taking the user object and creating another call to grab their library and then sending the data to the view:

router.get('/', (req, res, next) => {
    var OwnedGamesReqUri = 'http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=' + process.env.STEAM_API + '&steamid=' + req.user.steamid + '&format=json&include_appinfo=1';
    request(OwnedGamesReqUri, (error, response, body) => {
      if (!error && response.statusCode == 200) {
        var resObj = JSON.parse(body);
        //name, playtime_forever, playtime_2weeks, img_icon_url, img_logo_url
        res.render('dashboard', { user: req.user, games: resObj.response.games});
      }
    });
});

I'm able to grab all of the data I need in the dashboard view via handlebars but the problem I'm facing is what I can do to pass the ownedgames data to a react object in another JS file. I have a react component set up in another file that is loaded to the dashboard via a bundle file. I'm assuming this needs to go to the server but I'm just not exactly sure how to achieve this.

Upvotes: 3

Views: 1397

Answers (2)

Tharaka Wijebandara
Tharaka Wijebandara

Reputation: 8065

Your question isn't about reactjs or passportjs. It's basically how we can pass a variable in server-side javascript to client-side javascript. So you can use that variable in whatever the framework you use in the client-side.

The simplest way to achieve this is rendering your value as variable declaration within an inline script tag in your template. So your client js will have a global variable with that value, which can access from anywhere in your client side scripts.

As an example, if have a variable with string value as follows

var test = 'abc';

You can render it in your template as a variable declaration within a script tag.

res.render('template', test)

template file:

<script>
    var test = '{{test}}';
</script>

Now this template will generate an HTML page as follows.

<script>
    var test = 'abc';
</script>

So test variable will be a global client side javascript variable with value 'abc', which can access from any other javascript code on the same page.

Even though this is simple as above for a string variable, things get complicated when you are trying to send an object. Because object variables render in the template as [Object object]. To avoid this, you need to send stringify version of your object before sending it the handlebar template.

var data = JSON.stringify({ user: req.user, games: resObj.response.games});
res.render('dashboard', data);

Then your dashboard template needs to have script tag with the variable declaration in addition to its original content.

//...
<script>
    var data = {{data}};
</script>
//...

Now, data will be a global variable in your client side and you can use it in your reactjs code to access user and games.

Upvotes: 1

hazardous
hazardous

Reputation: 10837

There are several ways to do this, depending on how your React component manages its state.

  1. Reactive state (RxJS, mobx, nx-observe): The easiest to deal with, your component as well as the non-js code can both access these stores and catch up on the updates together. This provides a very loose coupling between the data provider and consumer.
  2. Component with a flux pattern: If your component is using Redux, Reflux or any other flux based library to manage state, you can export corresponding actions/functions from your flux code which any JavaScript code can call to update your component's state.
  3. State maintained within the component: Somewhat messy. In this case your component can export a callback which your script can call to send it new data.

Upvotes: 0

Related Questions