[feat, refactor] #211 Oauth 구현

next.config.mjs

@@ -18,6 +18,11 @@ const nextConfig = {
         pathname: '/**',
         search: '',
       },
+      {
+        protocol: 'http',
+        hostname: 'k.kakaocdn.net',
+        pathname: '/**',
+      },
     ],
   },
 };

src/app/(auth)/login/_components/LoginForm/index.tsx

@@ -161,8 +161,8 @@ export default function LoginForm() {
 
       Cookies.set('userId', user.id.toString(), {
         path: '/',
-        secure: true,
-        sameSite: 'Strict',
+        secure: true, // HTTPS 쿠키 전송
+        sameSite: 'Strict', // 사용자가 직접 사이트를 방문한 경우 쿠키 포함
       });
 
       toast.success('로그인 되었습니다.');

src/app/(auth)/login/_components/SocialLogin/index.tsx

@@ -19,7 +19,14 @@ export default function SocialLogin() {
           <Icons.KakaoLoginIcon
             size={42}
             onClick={() => {
-              'kakao Login';
+              // client_id, redirect_uri, state
+              const REST_API_KEY = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;
+              const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
+              const STATE = crypto.randomUUID(); // CSRF 방지를 위한 난수 문자열 생성
+
+              const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&state=${STATE}`;
+              // redirection to kakaoAuthUrl
+              window.location.href = kakaoAuthUrl;
             }}
           />
         </button>

src/app/(auth)/oauth/kakao/CookieSetter.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import loginWithOauth from '@/app/(auth)/oauth/kakao/loginWIthOauth';
+import { useEffect } from 'react';
+
+export interface CookieSetterProps {
+  code: string;
+  state: string;
+}
+
+export default function CookieSetter({ code, state }: CookieSetterProps) {
+  useEffect(() => {
+    (async () => {
+      await loginWithOauth({ code, state });
+    })();
+  }, []);
+
+  return <div></div>;
+}

src/app/(auth)/oauth/kakao/loginWIthOauth.ts

@@ -0,0 +1,62 @@
+// server action
+'use server';
+
+import { CookieSetterProps } from '@/app/(auth)/oauth/kakao/CookieSetter';
+import { cookies } from 'next/headers';
+
+export default async function loginWithOauth({
+  code,
+  state,
+}: CookieSetterProps) {
+  const url = `${process.env.NEXT_PUBLIC_API_URL}/auth/signIn/KAKAO`;
+
+  const responseBody = {
+    state,
+    redirectUri: process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI as string,
+    token: code,
+  };
+
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify(responseBody),
+    });
+    console.log('response 응답', response);
+
+    if (!response.ok) {
+      throw new Error('간편 로그인 실패');
+    }
+
+    const data = await response.json();
+    const { accessToken, refreshToken, user } = data;
+
+    // 쿠키에 토큰과 userId 설정
+    const cookieStore = cookies();
+
+    cookieStore.set('accessToken', accessToken, {
+      path: '/',
+      secure: false,
+      //httpOnly: true,
+      sameSite: 'strict',
+    });
+    cookieStore.set('refreshToken', refreshToken, {
+      path: '/',
+      secure: false,
+      // httpOnly: true,
+      sameSite: 'strict',
+    });
+    cookieStore.set('userId', user.id.toString(), {
+      path: '/',
+      secure: false,
+      // httpOnly: true,
+      sameSite: 'strict',
+    });
+    console.log('로그인 성공:', data);
+  } catch (error) {
+    console.error('카카오 로그인 실패', error);
+  }
+}

src/app/(auth)/oauth/kakao/page.tsx

@@ -0,0 +1,10 @@
+import CookieSetter from '@/app/(auth)/oauth/kakao/CookieSetter';
+
+export default async function KakaoLoginPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { code, state } = await searchParams;
+  return <CookieSetter code={code as string} state={state as string} />;
+}

src/lib/apis/auth/index.ts

@@ -6,6 +6,7 @@ import {
   AuthBody,
   AuthResponse,
 } from '@/lib/apis/auth/type';
+import serverFetcher from '@/lib/server/fetcher.server';
 
 // 회원가입
 export async function signUp({
@@ -39,7 +40,7 @@ export async function postOAuth({
 }: {
   body: OAuthBody;
 }): Promise<AuthResponse | null> {
-  return clientFetcher<OAuthBody, AuthResponse>({
+  return serverFetcher<OAuthBody, AuthResponse>({
     url: '/auth/signIn/KAKAO',
     method: 'POST',
     body,