[FE-Fix] 리프래시 토큰 로직 수정 및 웹서버 https 설정 #404

hamo-o · 2025-05-12T10:45:50Z

#️⃣ 연관된 이슈>

[Feature] 리프레시 토큰 구현 #337

📝 작업 내용> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

이후 늘어날 sever/index.js 코드를 고려하여, 로컬에서도 미들웨어 로직을 적용할 수 있도록 https 설정합니다(기존에는 vite 설정에 의존하여 불가능하였음). 이제 pnpm run dev로도 https 서버를 띄울 수 있습니다.

회의에서 생각했던 서버에서의 쿠키 체크 및 리프래시는 아래 두가지 이유 때문에 불가능했습니다.

path가 알고 보니 /api/v1/refresh-token으로 설정되어 있어서, 나머지 요청들에는 쿠키가 안 붙어서 감. 그래서 체크가 불가능
path를 / 와 같이 설정하여 쿠키 존재 여부에 따라서 네트워크 요청을 줄일 수는 있음 (리프래시 없으면 서버단에서 리다이렉트가 되니까), 그렇다고 해도 refresh 로직 자체는 서버에서 실행 불가. 액세스 토큰이 브라우저 메모리에 저장되어 있기 때문.

그래서 아래와 같이 해결했습니다.

refresh 토큰이 아예 존재하지 않는 경우 받는 에러코드인 RT001를 추가하여, 최초 로그인과 재로그인을 구분합니다.
useEffect 내부의 refresh를 main 진입점의 beforeLoad로 이동하여, 토큰이 필요한 페이지들의 다른 모든 로직보다 refresh를 우선적으로 진행하도록 합니다.
로그인과 캘린더 권한 분리에 따라 임시로 로그인 리다이렉트 경로를 변경합니다. (재영님 작업하신 부분 이어서 올려주시면 됩니당)

🙏 여기는 꼭 봐주세요! > 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

application-dev 파일 Secure: false가 아닌 Secure: true에서 동작합니다!!

Summary by CodeRabbit

New Features
- Added new error messages for missing, invalid, and expired refresh tokens.
Bug Fixes
- Improved handling of failed access token renewal by explicitly returning a failure indicator.
- Enhanced error recognition for invalid refresh tokens.
Refactor
- Simplified login status checks in the navigation bar for improved performance.
- Updated server startup to support HTTPS in development and clarified server status messages.
- Adjusted OAuth redirect login route path for greater specificity.
- Ensured authentication refresh occurs before main route access.
Style
- Removed an unnecessary comment from fetch utility code.

…직 수행

coderabbitai · 2025-05-12T10:45:57Z

Walkthrough

The updates introduce HTTPS support for the development server, refactor server middleware setup, and adjust authentication flows to ensure token refresh occurs before login checks. Error handling is enhanced with new refresh token error codes, and related logic is updated to recognize them. Minor code cleanups and route path adjustments are also included.

Changes

File(s)	Change Summary
`frontend/server/index.js`	Refactored server setup: moved HTML middleware to `serveHTML`, updated `createServer` to support HTTPS in development, improved startup logs, and added `https` import.
`frontend/src/constants/error.ts`	Added new error codes `RT001`, `RT002`, and `RT003` related to refresh tokens to `errorMessages`.
`frontend/src/layout/GlobalNavBar/index.tsx`	Refactored login state handling: removed async state/effect hooks, now uses synchronous `isLogin()` for rendering logic.
`frontend/src/routes/_main.tsx`	Added async `refresh()` call in `beforeLoad` hook to ensure token refresh before login check.
`frontend/src/routes/oauth.redirect/login/index.tsx`	Changed route path from `/oauth/redirect/` to `/oauth/redirect/login/` and updated related logic.
`frontend/src/utils/auth/accessTokenService.ts`	Added explicit `return false;` in `renewAccessToken`'s `catch` block for error cases.
`frontend/src/utils/error/HTTPError.ts`	Updated `isInvalidRefreshTokenError` to recognize error codes starting with `RT` instead of only `O006`.
`frontend/src/utils/fetch/executeFetch.ts`	Removed a comment about the `credentials: 'include'` fetch option.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant AuthUtils

    User->>Browser: Navigate to main route
    Browser->>AuthUtils: refresh()
    AuthUtils-->>Browser: (refresh complete)
    Browser->>AuthUtils: isLogin()
    alt Not logged in
        Browser->>User: Redirect to login page
    else Logged in
        Browser->>User: Render main page
    end

