28 thoughts to “React Hooks: JWT Authentication (without Redux) example”

  1. Excellent tutorial! Found only one mistake – for the react version on GitHub, in auth-header.js, the wrong line is commented out. Kept getting “No token provided!” until I commented out the Spring Boot back-end code and uncommented the Node.js Express back-end code. Well done! Thanks for sharing!

  2. can some one please let me know how to register a user with admin and other roles. the default registration creates just a User

      1. Hi, you should write Component with form that contains roles/role array for sending HTTP signup requests.

  3. Dude why are you putting it in localstorage? Isn’t that horrible practice?
    Why not make a tutorial where you store it inside memory and update it with http-only or put it in the database???

    1. Hi, please read more about Token-based Authentication and Session-based Authentication along with their pros/cons.

  4. This tutorial, along with node-js-jwt-authentication, was my first introduction to setting up authentication in a react app and rest-api endpoints. Everything works great except for one thing – when the token expires, it does not automatically log the user out. The user stays logged in but is unable to do anything (unauthorized). The NavBar still shows the user as being logged in. Of course all you need to do is log out and log back in for everything to work again, but your tutorial should check if the token has expired and log the user out if it has.

      1. In the mean time, how about a hint? Would like to know how you would go about implementing this. Doesn’t look like it would be too difficult, but I don’t really know where to begin. I’m thinking I would need another function in auth.service.js that checks to see if the token is current or expired. Maybe something like this:

        https://stackoverflow.com/questions/59713592/why-am-i-unable-to-see-the-response-of-this-axios-post-request

        Would appreciate any insight you could find the time to provide. Your tutorial would be 100% complete if your code would check for this.

        Thanks.

      2. Hi Bezkoder,
        I’m also facing the same problem and not been able to resolve it yet. It seems so simple, but I have yet to find a solution so if you could point us in the right direction that would be great.
        Thanks,
        Reinier

      3. Hey. Thanks a lot for this tutorial. It is really helpful. Any update regarding the question asked by Rayner ? Im in the same situation and not sure how to go about it ? Thank you!

  5. when I run the command
    npx create-react-app react-hooks-jwt-authentication it throws an 404 error that react-hooks-jwt-authentication doesn’t exist

  6. I would like to know that after I am logged in, how can I obtain the token to be able to consume the other api services such as registering departments, listing, etc …?

  7. Hola amigos, buenas noches quisiera saber como puedo agregar más paginas a un rol teniendo en cuenta los roles.

    Gracias…

  8. I used the node-js-jwt-auth and react-hooks-jwt-auth. All was great. Only one change I had to do is add ‘x-access-token’ to header in src/services/auth-header.js

    return { Authorization: ‘Bearer ‘ + user.accessToken, ‘x-access-token’: user.accessToken };

    As the server (middleware/authJwt.js) was looks for ‘x-access-token’

    Thank you for the nice tutorial

  9. Hi, is accessToken specific to axios? I am using rails api backend so I want to know if (response.data.accessToken) in the http request will be something else.

  10. Hi Bezkoder, I just finished implementing the backend tutorial with springboot/mysql and works perfect then i did front end with this one as you had suggested in postman i acn register/sign up but on front end when i sign up i get Network error… what could be the problem?

    1. Hi, it is the connection between backend and frontend. You can check everything related to HTTP requests such as: axios instance, port… Then make sure that cors is configured correctly.

  11. I’m currently having an issue with CORS. I have set the WebSecurityConfig as you suggested in the back end spring java tutorial and made sure all of the names are correct. The back end works on postman but its when i try to access it from react i have issues. What could be a potential solution to this. I also experimented with adding a proxy in my package.json file but I’m not sure why this was not working. Also as a separate question, what is the significance of changing to port 8081 as opposed to using port 3000 as default for the front end?

    1. Hi, the backend server is configured to work with frontend at port 8081. You will get a CORS issue if you run this Client on port 3000.

  12. Okay sure. I had tried with the configuration from your tutorial but am still running into the cors issue with the error message as follows:

    Access to XMLHttpRequest at ‘http://localhost:8080/api/auth/signup’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

    For this I have ensured both the ports are running correctly and were restarted before trying so that the front end in on 8081 and the back end is on 8080. I have also checked to ensure that there are no typos with the calls and both are still functional with postman as per your spring boot java jwt back end tutorial. I have unfortunately run out of things to try and so would love any help you could provide.

Leave a Reply

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