68 thoughts to “React Redux Login, Logout, Registration example with Hooks”

  1. Please update this tutorial bacause react-router-dom modified some functions. Redirect => useNavigate and Switch => Routes

  2. I love your tutorials!! I have used a couple to practice my React and server building skills!

    One question: for the context, I’m getting errors. Do you happen to have a tutorial that you can refer me to that uses createContext or something instead?

    Thank you so much!!
    Yvette

  3. Hello everyone,
    I am getting a blank screen at port 8081
    This is what I am getting from the client when I run it:
    “`
    Compiled successfully!

    You can now view fe-cwc in the browser.

    Local: http://localhost:8081
    On Your Network: http://10.0.0.9:8081

    Note that the development build is not optimized.
    To create a production build, use npm run build.

    asset static/js/bundle.js 3 MiB [emitted] (name: main) 1 related asset
    asset index.html 1.67 KiB [emitted]
    asset asset-manifest.json 190 bytes [emitted]
    cached modules 2.72 MiB (javascript) 28.2 KiB (runtime) [cached] 340 modules
    webpack 5.65.0 compiled successfully in 648 ms
    “`
    and this from running my server ( I run the server first and then add the client):
    “`
    yarn run v1.22.17
    $ nodemon app/server.js
    [nodemon] 2.0.15
    [nodemon] to restart at any time, enter `rs`
    [nodemon] watching path(s): *.*
    [nodemon] watching extensions: js,mjs,json
    [nodemon] starting `node app/server.js server.js`
    Server is running on port 8080.
    Executing (default): DROP TABLE IF EXISTS “user_roles” CASCADE;
    Executing (default): DROP TABLE IF EXISTS “roles” CASCADE;
    Executing (default): DROP TABLE IF EXISTS “users” CASCADE;
    Executing (default): DROP TABLE IF EXISTS “users” CASCADE;
    …. truncated. Here goes all the sql part
    “`
    The backend works great through postman.
    Any advise on what I should be looking at to fix this?
    Thank you

  4. Hi everyone! In this tutorial i’m using django as backend.
    So, in my src/services/auth-header.js
    // return { Authorization: “Bearer ” + user.accessToken }; how can i change line if it’s django backend.
    Thank you for your help.

    1. Edit: i am using React with Node JS and MongoDB, everything is working perfectly except having trouble understanding how to add roles. Thanks

  5. Hey man!

    Great Tutorial, helps me a lot. 🙂

    I used this for my front-end, for my backend I used Node.js JWT example (of course also from here :P).

    After “combining” them with the tutorial “Integrate React with Node.js” i stumbled over a 404 Error when refreshing.

    In my server. js I set up

    const path = __dirname + “/app/views/”;

    app.use(express.static(path));

    app.get(‘/’, function (req, res) {
    res.sendFile(path + “index.html”);
    });

    as mentioned in the Tutorial, but in the index.js where we set HashRouter (like in the Tutorial) I can not do this because we use Redux here with

    What can I do to avoid getting the 404 Error on refresh or new loading after production build when using Redux?

    Thanks a lot in advance! 🙂

  6. You managed to write the tutorial upon the top and also defined out the whole thing easily to read. Will probably be back to read more React tutorials.
    Thanks!

  7. Hello

    I have an issue, when I got login successfully, app logout automatically as currentuser is null.

    what is the reason for this?

    Regards

  8. Hi

    Nice article. would you plz explain this line?

    setShowModeratorBoard(currentUser.roles.includes("ROLE_MODERATOR"));
    

    I got this error on the above line “Cannot read property ‘includes’ of undefined”

    thanks

  9. Hi, Thank you for cool! tutorial, I try to integrate this frontend with backend (Node.js + MongoDB: User Authentication & Authorization with JWT).
    I did yarn build and copy all files from React build folder to app/views folder.
    That’s OK.
    But I need your suggestion to solve problem for “404 Not found on Refresh”.
    Thanks in advance for your support.

  10. Awesome! It really helped a lot. Could you please tell me how to write this tutorial using react-cookie?

    1. Hi, I will write the tutorial when having time 🙂 For using cookies, we need to modify place to store the JWT and attach it to HTTP requests.

      1. Very Nice tutorial and good to understand, Could you upload or tell how to use cookies instead of local storage.

  11. Error: could not find react-redux context value; please ensure the component is wrapped in a
    â–¼ 29 stack frames were expanded.
    useReduxContext

    while running the above code finding this issue plz support me..

  12. This is an excellent resource. The pieces were well-connected and simplified.

    However, is it safe to use localstorage for authentication logic?

    1. Hi, this can be vulnerable to cross-site scripting (XSS) attacks. You can use Cookies with the HttpOnly cookie flag which are not accessible through JavaScript, and are immune to XSS.

      1. Could you explain how to use it ?
        Would it change much of the code logic?

        Beginner here. Btw, thanks for the amazing tutorial!

  13. Hi @bezkoder
    Great tutorial! I have a small problem though. I’ve noticed that you didn’t use store.js anywhere in the tutorial. I tried to pass it to the provider in the root index.js but I get an error telling me that I exported something wrong. Can you help me, how to use the store properly?

    1. import React from “react”;
      import ReactDOM from “react-dom”;
      import App from “./App”;
      import { Provider } from “react-redux”;
      import store from “./store”;

      ReactDOM.render(

      ,
      document.getElementById(“root”)
      );

    2. I noticed this same thing too. Hopefully you were able to figure it out already but, for anyone else who is wondering, here is what I added to `index.js` to connect the store. Hope it helps!

      `

      import { Provider } from ‘react-redux’;

      import store from ‘./store’;

      ReactDOM.render(

      ,
      document.getElementById(‘root’)
      );
      `

  14. HI @bezkoder

    I am getting Request failed with status code 404. Could you please suggest me how to solve this isse?

  15. Great tutorial, thank you so much the time you put into this.
    Just one thing, you didn’t include the Provider wrapper for the redux store. I think it’s pretty clear where to put it when you already have done it once, but I might be confusing for beginners.
    Cheers

  16. Great post! Very clear about how all those stack are linked to each other! very well structured! thank you

  17. Hello Great Tutorial!
    What is about a solution with JWT refresh token?
    Will this be more secure?
    Regards

  18. Great post. I was checking constantly this blog and I am impressed with your JWT Authentication tutorial.

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