Next.js / Node.js (Express): Set Cookies (with httpOnly) are in the response header but not in the browser storage

Question

Server: Node.js, express, Type-Graphql with Apollo Server

In index.ts:

import 'reflect-metadata';
import express from 'express';
import { ApolloServer } from 'apollo-server-express';
import { buildSchema } from 'type-graphql';
import { createConnection } from 'typeorm';
import { verify } from 'jsonwebtoken';
import coockieParser from 'cookie-parser';
import cors from 'cors';
import User from './entity/User';
import UserResolver from './resolvers';
import { createAccessToken, createRefreshToken, sendRefreshToken } from './auth';

require('dotenv').config();

const corsOptions = {
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'X-Access-Token', 'Authorization'],
  credentials: true, // this allows to send back (to client) cookies
  methods: 'GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE',
  origin: 'http://localhost:3000',
  preflightContinue: false,
};

(async () => {
  const PORT = process.env.PORT || 4000;
  const app = express();
  app.use(coockieParser());
  app.use(cors(corsOptions));

  // -- non graphql endpoints
  app.get('/', (_, res) => {
    res.send('Starter endpoint');
  });

  app.post('/refresh_token', async (req, res) => {
    const token = req.cookies.jid;

    if (!token) {
      return res.send({ ok: false, accessToken: '' });
    }

    let payload: any = null;
    try {
      payload = verify(token, process.env.REFRESH_TOKEN_SECRET!);
    } catch (e) {
      console.log(e);
      return res.send({ ok: false, accessToken: '' });
    }

    // token is valid, and the access token can be send back
    const user = await User.findOne({ id: payload.userId });

    if (!user) {
      return res.send({ ok: false, accessToken: '' });
    }

    if (user.tokenVersion !== payload.tokenVersion) {
      return res.send({ ok: false, accessToken: '' });
    }

    sendRefreshToken(res, createRefreshToken(user));

    return res.send({ ok: true, accessToken: createAccessToken(user) });
  });
  //--

  // -- db
  await createConnection();
  // --

  // -- apollo server settings
  const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [UserResolver],
    }),
    context: ({ req, res }) => ({ req, res }),
  });

  await apolloServer.start();

  apolloServer.applyMiddleware({
    app,
    cors: false,
  });
  // --

  app.listen(PORT, () => {
    console.log(`Server running on port: ${PORT}`);
  });
})();

Login mutation in the UserResolver:

//..

@Mutation(() => LoginResponse)
  async login(
    @Arg('email') email: string,
    @Arg('password') password: string,
    @Ctx() { res }: AuthContext,
  ): Promise<LoginResponse> {
    const user = await User.findOne({ where: { email } });

    if (!user) {
      throw new Error('Incorrect email');
    }

    const valid = await compare(password, user.password);

    if (!valid) {
      throw new Error('Incorrect password');
    }

    sendRefreshToken(res, createRefreshToken(user));

    return {
      accessToken: createAccessToken(user),
      user,
    };
  }

//..

When handling authentification, the cookies are set in the response header as follows:

//..

export const createAccessToken = (user: User) => sign({ userId: user.id }, process.env.ACCESS_TOKEN_SECRET!, { expiresIn: '10m' });

export const createRefreshToken = (user: User) => sign({ userId: user.id, tokenVersion: user.tokenVersion }, process.env.REFRESH_TOKEN_SECRET!, { expiresIn: '7d' });

export const sendRefreshToken = (res: Response, refreshToken: string) => {
  res.cookie('jid', refreshToken, {
    httpOnly: true,
    secure: true,
    sameSite: 'strict',
    path: '/refresh_token',
  });
};

//..

Client: Next.js, Graphql with URQL

In _app.tsx:

/* eslint-disable react/jsx-props-no-spreading */
import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider, EmotionCache } from '@emotion/react';
import { createClient, Provider } from 'urql';
import theme from '../styles/theme';
import createEmotionCache from '../lib/createEmotionCache';
import '../styles/globals.css';

// Client-side cache shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

interface IAppProps extends AppProps {
  // eslint-disable-next-line react/require-default-props
  emotionCache?: EmotionCache;
}

const client = createClient({
  url: 'http://localhost:4000/graphql',
  fetchOptions: {
    credentials: 'include',
  },
});

const App = (props: IAppProps) => {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <Provider value={client}>
      <CacheProvider value={emotionCache}>
        <Head>
          <title>Client App</title>
        </Head>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </CacheProvider>
    </Provider>
  );
};

export default App;

Login page does not rely on SSR or SSG (so it is CSR):

import React from 'react';
import LoginForm from '../components/LoginForm/LoginForm';
import Layout from '../layouts/Layout';

interface ILoginProps {}

const Login: React.FC<ILoginProps> = () => (
  <Layout
    showNavbar={false}
    showTransition={false}
    maxWidth='xs'
  >
    <LoginForm />
  </Layout>
);

export default Login;

The mutation is used in the LoginForm component to request an access token and set refresh token in the browser cookies:

import React from 'react';
import { useRouter } from 'next/router';
import { useLoginMutation } from '../../generated/graphql';
//...

const LoginForm = () => {
  //..
  
  const [, login] = useLoginMutation();
  const router = useRouter();

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (disabledSubmit) {
      setShowFormHelper(true);
    } else {
      const res = await login({
        email, // from the state of the component
        password,
      });

      if (res && res.data?.login) {
        console.log(res.data.login.accessToken);
        router.push('/home');
        setShowFormHelper(false);
      } else {
        setHelper('Something went wrong');
      }
    }
  };

//..
};

export default LoginForm;

Issue

So, the problem is that the login response has set-cookie in the header, but the cookie still isn't set in the browser:

Question

Previously, I've implemented the same authentication scheme using the same server code but create-react-app on the client. Everything worked just fine. So, why isn't it working now with next.js? What am I missing?

Work Around

I can use something like cookies-next to put cookies into the storage. The refresh token then would need to be passed in the response data:

import React from 'react';
import { useRouter } from 'next/router';
import { useLoginMutation } from '../../generated/graphql';
import { setCookies } from 'cookies-next';

//...

const LoginForm = () => {
  //..
  
  const [, login] = useLoginMutation();
  const router = useRouter();

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (disabledSubmit) {
      setShowFormHelper(true);
    } else {
      const res = await login({
        email, // from the state of the component
        password,
      });

      if (res && res.data?.login) {
        console.log(res.data.login.accessToken);
        setCookies('jid', res.data.login.refreshToken);
        router.push('/home');
        setShowFormHelper(false);
      } else {
        setHelper('Something went wrong');
      }
    }
  };

//..
};

export default LoginForm;

setCookie accepts options. However, the httpOnly can't be set to true in this case anyway.

Updates

It turns out everything above works in Firefox, but not in Chrome.

Answer 1

in res.cookie defined in the express server, use sameSite:'lax' instead of strict. this may solve the issue.