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

  1. I have followed this tutorial and the one for the backend (Nodejs/Express/MongoDB) and got them connected and working correctly. However I am not wanting to fill in the User/Admin Content section in particular I want to add a dashboard page where it says ‘Admin Content’. Any suggestions on how I would go about this?

    Many thanks for these tutorials btw

  2. Thanks for wonderful tutorial. How to achieve this functionality ( user will receive confirmation code in email on sign up submit ). Do I have to make lot of changes?

  3. Hey There. I discovered your tutorial. That is a very well written article. Thanks for the post. I will definitely comeback.

  4. Nice post. I was checking continuously your React tutorials.
    I’m impressed! Extremely helpful.

    Thanks and best of luck.

  5. can you please explain the role of the checkbutton. i’m one that likes to understand everything and i’m confused how this validates the form.

    much love and respect for this tutorial. seen a lot of your stuff recently and digging it!

  6. Hello, I did everything as you show but I am getting an error:

    Access to XMLHttpRequest at ‘http://localhost:8080/api/auth/login’ from origin ‘http://localhost:3000’ 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.

    I added .env 3000 port. Please help

    1. Hi, you need to run your React Client on port 8081 ๐Ÿ™‚ It is because we configure server CORS for that port.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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

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

    Gracias…

  13. 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 …?

  14. 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

  15. 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!

  16. 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.

  17. 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 can use Http Client tool to make Http Post request with roles in payload.

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

  18. 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!

Comments are closed to reduce spam. If you have any question, please send me an email.