Feat#97 Kakao Login oauth 구현 by eunwoo-levi · Pull Request #142 · mosu-dev/mosu-client

eunwoo-levi · 2025-07-12T09:25:28Z

✅ Linked Issue

resolve [✨ 기능 요청] 카카오 로그인 oauth 구현 #97

🔍 What I did

카카오 소셜 로그인 인증 플로우 전체 구현
인가 코드 콜백 처리 및 서버에서 accessToken을 HttpOnly 쿠키로 저장
인증 성공/실패 UI 및 예외 처리
axios 인스턴스 withCredentials 적용

💡 Why I did it

인증 토큰은 서버에서 HttpOnly 쿠키로 내려주어 XSS에 안전하게 관리
axios 인스턴스에 withCredentials: true 적용하여 쿠키 기반 인증 지원
인증 실패 시 사용자에게 에러 메시지 노출 및 리다이렉트 처리

Oauth Flow

[사용자 브라우저]
   |
   | 1. 카카오 로그인 → 리디렉션 후 code 받음
   |
   | 2. code를 Next.js API Route (/api/oauth/kakao)로 전달
   v
[Next.js API Route]
   |
   | 3. 받은 code를 Spring 백엔드로 전달
   v
[백엔드]
   |
   | 4. 카카오 서버에 code → accessToken 교환
   | 5. accessToken으로 사용자 정보 조회 및 처리
   v
   → 성공 시 쿠키 or JWT 토큰 등 반환

🚧 TODO (if any)

백엔드 플로우에 따라 추후 부분 변경될 예정

…eat#97

- token을 cookie에 넣기 위함

vercel · 2025-07-12T09:25:32Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mosu-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 12, 2025 9:25am

gemini-code-assist

Summary of Changes

Hello @eunwoo-levi, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces the complete Kakao social login functionality to the application. It establishes a secure authentication flow by handling authorization codes, exchanging them for access tokens, and storing these tokens as HttpOnly cookies. The changes span across the frontend and a new Next.js API route, ensuring a robust and user-friendly login experience with appropriate error handling and UI feedback.

Highlights

Kakao Social Login Implementation: I've implemented the full Kakao social login authentication flow, covering the user's redirection to Kakao, handling the authorization code callback, and processing it on the server side.
Secure Token Handling: The access token received from the backend after successful Kakao authentication is now securely stored as an HttpOnly cookie. This enhances security by mitigating Cross-Site Scripting (XSS) vulnerabilities.
Authentication Flow and UI Feedback: I've established a Next.js API route (/api/auth/kakao-auth-code) to act as an intermediary for the authorization code exchange with the backend. The frontend now includes dedicated pages and hooks to manage the authentication process, display loading states, and provide user-friendly error messages for both successful and failed login attempts.
Axios Configuration for Cookie-Based Auth: The global Axios instance (api.ts) has been configured with withCredentials: true. This ensures that cookies, including the HttpOnly access token, are automatically sent with cross-origin requests to support the cookie-based authentication mechanism.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

github-actions · 2025-07-12T09:26:36Z

	Messages
📖	✅ PR 제목에 이슈 번호가 포함되어 있습니다.
📖	✅ PR에 Reviewers가 지정되어 있습니다.
📖	✅ PR에 라벨이 지정되어 있습니다.
📖	✅ PR에 Assignees가 지정되어 있습니다.
📖	✅ package.json에 변경사항이 없습니다.
📖	✅ 브랜치 이름 'feat#97'이 컨벤션을 따릅니다.
📖	✅ TypeScript 컴파일이 성공적으로 완료되었습니다.
📖	✅ ESLint 검사 결과 문제가 없습니다.

📝 추가 및 변경된 파일

총 5개 파일 변경

├── 📂 mosu-admin/
│   └── 📂 src/
│       └── 📂 common/
│           └── 📂 lib/
│               └── 📘 api.ts
└── 📂 mosu-app/
    └── 📂 src/
        ├── 📂 pages/
        │   ├── 📂 auth/
        │   │   ├── 📂 member/
        │   │   │   └── ⚛️ signin.tsx
        │   │   └── 📂 kakao/
        │   │       └── ⚛️ callback.tsx
        │   └── 📂 api/
        │       └── 📂 auth/
        │           └── 📘 kakao-auth-code.ts
        └── 📂 features/
            └── 📂 auth-signin/
                └── 📂 hooks/
                    └── 📘 useKakaoAuth.ts

