[#129] Kakao Login

[SSUK-H]

📝작업 내용

• 카카오 Developers 앱 생성 및 Client Secret 생성
• 도메인과 Redirect URL 등록
• env 카카오 관련 키 추가 (노션에 작성해뒀습니다.)
• 카카오 로그인 버튼에 signIn('kakao') 핸들러 추가
• KakaoProvider 추가로 카카오 로그인 지원
  • clientId와 clientSecret 환경 변수 적용
• 카카오 로그인 후 인증 받고 토근 백엔드에 전달하며 로그인 요청
  • 카카오 로그인 API 함수 및 타입 정의
  • 카카오 로그인 시 서버 검증 로직 추가 (postKaKaoLogin)
  • next-auth 타입 정의 수정 및 확장
  • 성공 시 사용자 정보 매핑

✨PR Point

kakao Login 로직 추가 외 기존 코드 변경 사항

카카오 로그인에서도 동일하게 필요해서 변경된 로그인 API Response 타입 반영하였습니다.

export type TTokenResponse = {
  id: number;
  username: string;
  email: string;
  accessToken: string;
  refreshToken: string;
  expiredAt: string;
};

타입을 변경하면서 authorize 에러 발생하여 해결하였습니다.

'(credentials: Record<"name" | "email" | "password", string> | undefined) => Promise<{ id: string | undefined; name: string | undefined; email: string | undefined; accessToken: string | undefined; refreshToken: string | undefined; expiredAt: string | undefined; } | null>' 형식은 '(credentials: Record<"name" | "email" | "password", string> | undefined, req: Pick<RequestInternal, "body" | "query" | "headers" | "method">) => Awaitable<...>' 형식에 할당할 수 없습니다. 
'Promise<{ id: string | undefined; name: string | undefined; email: string | undefined; accessToken: string | undefined; refreshToken: string | undefined; expiredAt: string | undefined; } | null>' 형식은 'Awaitable<User | null>' 형식에 할당할 수 없습니다. 
'Promise<{ id: string | undefined; name: string | undefined; email: string | undefined; accessToken: string | undefined; refreshToken: string | undefined; expiredAt: string | undefined; } | null>' 형식은 'PromiseLike<User | null>' 형식에 할당할 수 없습니다. 
'then' 속성의 형식이 호환되지 않습니다. 
'<TResult1 = { id: string | undefined; name: string | undefined; email: string | undefined; accessToken: string | undefined; refreshToken: string | undefined; expiredAt: string | undefined; } | null, TResult2 = never>(onfulfilled?: ((value: { ...; } | null) => TResult1 | PromiseLike<...>) | ... 1 more ... | undefined...' 형식은 '<TResult1 = User | null, TResult2 = never>(onfulfilled?: ((value: User | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => PromiseLike<...>' 형식에 할당할 수 없습니다. 
'onfulfilled' 및 'onfulfilled' 매개 변수의 형식이 호환되지 않습니다. 
'value' 및 'value' 매개 변수의 형식이 호환되지 않습니다. 
'{ id: string | undefined; name: string | undefined; email: string | undefined; accessToken: string | undefined; refreshToken: string | undefined; expiredAt: string | undefined; } | null' 형식은 'User | null' 형식에 할당할 수 없습니다. 
'{ id: string | undefined; name: string | undefined; email: string | undefined; accessToken: string | undefined; refreshToken: string | undefined; expiredAt: string | undefined; }' 형식은 'User' 형식에 할당할 수 없습니다. 'id' 속성의 형식이 호환되지 않습니다.
 'string | undefined' 형식은 'string' 형식에 할당할 수 없습니다. 
 'undefined' 형식은 'string' 형식에 할당할 수 없습니다.ts(2322) credentials.d.ts(13, 5): 필요한 형식은 여기에서 'UserCredentialsConfig<{ name: { label: string; type: string; placeholder: string; }; email: { label: string; type: string; placeholder: string; }; password: { label: string; type: string; placeholder: string; }; }>' 형식에 선언된 'authorize' 속성에서 가져옵니다. 
 (property) authorize: (credentials: Record<"name" | "email" | "password", string> | undefined, req: Pick<RequestInternal, "body" | "query" | "headers" | "method">) => Awaitable<User | null>

credentials 없거나 API 호출 실패 시 null 값을 반환하도록 수정하였습니다.

api 호출 에러를 파악하기 어려워 try-catch로 감싸 에러 핸들링을 추가하였습니다. authorize함수에서 기존 로그인 폼에서 전달된 데이터로 id, name, email을 반환하고 있어, 로그인/회원가입 API 호출 성공 시 응답값을 활용하여 데이터를 반환하도록 수정하였습니다. 또한, API 호출의 success 값이 false일 때 에러 로그 출력 코드를 한 줄로 간소화하였습니다.

User 타입을 확장 했으며, interface 코드컨벤션이 앞에 I를 명시해줘야하는데 Next auth에서 User 타입을 찾지 못해 제거하였고, lint 무시 처리 하였습니다.

  // eslint-disable-next-line @typescript-eslint/naming-convention
  interface User extends DefaultUser {
    accessToken?: string;
    refreshToken?: string;
    expiredAt?: string;
  }

기존 Session 타입을 확장했는데 DefaultSession['user']에 이미 포함된 name, email 중복되어 제거하였습니다.

궁금하신 부분은 말씀해 주세요! 자세히 설명 드리겠습니다.

[github-actions]

✅ GitHub Actions 실행 결과

• Build and Test: 성공 🎉
• Lint: 성공 🎉