BE,FE/fix login token cookie auth (#203)

* [BE] fix:쿠키기반 인증 변경, 로그아웃 처리 수정

* fix:쿠키 기반 변경 및 로그인/로그아웃 버튼 수정

Author: Kosw6

backend/src/main/java/org/sejongisc/backend/auth/controller/AuthController.java

@@ -129,19 +129,38 @@ public ResponseEntity<LoginResponse> login(@Valid @RequestBody LoginRequest requ
 
         LoginResponse response = loginService.login(request);
 
-        ResponseCookie cookie = ResponseCookie.from("refresh", response.getRefreshToken())
+        // accessToken을 HttpOnly 쿠키로 설정
+        ResponseCookie accessCookie = ResponseCookie.from("access", response.getAccessToken())
                 .httpOnly(true)
                 .secure(true)
                 .sameSite("None")
                 .path("/")
-                .maxAge(60L * 60 * 24 * 14)
+                .maxAge(60L * 60)  // 1 hour
                 .build();
 
+        // refreshToken을 HttpOnly 쿠키로 설정
+        ResponseCookie refreshCookie = ResponseCookie.from("refresh", response.getRefreshToken())
+                .httpOnly(true)
+                .secure(true)
+                .sameSite("None")
+                .path("/")
+                .maxAge(60L * 60 * 24 * 14)  // 2 weeks
+                .build();
+
+        // JSON 응답에서 토큰 제거, 유저 정보만 포함
+        LoginResponse safeResponse = LoginResponse.builder()
+                .userId(response.getUserId())
+                .email(response.getEmail())
+                .name(response.getName())
+                .role(response.getRole())
+                .phoneNumber(response.getPhoneNumber())
+                .point(response.getPoint())
+                .build();
 
         return ResponseEntity.ok()
-                .header(HttpHeaders.SET_COOKIE, cookie.toString())
-                .header(HttpHeaders.AUTHORIZATION, "Bearer " + response.getAccessToken())
-                .body(response);
+                .header(HttpHeaders.SET_COOKIE, accessCookie.toString())
+                .header(HttpHeaders.SET_COOKIE, refreshCookie.toString())
+                .body(safeResponse);
     }
 
     @Operation(
@@ -203,8 +222,19 @@ public ResponseEntity<?> reissue(
                 response.header(HttpHeaders.SET_COOKIE, cookie.toString());
             }
 
-            // 응답 반환
-            return response.body(Map.of("accessToken", tokens.get("accessToken")));
+            // accessToken을 HttpOnly 쿠키로 설정
+            ResponseCookie accessCookie = ResponseCookie.from("access", tokens.get("accessToken"))
+                    .httpOnly(true)
+                    .secure(true)
+                    .sameSite("None")
+                    .path("/")
+                    .maxAge(60L * 60)  // 1 hour
+                    .build();
+
+            response.header(HttpHeaders.SET_COOKIE, accessCookie.toString());
+
+            // JSON에서 accessToken 제거
+            return response.body(Map.of("message", "토큰 갱신 성공"));
 
         } catch (Exception e) {
             log.warn("토큰 재발급 실패: {}", e.getMessage());
@@ -215,7 +245,7 @@ public ResponseEntity<?> reissue(
 
     @Operation(
             summary = "로그아웃 API",
-            description = "Access Token을 무효화하고 Refresh Token 쿠키를 삭제합니다.",
+            description = "Access Token을 무효화하고 Access/Refresh Token 쿠키를 삭제합니다. 토큰이 없어도 정상적으로 처리됩니다.",
             responses = {
                     @ApiResponse(
                             responseCode = "200",
@@ -226,45 +256,38 @@ public ResponseEntity<?> reissue(
                                               "message": "로그아웃 성공"
                                             }
                                             """))
-                    ),
-                    @ApiResponse(
-                            responseCode = "400",
-                            description = "Authorization 헤더 형식이 잘못됨",
-                            content = @Content(mediaType = "application/json",
-                                    examples = @ExampleObject(value = """
-                                            {
-                                              "message": "잘못된 Authorization 헤더 형식입니다."
-                                            }
-                                            """))
                     )
             }
     )
     @PostMapping("/logout")
     public ResponseEntity<?> logout(
-            @Parameter(description = "Bearer 토큰", example = "Bearer eyJhbGciOiJIUzI1NiJ9...")
-            @RequestHeader(value = "Authorization", required = false) String authorizationHeader
+            @Parameter(description = "Access Token 쿠키", example = "access=abc123")
+            @CookieValue(value = "access", required = false) String accessToken,
+            @Parameter(description = "Refresh Token 쿠키", example = "refresh=abc123")
+            @CookieValue(value = "refresh", required = false) String refreshToken
     ) {
-        //  헤더 유효성 검사
-        if (authorizationHeader == null || !authorizationHeader.startsWith("Bearer ")) {
-            return ResponseEntity.badRequest()
-                    .body(Map.of("message", "잘못된 Authorization 헤더 형식입니다."));
+        // 토큰이 없어도 로그아웃 처리 (멱등성 보장)
+        if (accessToken != null && !accessToken.isEmpty()) {
+            try {
+                loginService.logout(accessToken);
+            } catch (JwtException | IllegalArgumentException e) {
+                log.warn("Invalid or expired JWT during logout: {}", e.getMessage());
+            } catch (Exception e) {
+                log.error("Unexpected error during logout", e);
+            }
         }
 
-        String token = authorizationHeader.substring(7);
-
-        // 예외 처리 및 멱등성 보장
-        try {
-            loginService.logout(token);
-        } catch (JwtException | IllegalArgumentException e) {
-            // 이미 만료되었거나 잘못된 토큰이라도 200 OK로 응답 (멱등성 보장)
-            log.warn("Invalid or expired JWT during logout: {}", e.getMessage());
-        } catch (Exception e) {
-            log.error("Unexpected error during logout", e);
-            // 내부 예외는 500으로 보내지 않고 안전하게 처리
-        }
+        // Access Token 쿠키 삭제
+        ResponseCookie deleteAccessCookie = ResponseCookie.from("access", "")
+                .httpOnly(true)
+                .secure(true)
+                .sameSite("None")
+                .path("/")
+                .maxAge(0)
+                .build();
 
         // Refresh Token 쿠키 삭제
-        ResponseCookie deleteCookie = ResponseCookie.from("refresh", "")
+        ResponseCookie deleteRefreshCookie = ResponseCookie.from("refresh", "")
                 .httpOnly(true)
                 .secure(true)
                 .sameSite("None")
@@ -273,7 +296,8 @@ public ResponseEntity<?> logout(
                 .build();
 
         return ResponseEntity.ok()
-                .header(HttpHeaders.SET_COOKIE, deleteCookie.toString())
+                .header(HttpHeaders.SET_COOKIE, deleteAccessCookie.toString())
+                .header(HttpHeaders.SET_COOKIE, deleteRefreshCookie.toString())
                 .body(Map.of("message", "로그아웃 성공"));
     }
 

backend/src/main/java/org/sejongisc/backend/common/auth/config/OAuth2SuccessHandler.java

@@ -64,7 +64,6 @@ public void onAuthenticationSuccess(
 
         String providerStr = (String) attrs.get("provider");
         String providerUid = (String) attrs.get("providerUid");
-
         if (providerStr == null) {
             throw new IllegalStateException("OAuth provider attribute missing from attributes");
         }
@@ -98,7 +97,6 @@ public void onAuthenticationSuccess(
 
         // 4. RefreshToken 생성
         String refreshToken = jwtProvider.createRefreshToken(user.getUserId());
-
         // 5. RefreshToken 저장(DB or Redis)
         refreshTokenService.saveOrUpdateToken(user.getUserId(), refreshToken);
 
@@ -126,23 +124,32 @@ public void onAuthenticationSuccess(
 
 
         // 6.  HttpOnly 쿠키로 refreshToken 저장
-        ResponseCookie accessCookie = ResponseCookie.from("access", accessToken)
+        ResponseCookie.ResponseCookieBuilder accessCookieBuilder = ResponseCookie.from("access", accessToken)
                 .httpOnly(true)
                 .secure(secure)    // 로컬=false, 배포=true
                 .sameSite(sameSite)  // 로컬= "Lax", 배포="None"
-                .domain(domain)
                 .path("/")
-                .maxAge(60L * 60)  // 1 hour
-                .build();
+                .maxAge(60L * 60);  // 1 hour
+
+        // 로컬 환경에서는 domain 설정하지 않음
+        if (isProd || isDev) {
+            accessCookieBuilder.domain(domain);
+        }
 
-        ResponseCookie refreshCookie = ResponseCookie.from("refresh", refreshToken)
+        ResponseCookie.ResponseCookieBuilder refreshCookieBuilder = ResponseCookie.from("refresh", refreshToken)
                 .httpOnly(true)
                 .secure(secure)
                 .sameSite(sameSite)
-                .domain(domain)
                 .path("/")
-                .maxAge(60L * 60 * 24 * 14) // 2 weeks
-                .build();
+                .maxAge(60L * 60 * 24 * 14); // 2 weeks
+
+        // 로컬 환경에서는 domain 설정하지 않음
+        if (isProd || isDev) {
+            refreshCookieBuilder.domain(domain);
+        }
+
+        ResponseCookie accessCookie = accessCookieBuilder.build();
+        ResponseCookie refreshCookie = refreshCookieBuilder.build();
 
 
         response.addHeader(HttpHeaders.SET_COOKIE, accessCookie.toString());

frontend/src/components/Header.jsx

@@ -1,9 +1,46 @@
 import styles from './Header.module.css';
-import { useNavigate, Link } from 'react-router-dom';
+import { useNavigate, useLocation, Link } from 'react-router-dom';
 import Logo from '../assets/logo.png';
+import { useState, useEffect } from 'react';
+import { api } from '../utils/axios';
+import { toast } from 'react-toastify';
 
 const Header = ({ isRoot, onToggleSidebar, isOpen }) => {
   const nav = useNavigate();
+  const location = useLocation();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  // 로그인 상태 확인 - location 변경 시마다 재확인
+  useEffect(() => {
+    const checkLoginStatus = async () => {
+      try {
+        await api.get('/api/user/details');
+        setIsLoggedIn(true);
+      } catch (error) {
+        setIsLoggedIn(false);
+      } finally {
+        setLoading(false);
+      }
+    };
+    
+    checkLoginStatus();
+  }, [location.pathname]);
+
+  const logout = async () => {
+    try {
+      await api.post('/api/auth/logout');
+    } catch (error) {
+      console.log('로그아웃 API 호출 실패:', error.message);
+    } finally {
+      // localStorage 유저 정보 삭제
+      localStorage.removeItem('user');
+      
+      setIsLoggedIn(false);
+      nav('/');
+      toast.success('로그아웃 되었습니다.');
+    }
+  };
 
   return (
     <header className={`${styles.header} ${isRoot ? styles.transparent : ''}`}>
@@ -25,9 +62,17 @@ const Header = ({ isRoot, onToggleSidebar, isOpen }) => {
       </div>
 
       <div className={styles.authLinks}>
-        <Link to="/login">로그인</Link>
-        <span>|</span>
-        <Link to="/signup">회원가입</Link>
+        {isLoggedIn ? (
+          <button onClick={logout} className={styles.logoutButton}>
+            로그아웃
+          </button>
+        ) : (
+          <>
+            <Link to="/login">로그인</Link>
+            <span>|</span>
+            <Link to="/signup">회원가입</Link>
+          </>
+        )}
       </div>
     </header>
   );

frontend/src/components/Header.module.css

@@ -91,6 +91,26 @@
   opacity: 0.5;
 }
 
+.logoutButton {
+  background: none;
+  border: none;
+  color: #ffffff;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+  transition: opacity 0.2s ease;
+  white-space: nowrap;
+  font-family: inherit;
+}
+
+.logoutButton:hover {
+  opacity: 0.7;
+}
+
+.logoutButton:active {
+  opacity: 0.5;
+}
+
 /* 태블릿 이상 */
 @media (min-width: 768px) {
   .header {