인프런 커뮤니티 질문&답변

며칠 혼자 시도해보다가 안돼서 결국 답변으로 질문 다시 남깁니다 ㅠ
제 증상은 다음과 같습니다.

1. 로그인 이후 특정 페이지 이동 시 connect.sid가 s%3...으로 변경됨

2. 로그아웃시에도 삭제되지 않고 위와 동일하게 변경됨. (아래 사진)

순서별로 주석으로 설명드리겠습니다.

로그인은 다음과 같습니다.

// 프론트에서 아래와 같이 로그인을 시도합니다 
async function onSubmit(data: z.infer<typeof FormSchema>) {
    const result = await signIn("credentials", {
      email: data.email,
      password: data.password,
      redirect: false,
    });

    if (result?.error) {
      alert("아이디 / 비밀번호를 다시 확인해주세요.");
    } else {
      router.replace("/");
    }
  }

// 백엔드에서는 컨트롤러를 거쳐 아래와 같이 토큰을 발급합니다.
  async setRefreshTokenToUser(user: IUser, response) {
    const payload = {
      ....
    };
    const { accessToken, refreshToken } = await this.generateTokens(payload);

    await this.authRepository.setRefreshToken(user.id, refreshToken);
    response.cookie('connect.sid', accessToken, {
      httpOnly: true,
      sameSite: 'none',
      secure: false,
      path: '/',
      domain: 'localhost',
    });
  }

// 이후 프론트의 auth.ts에서는 다음과 같이 로그인 로직을 진행중입니다.
authorize: async (credentials): Promise<any> => {
        const res = await login(
          credentials.email as string,
          credentials.password as string
        );

        if (res.ok && res.status === 204) {
          let setCookie = res.headers.get("set-cookie");

          if (setCookie) {
            const parsed = cookie.parse(setCookie);
            const token = parsed["connect.sid"];
            cookies().set("connect.sid", token);
            const user = jwtDecode(parsed["connect.sid"]);

            return {
              ...user,
            };
          }
        }

        if (res.status === 401) {
          const result = await res.json();
          throw new Error(result.message || "Failed to login");
        }

        return null;
      },
    }),
  ],

//login함수는 다음과 같습니다.
export const login = async (email: string, password: string) => {
  const res = await fetch(`${BASE_URL}/login/email`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    credentials: "include",
    body: JSON.stringify({ email, password }),
  });

  return res;
};

로그아웃은 다음과 같습니다.

// 로그아웃 버튼에서 다음과 같습니다.
  const onLogout = async () => {
    await signOut({ callbackUrl: "/" });
    // router.replace("/");
  };

// 프론트의 auth.ts입니다. nextauth 로그아웃을 먼저 진행하고 connect.sid를 삭제하려고 하였습니다.
 events: {
    signOut: async (data) => {
      const token = cookies().get("connect.sid");
      if (!token) return;
      await logout(token.value);
    },
  },

// 로그아웃 fetch 입니다 (달러부분은 에디터 오류로 대체)
export const logout = async (token: string) => {
  const res = await fetch(`${BASE_URL}/logout`, {
    method: "POST", 
   headers: {
Authorization : `Bearer (달러){token}`
}
  credentials: "include",
  return res;
};

// 서버코드는 다음과 같습니다.
 logout(request: any, response: Response) {
    const { user } = request;
    response.clearCookie('connect.sid', {
      httpOnly: true,
      sameSite: 'none',
      secure: false,
      path: '/',
      domain: 'localhost',
    });
    return this.authRepository.invalidateRefreshToken(user.id);
  }

가능한 혼자 해결해보려했는데 잘안되네요.. 어느 부분을 수정해야할까요 ㅠ

네 path와 domain도 동일합니다.

브라우저로 응답하는 부분이 없어서요. 브라우저가 응답을 받아야 쿠키가 지워집니다. 그리고 쿠키가 지워질 때 네트워크 탭에서 Set-Cookie가 있어야 합니다.

왜 동작하지 않는지 이 부분 조금 더 자세히 설명해주실수 있으실까요 ! return해주고 네트워크탭을 확인해보는데 어떤 수정이 필요한지 잘 모르겠습니다 ㅠ

쿠키를 제거하려면 유효기간을 제외한 쿠키의 옵션이 정확히 똑같아야 합니다. httpOnly, sameSite, secure 같은 것들이요. domain이랑 path도 있네요. 얘네들도 확인해보셨나요?

그리고 일단 아래 코드는 동작하지 않을 겁니다. 브라우저로 응답하는 부분이 없어서요. 브라우저가 응답을 받아야 쿠키가 지워집니다. 그리고 쿠키가 지워질 때 네트워크 탭에서 Set-Cookie가 있어야 합니다.