sequenceDiagram
    participant Dev
    participant Server
    participant HTTPS
    participant HTTP

    Dev->>Server: Start server (createServer)
    alt Development
        Server->>HTTPS: create HTTPS server with TLS cert/key
        HTTPS-->>Dev: Log HTTPS URL
    else Production
        Server->>HTTP: app.listen (HTTP)
        HTTP-->>Dev: Log HTTP URL
    end

Poem

🐰
The server now can serve with keys,
HTTPS in dev with ease!
Tokens refreshed before we check,
New error codes keep bugs in check.
A path renamed, some hooks made lean—
The code hops forward, crisp and clean!

Tip

⚡️ Faster reviews with caching

CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between 7a01b0f and 28a9158.

📒 Files selected for processing (2)

frontend/src/constants/error.ts (1 hunks)
frontend/src/utils/error/HTTPError.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

frontend/src/utils/error/HTTPError.ts

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Join our Discord community 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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

dioo1461

잘 작동하네요! 고생하셨습니다~~

dioo1461 · 2025-05-13T08:39:56Z

frontend/src/utils/error/HTTPError.ts

  isTooManyRequestsError = () => this.#status === 429;

-  isInvalidRefreshTokenError = () => this.#code === 'O006';
+  isInvalidRefreshTokenError = () => this.#code === 'O006' || this.#code === 'RT001';


p2;
O006 에러가 RTxxx로 변경되었으므로 해당 에러를 체크하는 부분은 빼도 될 것 같습니다!

28a9158 수정했씁니다!!

hamo-o added 4 commits May 12, 2025 17:02

fix: 로그인 리다이렉트 경로 변경

183365e

fix: 서버 미들웨어 코드 적용될 수 있도록 https 설정 적용

0eceb20

feat: refresh token이 비어 있는 경우 에러 핸들링

0db512f

fix: GNB에 붙은 useEffect refresh 로직 제거, main 진입점 beforeLoad에서 refresh 로…

7a01b0f

…직 수행

hamo-o self-assigned this May 12, 2025

hamo-o requested a review from dioo1461 as a code owner May 12, 2025 10:45

hamo-o added the 🖥️ FE Frontend label May 12, 2025

dioo1461 reviewed May 13, 2025

View reviewed changes

dioo1461 approved these changes May 13, 2025

View reviewed changes

fix: 변경된 리프래시 토큰 에러 코드에 따른 로직 변경

28a9158

hamo-o merged commit 05ddc9d into dev May 13, 2025
1 check passed

hamo-o deleted the bugfix/fe/refresh branch May 13, 2025 10:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[FE-Fix] 리프래시 토큰 로직 수정 및 웹서버 https 설정 #404

[FE-Fix] 리프래시 토큰 로직 수정 및 웹서버 https 설정 #404

Uh oh!

hamo-o commented May 12, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented May 12, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

dioo1461 left a comment

Uh oh!

dioo1461 May 13, 2025

Uh oh!

hamo-o May 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[FE-Fix] 리프래시 토큰 로직 수정 및 웹서버 https 설정 #404

[FE-Fix] 리프래시 토큰 로직 수정 및 웹서버 https 설정 #404

Uh oh!

Conversation

hamo-o commented May 12, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#️⃣ 연관된 이슈>

📝 작업 내용> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

🙏 여기는 꼭 봐주세요! > 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

dioo1461 left a comment

Choose a reason for hiding this comment

Uh oh!

dioo1461 May 13, 2025

Choose a reason for hiding this comment

Uh oh!

hamo-o May 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hamo-o commented May 12, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented May 12, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)