Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Comments: Handle Routes with React Router #33

Closed
jayair opened this issue Apr 10, 2017 · 15 comments

Comments

Projects
None yet
7 participants
@jayair
Copy link
Member

commented Apr 10, 2017

@jayair jayair added the Discussion label Apr 10, 2017

@nerdguru

This comment has been minimized.

Copy link

commented Apr 12, 2017

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:

image

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:

ReactTraining/react-router#4477

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

What did I do wrong?

@jayair

This comment has been minimized.

Copy link
Member Author

commented Apr 12, 2017

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

This comment has been minimized.

Copy link

commented Apr 13, 2017

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

This comment has been minimized.

Copy link

commented Apr 13, 2017

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

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

@jomazu

This comment has been minimized.

Copy link

commented Jul 6, 2017

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

@ffmike

This comment has been minimized.

Copy link
Contributor

commented Jul 11, 2017

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 notes-app-client@0.1.0 start: `react-scripts start`
24 error spawn ENOENT
25 error Failed at the notes-app-client@0.1.0 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

This comment has been minimized.

Copy link
Member Author

commented Jul 11, 2017

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

@x11joe

This comment has been minimized.

Copy link

commented Nov 11, 2017

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 (facebook/create-react-app#2398), appears to be a huge debate about it's use regarding caching of files?

@jayair

This comment has been minimized.

Copy link
Member Author

commented Nov 11, 2017

@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

This comment has been minimized.

Copy link

commented Feb 6, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Feb 9, 2018

@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

This comment has been minimized.

Copy link

commented Feb 10, 2018

@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

This comment has been minimized.

Copy link
Member Author

commented Feb 12, 2018

@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

This comment has been minimized.

Copy link

commented Feb 12, 2018

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

@jayair

This comment has been minimized.

Copy link
Member Author

commented May 9, 2018

@jayair jayair closed this May 9, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.