prepare headers getState token for server side request

I’m currently following this example in order to authenticate users when sending requests to the API. https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#setting-default-headers-on-requests

import { fetchBaseQuery } from '@reduxjs/toolkit/query'
import type { RootState } from './store'

const baseQuery = fetchBaseQuery({
  baseUrl: '/',
  prepareHeaders: (headers, { getState }) => {
    const token = (getState() as RootState).auth.token

    // If we have a token set in state, let's assume that we should be passing it.
    if (token) {
      headers.set('authorization', `Bearer ${token}`)
    }

    return headers
  },
})

but the problem is, the token will always be empty on the server-side part. causing the request made will always client-side request. how do I resolve this issue?

I’m using nextjs, and i store the token using redux-persist. and i’m following this https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering to setup hydration on nextjs. if the api doesn’t need token the server side request works fine.

[phryneas]

Well, the Redux store is always empty on the server as well - SSR always uses a “new” Redux store since technically there is no way the client could communicate the full store contents back to the server witch each request.

You can move data from the server store to the client store with each request (using the hydration options redux-next-wrapper offers), but never the other way round.

If you want something like a token shared between client and server, you would have to put that into a cookie and in prepareHeaders access that cookie, not into your Redux store.

[ghostmurda]

@bryantobing12 Would you be interested in sharing how and maybe what libraries you used. Next auth already writes the jwt to the cookies but im not sure how to access it on the server. Since prepareHeaders doesn’t have access to the request

@d-sooter #2228 Here you can find the answer. urhot/nextjs-rtk-query-ssr@54d47f9 In this repo you can find the example to access cookies in prepareHeaders with next-redux-wrapper

Thanks! Great solution