영원히 흘러가는 강
nextjs 14 + nextAuth 카카오 본문
안녕하세요.
이전 회사에서는 직접 id/pw를 입력받아 사용했었지만 소셜 로그인의 필요성이 대두됨에 따라 공부해보자 글을 작성해본다
구현목표!
nextjs14 와 nextAuth 를 활용하여 소셜 로그인 구현
프로젝트 설정
next 설치
npx create-next-app@latest
nextAuth 설치
npm install next-auth
파일 구조
파일구조때문에 살짝 애먹긴 했다...
next13 부터 app 구조로 변경되어 API 활용하려면 route.ts와 같이 사용
app / api / auth / [...nextauth] / route.ts
import NextAuth from "next-auth";
const handler = NextAuth({
...
});
export { handler as GET, handler as POST };
next 13.2 버전 이상은 공식문서 참고
https://next-auth.js.org/configuration/initialization#route-handlers-app
Initialization | NextAuth.js
The main entry point of NextAuth.js is the NextAuth method that you import from next-auth. It handles different types of requests, as defined in the REST API section.
next-auth.js.org
나는 테스트로 github도 해보고 카카오도 해봤지만
아무래도 우리나라에서 가장 많이 사용하는 카카오만 적용해보기
import NextAuth from "next-auth";
import KakaoProvider from "next-auth/providers/kakao";
const handler = NextAuth({
providers: [
KakaoProvider({
clientId: process.env.KAKAO_CLIENT_ID as string,
clientSecret: process.env.KAKAO_CLIENT_SECRET as string,
}),
],
});
export { handler as GET, handler as POST };
공식홈페이지의 Providers - kakao에 있는 코드 그대로 가져옴
여기서 우리가 채워줘야할것은
KAKAO_CLIENT_ID. / KAKAO_CLIENT_SECRET <- 두개의 키값 구해오기
카카오 developers로의 이동
https://developers.kakao.com/
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
애플리케이션 추가한후 추가한 애플리케이션 클릭
1. 앱키 env에 작성
나도 헷갈린 사실인데
JavaScript 키가 KAKAO_CLIENT_ID
KAKAO_CLIENT_SECRET 키는 무지성 작성 가능
2. 플랫폼에서 웹 사이트 도메인 추가
개발용이니까 http://localhost:3000 추가
3. Redirect URI 작성해주기
http://localhost:3000/api/auth/callback/kakao 으로 작성해줌
그 이후 session을 전역적으로 사용하기 위한 SessionProvider를 추가해야하는데
공식 문서에는 따로 app route 변경 이후에 대한 설명이 따로 없어 구현해야한다
next13 이후 _app.js , _document.js는 layout.js로 통합되었다
그렇다면 layout.js에 추가해야하는데 공식 문서처럼 추가하면 추가가 되지 않고 이슈가 발생한다
layout은 메타 데이터를 포함한 ssr을 위한 페이지인데 클라이언트 동작을 실행하여 이슈가 발생한다고 한다
따라서 layout에 'use client' 를 박는 상남자의 행동과
컴포넌트로 래핑해서 추가하는 방식이 있는데
개인 미니 프로젝트라서 SEO는 떠나보낼수 있지만 클라이언트화 시키기보다는 래핑했습니다.
/app/components/sessionWrapper.tsx
"use client";
import { SessionProvider } from "next-auth/react";
import React from "react";
const SessionWrapper = ({ children }: { children: React.ReactNode }) => {
return <SessionProvider>{children}</SessionProvider>;
};
export default SessionWrapper;
/app/layout.tsx
import SessionWrapper from "./components/sessionWrapper";
...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<SessionWrapper>
<html lang="ko">
<body className={inter.className}>{children}</body>
</html>
</SessionWrapper>
);
}
위처럼 한번 래핑한후에 layout에 추가
이젠 page에서 할수 있는 행동을 해보자
매우매우 간단하게 버튼만 생성하고 세션 체크만 해줄꺼다
import { useSession, signIn, signOut } from "next-auth/react";
export default function Home() {
const { data: session } = useSession();
console.log(session);
if (session) {
return (
<div>
<p> welcome {session.user?.name} </p>
<div onClick={() => signOut()}>sign out</div>
</div>
);
}
return (
<div>
<button onClick={() => signIn()}></button>
</div>
);
}
로그인 이후 이름이 잘 찍히는지 확인하면 끄으으으읕
태클은 언제나 환영입니다.!!!