Generated by 🚫 dangerJS against 6ada039

github-actions · 2025-07-12T09:26:57Z

✅ Mosu Admin 빌드가 성공적으로 완료되었습니다!

📋 빌드 결과

✅ DangerJS 검사 통과
✅ React 앱 빌드 성공

🚀 다음 단계

코드 리뷰 후 머지하면 프로덕션에 배포됩니다.

gemini-code-assist

Code Review

This pull request implements the Kakao OAuth login flow. I've found a few critical and high-severity issues that need to be addressed, including a method mismatch in an API route, and unsafe access to environment variables. I've also included some suggestions to improve code quality and user experience.

gemini-code-assist · 2025-07-12T09:28:10Z

+    if (req.method !== "GET") {
+        return res.status(405).json({ message: "Method Not Allowed. Use GET." });
+    }


The API route is configured to only accept GET requests. However, the client-side useKakaoAuth hook sends a POST request. This will cause the request to fail with a 405 Method Not Allowed error. The handler should be updated to accept POST requests.

Suggested change

if (req.method !== "GET") {

return res.status(405).json({ message: "Method Not Allowed. Use GET." });

}

if (req.method !== "POST") {

return res.status(405).json({ message: "Method Not Allowed. Use POST." });

}

gemini-code-assist · 2025-07-12T09:28:10Z

+    const { code } = req.query;
+    if (!code || typeof code !== "string") {
+        return res.status(400).json({ message: "Authorization code is required." });
+    }


The API route is configured to read the authorization code from the query string (req.query). However, the client-side useKakaoAuth hook sends a POST request with the code in the request body. This will cause the request to fail. To fix this, read the code from req.body.

Suggested change

const { code } = req.query;

if (!code || typeof code !== "string") {

return res.status(400).json({ message: "Authorization code is required." });

}

const { code } = req.body;

if (!code || typeof code !== "string") {

return res.status(400).json({ message: "Authorization code is required." });

}

gemini-code-assist · 2025-07-12T09:28:10Z

+                setError(null);
+                hasProcessedCode.current = code;
+
+                await api.post("/auth/kakao-auth-code", { code });


The API call is made to /auth/kakao-auth-code. However, Next.js API routes under pages/api/ are accessed with an /api prefix. The correct endpoint is /api/auth/kakao-auth-code.

Suggested change

await api.post("/auth/kakao-auth-code", { code });

await api.post("/api/auth/kakao-auth-code", { code });

router.push(redirectTo);

gemini-code-assist · 2025-07-12T09:28:10Z

+const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY!;
+const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI!;
+
+const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;


Using the non-null assertion operator (!) on environment variables is unsafe and can lead to runtime crashes if the variables are not set. A safer approach is to read the variables without assertion and then build the kakaoAuthUrl conditionally.

const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY; const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI; const kakaoAuthUrl = KAKAO_CLIENT_ID && REDIRECT_URI ? `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code` : "";

gemini-code-assist · 2025-07-12T09:28:10Z

+                    잠시 후 다시 시도해주세요.
+                </p>
+                <button
+                    onClick={() => window.location.href = "/auth/member/signin"}


For internal navigation within a Next.js application, it's better to use the useRouter hook's push method instead of window.location.href. This enables client-side routing, which avoids a full page reload and provides a smoother user experience.

onClick={() => router.push("/auth/member/signin")}

gemini-code-assist · 2025-07-12T09:28:11Z

+    return (
+        <div className="p-5 text-center">
+            <p>로그인 처리 중입니다...</p>
+        </div>
+    );


The UI for the isLoading state and the default return state (which acts as a loading state before redirection) are identical. This leads to duplicated code. You can simplify this by combining the conditions.

if (isLoading || !error) { return ( <div className="p-5 text-center"> <p>로그인 처리 중입니다...</p> </div> ); } return null;

github-actions · 2025-07-12T09:29:10Z

📚 Storybook이 Chromatic에 배포되었습니다!

