-
Notifications
You must be signed in to change notification settings - Fork 4
fix(web): prevent duplicate kakao callback auth requests #467
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,16 +5,26 @@ import { useEffect } from "react"; | |
| import { usePostKakaoAuth } from "@/apis/Auth"; | ||
| import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage"; | ||
|
|
||
| const attemptedKakaoAuthCodes = new Set<string>(); | ||
|
|
||
| const KakaoLoginCallbackPage = () => { | ||
| const searchParams = useSearchParams(); | ||
| const { mutate: postKakaoAuth } = usePostKakaoAuth(); | ||
| const code = searchParams?.get("code"); | ||
|
|
||
| useEffect(() => { | ||
| const code = searchParams?.get("code"); | ||
| if (code) { | ||
| postKakaoAuth({ code }); | ||
| if (!code) { | ||
| return; | ||
| } | ||
|
|
||
| // Strict Mode remount/useEffect 재실행 시 동일 인가코드 중복 호출 방지 | ||
| if (attemptedKakaoAuthCodes.has(code)) { | ||
| return; | ||
|
Comment on lines
+21
to
+22
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
This early return creates a dead-end for repeated visits to the same callback URL in the same tab: since Useful? React with 👍 / 👎. |
||
| } | ||
| }, [searchParams, postKakaoAuth]); | ||
|
|
||
| attemptedKakaoAuthCodes.add(code); | ||
| postKakaoAuth({ code }); | ||
| }, [code, postKakaoAuth]); | ||
|
|
||
| return <CloudSpinnerPage />; | ||
| }; | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧩 Analysis chain
🏁 Script executed:
Repository: solid-connection/solid-connect-web
Length of output: 659
1. 모듈 레벨 Set 사용 - 좋은 접근 방식입니다 👍
Strict Mode에서의 이중 호출 방지를 위해 모듈 레벨 Set을 사용한 것은 적절한 패턴이에요. React 컴포넌트 생명주기 외부에 상태를 두어 리마운트 시에도 추적이 유지됩니다.
2. AppleLoginCallbackPage와의 일관성 문제 - 동일한 패턴 적용 필요
검토 결과,
AppleLoginCallbackPage에서는 이 패턴을 사용하지 않고 있습니다. 현재 구현은 useEffect 내에서 직접postAppleAuth({ code })를 호출하기만 하므로, Kakao 페이지가 해결한 것과 동일한 이중 호출 문제에 노출되어 있어요.KakaoLoginCallbackPage: 모듈 레벨 Set으로 중복 호출 방지 ✓AppleLoginCallbackPage: 중복 호출 방지 메커니즘 없음 ✗두 콜백 페이지의 접근 방식이 일관되지 않으면 향후 유지보수와 버그 추적 시 혼란이 있을 수 있습니다.
AppleLoginCallbackPage도 동일한 Set 기반 패턴을 적용하여 일관성을 맞춰주세요.🤖 Prompt for AI Agents