Serverless-stack-com: Comments: Handle Routes with React Router

[jayair]

Link to chapter - http://serverless-stack.com/chapters/handle-routes-with-react-router.html

[nerdguru]

Hi guys,

I'm new to React, so I may be missing something, gut when I get to this step (after loading the React Chrome extensions) I get the following:

I wasn't sure as a React noob if I'm missing a package somewhere but I literally copied/pasted your App.js code and it's barking about the line in that first warning supplied by the Chrome extension.

The closest I could find related to this was here:

https://github.com/ReactTraining/react-router/issues/4477

But that syntax is very different, so I wasn't sure exactly how relevant it was

What did I do wrong?

[jayair]

Hey @nerdguru, I'm not sure if you meant index.js because we don't touch the App.js in this chapter just yet.

One other thing to check is if your package.json has the same packages as the one in the repo - https://github.com/AnomalyInnovations/serverless-stack-demo-client/blob/handle-routes-with-react-router/package.json

[nerdguru]

Ugh, remember that time when I edited the wrong file and then outed myself for doing so?

I feel like an idiot, but thanks for correcting me 8).

[lrobledo]

When I add this line: import { BrowserRouter as Router } from 'react-router-dom';
my browser gives me this error:

I'm assuming I didn't install react-dom correctly. Could it be something else?

[jomazu]

Use yarn add react-router-dom --save instead of npm install react-router-dom --save. Use yarn instead of npm moving forward!

[ghost]

I started getting errors (npm start wouldn't run) at this step.

Tail end of the log:

20 error file sh
21 error code ELIFECYCLE
22 error errno ENOENT
23 error syscall spawn
24 error [email protected] start: `react-scripts start`
24 error spawn ENOENT
25 error Failed at the [email protected] start script.
25 error This is probably not a problem with npm. There is likely additional logging output above.

The fix was eventually

npm install eslint --save-dev

I do not guarantee that this is a missing step in the current tutorial; I don't know enough yet to be certain. Just dropping this here in case anyone else hits the same problem.

[jayair]

@ffmike That is a bit strange. Glad you figured it out. Thanks for leaving a note.

[x11joe]

What is the function registerServiceWorker(); for? I tried looking up some info on this, but not sure. The comments in the file appear to say it has something to do with caching files? Where did you learn about this technique? Can you point me to the documentation so I can understand better. Thank you! I did find this though (https://github.com/facebookincubator/create-react-app/issues/2398), appears to be a huge debate about it's use regarding caching of files?

[jayair]

@x11joe That comes by default with that version of Create React App. So we didn't add it as a part of the tutorial. You can disable it if you'd like.

[walshe]

I have a serverless oauth method (below) that gets called by an external provider. In there I do the oauth dance and create a JWT token that I want to send securely to my react app.

Ideally I want to pass it in a redirect header, but not sure if i can receive that easy in my react route component . Any one know how ?

export const oauth = async (event, context, callback) => {

  console.log("params got from BC ->" +JSON.stringify(event.queryStringParameters))

  var response = await axios.post('https://login.bigcommerce.com/oauth2/token',{
    "client_id":process.env.BIG_COMMERCE_CLIENT_ID,
    "client_secret":process.env.BIG_COMMERCE_CLIENT_SECRET,
    "code":event.queryStringParameters.code,
    "scope":event.queryStringParameters.scope,
    "grant_type":"authorization_code",
    "redirect_uri":process.env.BIG_COMMERCE_CALLBACK,
    "context":event.queryStringParameters.context

  }).catch(function (error) {
      console.log('got error ' +error)
      console.log('error: ' +error);
  });


  console.log('got reply ' +JSON.stringify(response.data))


  const token = jwt.sign({ user: response.data.user }, process.env.JWT_SECRET, { expiresIn: JWT_EXPIRATION_TIME });

  console.log(`JWT issued: ${token}`);

  callback(null, {
      statusCode: 302,
      headers: {
          Location: 'https://1234.ngrok.io/bc-login-success?token=${token}',
          Authorization : token
      },
  }) ;

}

In react app:

route:

<Route path="/bc-login-success" exact component={BCLoginSuccess} props={childProps} />

component:

export default class BCLoginSuccess extends Component {
  constructor(props) {
    super(props);

    console.log('props:' +JSON.stringify(props.match))

    this.state = {
      isLoading: true,
      ...
    };
  }

In thiso component I want to use receipt of the token as the basis for setting this.props.userHasAuthenticated(true);

I then use the jwt in the header of all api gateways which will have a custom jwt authroizer to protect from unauthorized access

[jayair]

@walshe You can check the headers you are retuning in your API call here - https://github.com/AnomalyInnovations/serverless-stack-demo-client/blob/master/src/libs/awsLib.js#L42 as results.headers.

[walshe]

@jayair its not an api call I am making. Its a redirect from my api TO my app. (external provider -> oauth api gateway -> react app). I am redirecting to react app with header and wondering how i can see those headers in the react route component

[jayair]

@walshe You cannot get the headers of the current webpage through client side JS. So you would probably need to pass it through the query string.

[walshe]

yeah thats the conclusion I came to also. Have passed a queryString over https. Assume thats good enough

[jayair]

This issue was moved to https://discourse.serverless-stack.com/t/comments-handle-routes-with-react-router/116