HttpOnly Cookies between Strapi and Next.js

[Tae-uni]

System Information

• Strapi Version: 4.25.2
• Operating System: Mac OS
• Database: sqlite
• Node Version: 20.17.0
• NPM Version: 10.8.2

---

Issue Description

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.

ScreenShot of dev tool

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!' };
    }

Expected Behavior:

• 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.

Actual Behavior:

• The email verification process works fine, but no cookies are visible in Chrome DevTools, and I cannot confirm whether the HttpOnly cookie is being set.

Troubleshooting Done So Far

• I tested the same flow using Postman, and everything works perfectly: the cookies are set correctly, and the token is passed as expected.

• I’ve ensured that CORS is properly configured with the correct Access-Control-Allow-Origin and Access-Control-Allow-Credentials headers.

Questions

1. What could be causing the HttpOnly cookies to not appear in Chrome DevTools, even though they work in Postman?

2. Is there a known issue with Chrome or Next.js that could be preventing the cookies from being set correctly?

3. Are there any additional settings I should check in Strapi, CORS, or Next.js that could resolve this issue?

Thanks for reading this long posts.