I have setup an express REST API backend , React Front End . When user launches front end app , it will be redirecting user to signin page using oauth and express server creates session id after successful authentication. I could see a browser cookie connect.sid.

In my react app i have a private route which i defined to check user is not logged in or not before dashboard or user profile page. But i am not sure what check i can do to validate user session.

<Route path='/' exact ponent={Home} />
<Route path='/login' ponent={Login} />
<Route path='/register' ponent={Register} />
<PrivateRoute authed={this.props.isSessionActive} path='/dashboard' ponent={Dashboard} />
<PrivateRoute authed={this.props.isSessionActive} path='/user-profile' ponent={UserProfile} />

One solution i can think of is calling in my redux action e.g. isSessionActive call express REST API and check for req.isAuthenticate() on REST API middleware. I am not sure if calling the API before each page navigation is a good idea.

I have setup an express REST API backend , React Front End . When user launches front end app , it will be redirecting user to signin page using oauth and express server creates session id after successful authentication. I could see a browser cookie connect.sid.

In my react app i have a private route which i defined to check user is not logged in or not before dashboard or user profile page. But i am not sure what check i can do to validate user session.

<Route path='/' exact ponent={Home} />
<Route path='/login' ponent={Login} />
<Route path='/register' ponent={Register} />
<PrivateRoute authed={this.props.isSessionActive} path='/dashboard' ponent={Dashboard} />
<PrivateRoute authed={this.props.isSessionActive} path='/user-profile' ponent={UserProfile} />

One solution i can think of is calling in my redux action e.g. isSessionActive call express REST API and check for req.isAuthenticate() on REST API middleware. I am not sure if calling the API before each page navigation is a good idea.

• javascript
• reactjs
• express
• redux
• react-router

1 Answer 1

If the cookie with the session id is readable, you can just read the cookie from your react app and if there is a session id, you know the user is logged in.

If you cannot read the cookie because it's HttpOnly, you would have to make an endpoint that lets you check if there is a session, and if there is a valid session, return some information about the user. Then you can store that user data in a global state.

Example:

import Cookies from 'js-cookie'

const sid = Cookies.get('session') || ''
if(sid){
   this.setState({ isLoggedIn: true })
}

If your cookie is HttpOnly:

Lets say you're using express.

app.get('/session/', (req, res) => {
   const token = req.cookies.session || ''
   if(token){
      ... perform some operation to get user data based on reading the token
      res.status(200).send({user})
   else{
      res.status(200).send({message: 'No valid session'})
   }
})

I choose to send 200 regardless, because the request is read successfully, we just don't have an active session.

});