System Information

Strapi Version: 4.25.2
Next.js Version: 14.2.4
Operating System: Mac OS
Node Version: 20.17.0
NPM Version: 10.8.2

I’m working on a project using Strapi and Next.js, and I’m trying to implement JWT authentication using HttpOnly cookies. While everything works as expected in Postman (HttpOnly cookies are set, and the token is correctly passed and verified), I’m facing an issue when running the same flow with Next.js and Chrome.

Specifically, I can’t see any cookies in Chrome DevTools (under the ‘Application’ > ‘Cookies’ section), even though the email verification process works correctly and the server responds as expected. I expect the HttpOnly cookies to be set and visible in Chrome DevTools, but they are not appearing.

Here are some details:

• I created a custom API and Controller in Strapi for handling registration and authentication.
• I’m using Caddy as a reverse proxy to handle HTTPS.

Postman

ScreenShot of dev tool
Headers 200
enter image description here

Strapi

Here’s the code for the custom Strapi controller handling registration:

module.exports = {
  async register(ctx) {
    const { username, email, password } = ctx.request.body;

    try {
      const user = await registerUser(username, email, password);

      const authToken = generateToken({ id: user.id }, '1h');

      ctx.cookies.set('authToken', authToken, {
        httpOnly: true,
        secure: true,
        maxAge: 3600000,
        sameSite: 'none',
        path: '/',
      });

      ctx.set('Access-Control-Allow-Origin', 'https://localhost:3000');
      ctx.set('Access-Control-Allow-Credentials', true);

      ctx.send({
        user,
        message: 'Registration successful, please check your email.',
      });
    } catch (error) {
      ctx.badRequest(error.message);
    }
    console.log('Ctx register:', ctx);
  },
};

Here’s code for config/middlewares.js

'strapi::poweredBy',
  {
    name: 'strapi::cors',
    config: {
      enable: true,
      origin: 'https://localhost:3000',
      headers: [
        'Content-Type',
        'Authorization',
        'X-Frame-Options',
        'X-Forwarded-For',
        'Access-Control-Allow-Credentials',
        'Access-Control-Allow-Origin',
      ],
      methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD'],
      credentials: true,
      keepHeaderOnError: true,
    },
  },
  'strapi::query',

Next.js

Here’s code for Sign-Up Request (SignUpAction.ts)

// Send sign-up request to Strapi API
    const strapiResponse = await axiosInstance.post(
      `/api/auth/local/registers`,
      { username, email, password },
      {
        withCredentials: true,
      }
    );

    if (strapiResponse.status === 200) {
      return { error: false, message: 'Success!' };
    }

• I expect the HttpOnly cookies (containing the JWT token) to be set in the browser and visible in Chrome DevTools (under the ‘Application’ > ‘Cookies’ section).

• The cookie should also be sent along with subsequent requests to the backend.