🔗 Storybook Preview: https://www.chromatic.com/build?appId=68627ee20725077171386a15&number=72
🚀 Chromatic Build: https://www.chromatic.com/build?appId=68627ee20725077171386a15&number=72

kimgho

oauth하느라 고생하셨습니다~

kimgho · 2025-07-12T13:35:22Z

+                    잠시 후 다시 시도해주세요.
+                </p>
+                <button
+                    onClick={() => window.location.href = "/auth/member/signin"}


여기에 window.location.href를 쓴 이유가 따로 있을까요?

kakao redirect로직 이어서 짜다가 당시에 무의식적으로 짠 것 같습니다. 해당 부분은 같은 도메인에서 이동하기 때문에 더 효율적인 라우팅을 위해 router를 쓰는게 낫겠네요! 짚어주셔서 감사합니다!

kimgho · 2025-07-12T13:36:45Z

+const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+


가능하면 경로는 상수처리하는게 관리하기 편할거같아요~

Suggested change

const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

const kakaoAuthUrl = `NEXT_PUBLIC_KAKAO_REDIRECT_URI?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

toothlessdev

수고하셨습니다 💯

eunwoo-levi added 8 commits July 10, 2025 02:45

feat: 카카오톡 로그인 버튼 누를 시 url 이동 핸들러 구현

bdd57a7

Merge branch 'main' of https://github.com/mosu-dev/mosu-client into f…

7f96766

…eat#97

Merge branch 'main' of https://github.com/mosu-dev/mosu-client into f…

13e4fca

…eat#97

Merge branch 'main' of https://github.com/mosu-dev/mosu-client into f…

23d2c80

…eat#97

refactor: axios.create에 withCredentials추가

5312b31

- token을 cookie에 넣기 위함

feat: kakaitalk redirect URL에 리다이렉트

2390dc6

feat: kakao 로그인 로직을 담은 useKakaoAuth Hook 구현

8a356f6

feat: kakao Auth 로직의 api route 구현

6ada039

eunwoo-levi added this to the 1차 릴리즈 전 milestone Jul 12, 2025

eunwoo-levi requested review from kimgho and toothlessdev July 12, 2025 09:25

eunwoo-levi self-assigned this Jul 12, 2025

eunwoo-levi added the 기능 구현 label Jul 12, 2025

eunwoo-levi added this to mosu-client Jul 12, 2025

eunwoo-levi added 우선순위 (상) 도메인 : 인증인가 labels Jul 12, 2025

gemini-code-assist Bot reviewed Jul 12, 2025

View reviewed changes

kimgho approved these changes Jul 12, 2025

View reviewed changes

toothlessdev moved this to 진행중 in mosu-client Jul 13, 2025

toothlessdev approved these changes Jul 13, 2025

View reviewed changes

eunwoo-levi merged commit 3d99c54 into main Jul 13, 2025
23 checks passed

github-project-automation Bot moved this from 진행중 to 완료 in mosu-client Jul 13, 2025

	await api.post("/auth/kakao-auth-code", { code });
	await api.post("/api/auth/kakao-auth-code", { code });
	router.push(redirectTo);

		const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

	const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
	const kakaoAuthUrl = `NEXT_PUBLIC_KAKAO_REDIRECT_URI?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

Conversation

eunwoo-levi commented Jul 12, 2025

✅ Linked Issue

🔍 What I did

💡 Why I did it

Oauth Flow

🚧 TODO (if any)

Uh oh!

vercel Bot commented Jul 12, 2025

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

github-actions Bot commented Jul 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 추가 및 변경된 파일

Uh oh!

github-actions Bot commented Jul 12, 2025

✅ Mosu Admin 빌드가 성공적으로 완료되었습니다!

📋 빌드 결과

🚀 다음 단계

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jul 12, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 12, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 12, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 12, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 12, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 12, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 12, 2025

📚 Storybook이 Chromatic에 배포되었습니다!

Uh oh!

kimgho left a comment

Choose a reason for hiding this comment

Uh oh!

kimgho Jul 12, 2025

Choose a reason for hiding this comment

Uh oh!

eunwoo-levi Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

kimgho Jul 12, 2025

Choose a reason for hiding this comment

Uh oh!

toothlessdev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Jul 12, 2025 •

edited

Loading