Cookies are not set with fetchBaseQuery

Hello,

I have tried setting cookies using RTK Query’s fetchBaseQuery with the option credentials: ‘include’, but it is not working. While doing the same request using fetch does work and sets the cookies like it should.

My server is running on: http://127.0.0.1:4000/api

I am using webpack, and I tried without any proxy and with these 2 proxies, but it won’t work in any case:

        proxy: {
            '/api':{
                changeOrigin: true,
                cookieDomainRewrite: 'localhost',
                target: 'http://localhost:4000',
                onProxyReq: (proxyReq) => {
                    if (proxyReq.getHeader('origin')) {
                      proxyReq.setHeader('origin', 'http://localhost:4000')
                    }
                }
            }
        }

     proxy: {
            '/api': {
               target: {
                  host: "127.0.0.1",
                  protocol: 'http:',
                  port: 4000
               },
               withCredentials: true,
            }
        },

This is authApi.tsx:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { LoginValues } from '../../schema/login.interfaces';

export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: fetchBaseQuery({
    baseUrl: "http://127.0.0.1:8080/api", // "http://127.0.0.1:4000/api" when using no proxy in webpack
    credentials: 'include', //Tried here
  }),
  endpoints: (builder) => ({
    login: builder.mutation<void, LoginValues>({
      query: (user) => ({
        url: '/auth/login',
        method: 'POST',
        body: user,
        // credentials: 'include', //And here
      }),
    }),
  }),
});

export const { useLoginMutation } = authApi;

Here is how I use it

export const LoginContainer: React.FC = () => {

  const [login, result] = useLoginMutation();

   const submit = async (data: LoginFormValues) => {
    // This calls the api and returns the right cookies in Set-Cookie header, but cookies are not set in the Application
    await login({
        email: '[e-mail]',
         password: 'hellohello',
     });


    // But when I try it with a simple fetch like the following, it returns the right cookies and they are set in the Application
    // Tried with no proxy on webpack
    // const rawResponse = await fetch('http://localhost:4000/api/auth/login', {
    //   method: 'POST',
    //   headers: {
    //     Accept: 'application/json',
    //     'Content-Type': 'application/json',
    //   },
    //   body: JSON.stringify({
    //     email: '[e-mail]',
    //     password: 'hellohello',
    //   }),
    //   credentials: 'include',
    // });

  };
  return (
    <>
      <Button onClick={submit}>Login</Button>
    </>
  );


}
export default LoginContainer;

Any idea how to set those cookies ?

[CJ-0221]

I had the same issue. Turned out that chrome was filtering out the cookies from the request because it was a “cross-site” request and the “secure”-flag on the Cookie was set to false.

So after setting sameSite: “None”, secure: true it’s now working.

I tried doing same but it’s ignoring. Could you pls share how you did it. Btw I’m using fetch. Pls suggest

[Hazem-Ben-Abdelhafidh]

so what’s the solution to this? I’m facing the same problem req.cookies always return that ugly [Object: null prototype] {} …