Handling remote API auth with token stored in a cookie (redux/redux-saga)

[mforcer]

I'm looking for some help and advice getting around a problem I am currently experiencing.

In short, all of the data comes from a remote rest API, when a user logs in I dispatch a redux action which fetches all relevant data, adds it to the redux store, this gives me everything I need and then I don't need to carry out data fetching on page load.. meaning I don't use getServerSideProps (I may be doing it wrong here)... I simply use the hook useSelector(state => state) to get the data I need for the page.

The approach works, but only when I hardcode my auth token into the head (just for development purposes don't worry ;)).

I need access to the user's auth token so that it's available on every data fetching request I need to carry out. I am storing it in a cookie but I can't figure out how to access the cookie on an SSR page.

react-cookie package suggests carrying out the request in getServerSideProps as this gives access to the context and request which contains the cookie.

This is an example of my code to handle a user Login:

  const handleSubmit = ({ email, password }) => {
    await auth
      .login(email, password)
      .then((response) => {
        dispatch(userLoggedIn()) // Dispatch the action that initiates the server request.
      })
      .catch((error) => { ... })
  }

This will then dispatch an action to fetch remote data needed to start the application. e.g.

function fetchUserRequest() {
  return request.get("/me").then((response) => response.json())
}

export function* fetchUser() {
  try {
    const user = yield call(fetchUserRequest)
    yield put(loadUserSucceeded(user))
  } catch (error) {
    yield put(loadUserFailed(error))
  }
}

fetchUserRequest is basically an Axios instance and this is where I need to have access to the users auth token.

Apologies for the long post, hope it makes sense... I would appreciate any help.