Nextjs Local Cookie Removed Success But Deployed on Netlify Cookie Not

Support
, ,
1

Overview

Hi, I use Nextjs (React + Nodejs), firebase authentication, firestore, chakra UI to build an webapp.

Doubt

My doubt mainly focus on the authentication. I use firebase auth and it works very well. When a use requests login, if success, I will
(1) store the uid of the user into cookies in the backend (code shown below)
(2) set a global useState uid = ${uid} in the frontend ( skip code for this part)

image
image1715×283 45.7 KB

These also work well.

api/auth/login

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { email, password } = req.body;
  const { loginWithEmailAndPassword } = AuthService;

  try {
    const userCredential = await loginWithEmailAndPassword(email, password);
    if (!userCredential.user) {
      return res.status(401).json({
        error:
          "[Firebase Authentication] : userCredential exist but does not have user property "
      });
    }
    const uid = userCredential.user.uid;
    res.setHeader(
      "set-cookie",
      `uid=${uid}; Max-Age=${1000 * 60 * 24 * 14};Path=/; HttpOnly`
    );

    return res.status(200).json({ uid: userCredential.user.uid });
  } catch (e) {
    console.log(e);
    return res
      .status(500)
      .json({ error: "[NextJs] : Backend API Login Failed" });
  }
}

But if a user tries to request logout, the cookie cannot be removed on the Netlify deployment version. However, it works very well when run local.

Here is the code for logout
/api/auth/logout

import { NextApiRequest, NextApiResponse } from "next";
import { AuthService } from "../../../lib/firebase/AuthService";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { logout } = AuthService;

  try {
    await logout();
    res.setHeader(
      "set-cookie",
      `uid=deleted; expires=Thu, 01 Jan 1970 00:00:00 GMT;Path=/; HttpOnly`
    );
  } catch (e) {
    console.log("user logout failed");
    return res.status(500).json({ error: e });
  }

  return res.status(200).json({ message: "Logout success" });
}

My site: https://amotions.netlify.app. You can log in via https://amotions.netlify.app/login with this account: email: duanyihan@abyssmail.com , password : 123456

Thanks So Much!

2

Hey @EhanDuan,

I can see the cookie has been set as deleted based on your code:

image
image816×488 20.6 KB

Have you solved this?

3

Hi, here is what I found recently. Let me separate into 2 time frame.

First Time Visit ( With Last time login cookie maybe several days ago)

When the first time I visited website, it had my last time cookie. So it redirected to the practice page. In this case, if I click logout, the cookie could be removed successfully.

It worked well in this case. However, it errors in the incoming case

Logout and Re-Login

Continue from the above scene. I logout successfully. Then, I re-login. It works. But when I click logout, it cannot logout.

Summary

First logout success, but then re-login and logout, the second logout failed. The cookie is still here with the re-login data.

Sometimes the error needs to be reproduced with one more round, i.e., another login-logout

4

Hey @EhanDuan,

I tried at least 5 times and the cookie was successfully removed every time. Could you try in a different browser/device?

If it still occurs, could you share a HAR file in which this happens?

7

Is it okay to zoom meeting for 5 minutes? I think that is more efficient to display my error

8

Hi, I tried safari and chrome. They both encounter the same issue. I save the har file of chrome here ( which I try logout twice ).

It seems I cannot directly attach har file here. So I put it into my google drive. Please check it
here.

If you prefer another way I can share with you, please lemme know.

14

Hiya @EhanDuan ,

This is beyond Netlify’s official scope of support - this is something relating to your code more than our service. Our team took one last look at it, and came up with the following. You’re of course welcome to ask further questions, but our staff may not respond since this is past what we intend to advise on (see Netlify Scope of Support for more details).

Since we see the /auth/logout URL called twice in the HAR file, but are seeing HTTP 304 responses, we don’t think the function was running when you gathered that HAR file. That response should never be cached and isn’t in our testing - perhaps you have or had a service worker or other interesting caching situation locally, not sure.

Today, we can see the function is SSR and is returning a cache-control: no-cache which should prevent this behavior. Is there any chance you changed anything about how this function runs since you gathered that data (perhaps it was not SSR before, or there used to be a different cache-control setting you were setting explicitly?) It’s a bit hard for us to see “past configuration” so we’ll just ask.