You may also like...

34 Responses

  1. parsa says:

    hi clue its a very very helpful article thank you , but i have a huge problem with that and that is i can create a fake jwt token in my browser before login and can access to the privateroute how can i deal with that ?

    • Clue Mediator says:

      Hi, Parsa,
      Thank you for referring the article.

      You can follow the Part-2 article. This is all about the backend API including JWT token in Node.js.

      If you don’t know about the Node.js then you can directly clone the repository and start the project. Postman collection is also there to test the API.

      If you are still facing the issue then let us know we will help you to setup Part 2 and in future we are planning to host backend API on server so any one can access it for demo.

      Let us know if you still have any queries.

      Follow us on Facebook & Twitter to get latest update.
      – Clue Mediator

  2. parsa says:

    thanks for replying ,
    yeah i’ve done the node js and my server is responsing for veryfing token but in react i got confused in the privateroute part i use the getToken() method and this method just returning the sessionStorage token so i can simply change the sessionStorage token without login and type my component path in the url and get into it so is there any way to send the verify request to the server when routing ?

    • Clue Mediator says:

      Hi Parsa,
      You are right. Anyone can update the value of the sessionStorage and try to access the private routes. But in real project your private route is also verified with the next API request. Because after login your all API contains the token so it will be verify and if that is invalid or unauthorized then you can make force logout via middleware in ReactJS.

      In alternative way, you can use secure and httponly cookie to manage the token. We will write separate article on it.

      You can subscribe us for weekly email update of our news & articles.

      – Clue Mediator

  3. Iweb says:

    Hello,

    thank you very much for the effort provided and quite well detailed.

    just a question, I try to show / hide the “login” link if the user is already logged in, can you tell me how to do it please?

    • Clue Mediator says:

      Hello Iweb,
      We are glad you liked it.

      You can use the access token via localStorage to show/hide login link.

      Let us know if you still have any queries.

      Like us on Facebook & Share it.
      Happy Coding..!!!

  4. Ade Supriyadi says:

    Is it good for security, save token to session storage?
    we can see the token via inspect

    • Clue Mediator says:

      Hello Ade,
      You are right anyone can see the token via inspect. But make sure you are not going to store any sensitive details inside the token. In the alternative way, you can use the secure and httponly cookie to store the token.

      In the upcoming days, we will write the separate article on it.

      Subscribe us for weekly update or like and follow us for regular update.
      Happy Coding..!!!

  5. Ade Supriyadi says:

    Ok, I’ll wait that tutorial about secure and httponly cookie.

    I was subscribe.

    thank’s

  6. Diaa Saber says:

    Hello,
    Thank you very much for your effort. It really helped a lot.
    I have a question. So after generating the JWT token in the backend side and sending it in the response to the client side, how can I save this token and use it to send it in future API calls ?
    Is there an article you can suggest about this topic?

    • Clue Mediator says:

      Hello Diaa,
      Thank you for reading the article.

      If you check this article then you can see we have used the localStorage to manage the token and send it in the subsequent request.

      Moreover, If you want to manage the token via cookies and also want CSRF protection then check out the below article where you will find the more secure way to implement authentication including refresh token and CSRF protection.

      Login App with CSRF protection

      Hope you like it. Let us know if you have any further queries.

      Subscribe us for weekly updates or like and follow us for regular updates.

      Happy Coding..!!

  7. lisa says:

    Hİ! Thank you for this. I have a problem, when I clone and run the project and enter a made up email and password, I get
    Unhandled Rejection (TypeError): undefined is not an object (evaluating ‘error.response.status’)
    (anonymous function)
    src/Login.js:21

    can you help with that?
    Thanks a lot

  8. lisa says:

    please ignore my previous comment I have solved it

  9. Luka says:

    Hello, the problem is after I write PublicRoute and PrivateRoute in App.js. login page displays an error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

    Could you tell me why this would happen?

  10. Susanne says:

    This is really interesting, You are a very skilled blogger.
    I have joined your feed and look forward to seeking more of your excellent post.

  11. Rodman says:

    Hey ! Thanks for the great tutorial but i have a problem at login.js:21
    Unhandled Rejection (TypeError): Cannot read property ‘status’ of undefined. I cant fix it.

    • Clue Mediator says:

      Hi Rodman,
      Please check your backend API. There should be some error. I guess your error is coming because of the following line.
      if (error.response.status === 401) setError(error.response.data.message);

      Please check the error object. If required then add one more condition to avoid an exception. Your updated code should be…
      if (error.response && error.response.status === 401) setError(error.response.data.message);

      Hope this will help you!

      Let us know if you have any further queries.

  12. Marc says:

    geToken is not secure in my opinion. Can we compare the getToken to backend db every useeffect mounting of protected route?

  13. ParkhiJ says:

    after all this setup, when I tried to login it is giving me an error: “secretOrPrivateKey must have a value” how to solve this?

  14. Faardeen says:

    Hello, how would I connect to a REST API to prevent CORS that is using a proxy and how to configure it. Thank you.

  15. utto t lama says:

    i am getting 400 bad request
    help mee plzzzzz

  16. Manikandan says:

    return (
    15 |
    16 | {context => {
    > 17 | invariant(context, “You should not use outside a “);
    | ^ 18 |
    19 | const { history, staticContext } = context;
    20 | //How to solve this type of error

  17. Fabio says:

    where do i find the api?
    /users/signin

Leave a Reply

Your email address will not be published. Required fields are marked *