[FIX] 로그인 만료 시 토큰 재발급 처리 #303
Conversation
WalkthroughThe changes consolidate authentication logic into a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LoginButton
participant auth.ts
participant Backend
User->>LoginButton: Clicks Login
LoginButton->>auth.ts: kakaoLogin()
auth.ts->>User: Redirects to Kakao OAuth
User->>auth.ts: Returns with code
auth.ts->>Backend: POST /kakao-login (with code)
Backend-->>auth.ts: Returns access token
auth.ts->>auth.ts: tokenManager.set(token)
auth.ts->>auth.ts: redirectManager.toOnboarding()
sequenceDiagram
participant AnyAPIRequest
participant fetchClient
participant auth.ts
participant Backend
AnyAPIRequest->>fetchClient: request()
fetchClient->>auth.ts: tokenManager.get()
fetchClient->>Backend: API request with token
Backend-->>fetchClient: 401 Unauthorized
fetchClient->>auth.ts: tokenManager.refresh()
alt Refresh succeeds
auth.ts->>Backend: POST /reissue
Backend-->>auth.ts: New token
auth.ts->>auth.ts: tokenManager.set(new token)
fetchClient->>Backend: Retry API request with new token
Backend-->>fetchClient: Success
else Refresh fails
auth.ts->>auth.ts: tokenManager.remove()
auth.ts->>auth.ts: redirectManager.toLanding()
fetchClient-->>AnyAPIRequest: Throws error
end
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
frontend/src/components/Button/DeleteAccountButton/hooks/deleteAccountMutation.ts (1)
3-3: Auth consolidation looks good, but has redundant token removal.The centralized auth module usage is a good improvement. However, there's redundant token removal since
redirectManager.toLanding()already callstokenManager.remove()internally.Consider removing the redundant token removal:
onSuccess: () => { - tokenManager.remove(); redirectManager.toLanding(); },The
redirectManager.toLanding()method handles both token removal and redirection as seen infrontend/src/api/auth.ts.Also applies to: 9-11
frontend/src/components/Button/LogoutButton/hooks/useLogoutMutation.ts (1)
3-3: Auth consolidation implemented consistently, but has redundant token removal.The centralized auth module usage is consistent with the previous file. However, the same redundant token removal issue exists since
redirectManager.toLanding()already handles token cleanup internally.Consider removing the redundant token removal:
onSuccess: () => { - tokenManager.remove(); redirectManager.toLanding(); },This matches the pattern that should be used consistently across both logout and delete account flows.
Also applies to: 9-11
frontend/src/api/auth.ts (2)
75-87: Consider adding error handling for logout requests.The logout function correctly includes the Authorization header, but doesn't handle potential network errors or API failures.
Consider adding basic error handling:
export const logout = async () => { const accessToken = tokenManager.get(); if (accessToken) { - await fetch(API_URL.logout, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${accessToken}`, - }, - }); + try { + await fetch(API_URL.logout, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${accessToken}`, + }, + }); + } catch (error) { + // Log error but don't throw - logout should be best effort + console.warn('Logout request failed:', error); + } } };
89-101: Consider adding error handling for account deletion.Similar to the logout function, the account deletion doesn't handle potential failures.
Consider adding error handling:
export const deleteAccount = async () => { const accessToken = tokenManager.get(); if (accessToken) { - await fetch(API_URL.deleteAccount, { - method: 'DELETE', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${accessToken}`, - }, - }); + try { + const response = await fetch(API_URL.deleteAccount, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${accessToken}`, + }, + }); + + if (!response.ok) { + const error = await response.json(); + throw error; + } + } catch (error) { + // Account deletion failures should be handled by the caller + throw error; + } } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
frontend/src/api/auth.ts(1 hunks)frontend/src/api/deleteAccount.ts(0 hunks)frontend/src/api/fetchClient.ts(3 hunks)frontend/src/api/login.ts(0 hunks)frontend/src/api/logout.ts(0 hunks)frontend/src/components/Button/DeleteAccountButton/hooks/deleteAccountMutation.ts(1 hunks)frontend/src/components/Button/LoginButton/index.tsx(2 hunks)frontend/src/components/Button/LogoutButton/hooks/useLogoutMutation.ts(1 hunks)frontend/src/pages/KakaoLoginPage/hooks/useKakaoLoginMutation.tsx(1 hunks)frontend/src/pages/LandingPage/components/ServiceGuide/GuideIntro/index.tsx(1 hunks)frontend/src/pages/LandingPage/components/ServiceGuide/GuideOutro/index.tsx(2 hunks)frontend/src/pages/LandingPage/components/ServiceGuide/GuideSlide/index.tsx(2 hunks)
💤 Files with no reviewable changes (3)
- frontend/src/api/logout.ts
- frontend/src/api/deleteAccount.ts
- frontend/src/api/login.ts
🧰 Additional context used
🧬 Code Graph Analysis (5)
frontend/src/components/Button/LogoutButton/hooks/useLogoutMutation.ts (1)
frontend/src/api/auth.ts (3)
logout(75-87)tokenManager(7-34)redirectManager(36-49)
frontend/src/pages/KakaoLoginPage/hooks/useKakaoLoginMutation.tsx (2)
frontend/src/types/auth.ts (1)
KakaoLogin(1-5)frontend/src/api/auth.ts (3)
kakaoLoginAuth(56-73)tokenManager(7-34)redirectManager(36-49)
frontend/src/components/Button/DeleteAccountButton/hooks/deleteAccountMutation.ts (1)
frontend/src/api/auth.ts (3)
deleteAccount(89-101)tokenManager(7-34)redirectManager(36-49)
frontend/src/api/fetchClient.ts (2)
frontend/src/api/auth.ts (2)
tokenManager(7-34)redirectManager(36-49)frontend/src/api/error.ts (1)
CustomError(14-24)
frontend/src/api/auth.ts (2)
frontend/src/constants/url.ts (1)
API_URL(5-77)frontend/src/types/auth.ts (1)
KakaoLogin(1-5)
🔇 Additional comments (13)
frontend/src/pages/LandingPage/components/ServiceGuide/GuideIntro/index.tsx (1)
7-7: Clean component replacement as part of auth consolidation.The replacement of
KakaoLoginButtonwithLoginButtonis consistent with the broader authentication refactor. The import path and usage are correct.Also applies to: 15-15
frontend/src/pages/LandingPage/components/ServiceGuide/GuideSlide/index.tsx (1)
5-5: Consistent component replacement.The
LoginButtonreplacement follows the same clean pattern as other components in this refactor.Also applies to: 26-26
frontend/src/pages/LandingPage/components/ServiceGuide/GuideOutro/index.tsx (1)
6-6: Systematic component replacement completed.The
LoginButtonreplacement is consistent across all landing page guide components, completing the systematic refactor.Also applies to: 16-16
frontend/src/components/Button/LoginButton/index.tsx (1)
1-23: Clean refactoring to use centralized authentication module.The component renaming from
KakaoLoginButtontoLoginButtonand the import path updates are consistent with the centralization of authentication logic. The functionality remains intact while improving modularity.frontend/src/pages/KakaoLoginPage/hooks/useKakaoLoginMutation.tsx (1)
3-18: Excellent refactoring to use centralized authentication managers.The migration from direct
localStorageaccess anduseNavigatetotokenManagerandredirectManagerimproves separation of concerns and centralizes authentication logic. The flow remains correct: token storage on success, appropriate redirects on both success and error cases.frontend/src/api/fetchClient.ts (3)
1-1: Good centralization of token management.Using
tokenManagerandredirectManagerfrom the centralized auth module improves consistency across the application.
16-20: Well-designed method signature for retry handling.The addition of the
isRetryparameter with a default value offalseis a clean way to track retry attempts and prevent infinite loops.
41-50: Excellent implementation of token refresh logic.This correctly addresses the PR objective of handling token reissuance on login expiration. The implementation:
- Checks for 401 status and ensures it's not already a retry
- Attempts token refresh via
tokenManager.refresh()- Retries the original request once if refresh succeeds
- Redirects to landing page and throws error if refresh fails
The retry mechanism prevents infinite loops while ensuring proper token lifecycle management.
frontend/src/api/auth.ts (5)
4-5: Environment variable usage looks correct.The Kakao client ID and redirect URI are properly imported from environment variables for OAuth configuration.
36-49: Good separation of navigation concerns.The
redirectManagercentralizes navigation logic and properly removes tokens when redirecting to the landing page, ensuring clean authentication state transitions.
51-54: Kakao OAuth URL construction is correct.The OAuth authorization URL is properly constructed using the required parameters for Kakao's OAuth flow.
56-73: Solid authentication code exchange implementation.The
kakaoLoginAuthfunction correctly exchanges the authorization code for tokens with proper error handling and response parsing.
7-34: Confirm cookie-based refresh flowA search across the codebase shows no other calls to
API_URL.authReissuesending anAuthorizationheader—tokenManager.refresh()infrontend/src/api/auth.tsonly setsContent-Type. This implies the endpoint relies on HTTP-only cookies rather than a bearer token.• frontend/src/api/auth.ts:
refresh()sends onlyContent-Type
• No otherauthReissueusages include anAuthorizationheaderPlease verify with the backend or API documentation that
/api/v1/auth/reissueis indeed a cookie-based refresh endpoint and does not require passing the existing token in the header.
Issue Number
close #302
As-Is
토큰 재발급 처리 안됐음
To-Be
Check List
Test Screenshot
(Optional) Additional Description
Summary by CodeRabbit
New Features
Refactor
Bug Fixes