0

I'm writing a mern application that uses passport-local as the authentication strategy on the backend. Essentially, when a user logs in on the frontend, the Login component takes the data submitted, (username, password) and a post request is made by axios to the backend, which runs this code.

export const loginUser: RequestHandler = async (req, res, next) => {
  passport.authenticate("local", (err, user, info) => {
    if (err) throw err;
    if (!user) return res.redirect("/login");
    req.login(user, (err) => {
      if (err) throw err;
      const user: IUser = req.user as IUser;
      const userResponse: IUserResponse = {
        id: user.id.toString(),
        username: user.username,
        active: user.active,
        deleted: user.deleted,
        role: user.role,
      };
      return res.status(200).json({ user: userResponse });
    });
  })(req, res, next);
};

this code is run.

As you can see, a json response object with the user is sent back. Additionally, when this occurs, a session is initialized that can be viewed under the application tab of chrome. It looks something like:

connect.sid | s%3ASA6H5MmRMehW-R-SBRya18fGpOmCBAZT.%2BGVd6WRe853RsjY6iaOZrYzizQrQJx2A7Ow5u48QfMw | localhost | / | Session | 93 | httpOnly | Medium

I know this is the session id. When a user logs in, the redux state is updated to reflect that the user is authenticated, however, when the user refreshes the page, the state is cleared and they are no longer authenticated. However, the session id remains.

What is the best way to persist this auth-state?

Questions I have looked at thoroughly before anyone marks this as a duplicate:

How to store authentication state in react and express app

Gives a nice framework but no real implementation ideas.

On React Router, how to stay logged in state even page refresh?

I'm not using JWT auth, I'm using passport-local.

How to persist login after refresh in react-redux app using JWT

Again, JWT based. I've used JWTs before. I'm trying to use passport in this case.

I've also looked at several medium articles and youtube videos since 7AM this morning trying to solve this and what I've gathered so far is this:

  1. use localstorage somehow
  2. use the session somehow

I really am at a roadblock, so any help would be very much appreciated. Please ask for information if I have not provided it.

As always, if you answer or attempt to answer this question, thank you for your time.

Anish Sinha
  • 175
  • 3
  • 13
  • 2
    If you just use pure react without server side rendering, when you refresh the page, the only thing browser receives is html and js files that are the same every time. The session ID is in fact there, but it doesn't matter if your server side code doesn't put any information based on the session into the html. So you need an extra endpoint that will return information about the user from the session and returns it to the client. Then when your react app starts, you need to fetch data from this endpoint and put it in redux. If user is not logged in, this endpoint may return nothing or an error. – Alex Chashin Sep 04 '21 at 20:54
  • @AlexChashin How can I get information from the session? – Anish Sinha Sep 04 '21 at 21:23
  • I'm not familiar with passport to be honets, so you have to consult its documentation for that. For passport-local I found this example repository https://github.com/passport/express-4.x-local-example/blob/master/routes/myaccount.js, in this file you can see how they access the `req.user` property that, presumably, contains the information from the session. Then you can return this information as the response. However I don't know exactly how this information gets there, seems like after calling `ensureLogIn()` – Alex Chashin Sep 04 '21 at 21:27
  • Thanks for your help. I will try to attach a token of some sort to the req.user object and see if that works – Anish Sinha Sep 04 '21 at 21:29
  • You could also check https://www.npmjs.com/package/redux-persist – Pakira Sep 04 '21 at 23:39

1 Answers1

0

Two good alternatives:

  1. js-cookie, to store the user session inside a cookie - More secure than using local storage.
  2. redux-persist, to add persistence support on Redux but requires to be experienced with redux state management - More secure than using cookies and local storage.
Mauricio Rivera
  • 84
  • 5