-
[Next.js] NextAuth 사용해 카카오톡 로그인 구현개발공부/Next.js 2024. 2. 21. 10:05
본 글은 Next.js에서 NextAuth 사용해 카카오톡 로그인 구현했던 방법에 대해 다룬 내용입니다.
목차
1. 도입 이유
2. NextAuth란?
3. 사용 방법1. 도입 이유
최근에 진행한 프로젝트에서 보안성 때문에 Token을 SessionStorage에 저장했었다.
SessionStorage의 경우 Cookie에 비해 보안성이 좋지만, 브라우저 탭 별로 로그인을 해야한다는 점이 굉장히 불편했다.
팀원들과 논의한 결과, Token 저장하는 방법을 바꾸기로 결정했고, 이후 다양한 방법에 대해 찾아봤다.
- 쿠키에 저장 후 암호화하여 보안성 높이기
- NextAuth 사용해서 관리하기
우리는 2번 방법을 채택했고, 그 이유는 아래와 같다.
- NextAuth는 다양한 인증 및 식별 공급자를 지원해 인증 흐름을 쉽게 만들 수 있음 (해당 프로젝트의 경우 카카오톡 로그인만 지원하기 때문에 더욱 용이할 것으로 추정)
- 또 토큰 정보를 클라이언트에 직접 노출 시키지 않아 보안적으로 민간함 정보가 서버에서 안전하게 처리되어 보안성이 좋음 (보안성을 우선시하는 우리 입장에서는 제일 좋았던 부분)
- 마지막으로 Next.js 전용 라이브러리 (프로젝트의 목적이 Next.js의 장단점 체험!)
이와 같은 이유로 NextAuth를 적용하기로 했다.
2. NextAuth란?
NextAuth.js 라이브러리는 인증 로직을 쉽게 구현하기 위한 Next.js 전용 라이브러리이다.
자세한 내용은 공식 문서를 참고하면 좋을 거 같다.3. 사용 방법
순서를 간단하게 정리하면 아래와 같다.
1. 설치하기
2. .env 파일 설정하기
3. [...nextauth].ts 파일 생성 및 설정하기
4. _app.tsx에 SessionProvider 추가하기
5. 로그인 및 로그아웃 구현, 로그인 정보 가져오기1. 설치하기
yarn add next-auth
npm install next-auth2. env 파일 설정하기
NEXTAUTH_URL
- 애플리케이션의 기본 URL을 지정
- 인증 프로세스에서 리디렉션 및 콜백 URL을 구성하는 데 사용
- 실제 애플리케이션의 URL과 일치해야 함
NEXTAUTH_SECRET
- 세션을 암호화하고 보안을 강화하는데 사용
- 세션 토큰 및 기타 보안 정보를 암호화 하는데 필요
- 각자 본인이 복잡하고 랜덤한 문자열로 설정하면 됨
# Kakao Provider API
NEXT_PUBLIC_KAKAO_CLIENT_ID=...
NEXT_PUBLIC_KAKAO_REDIRECT_URL=...
NEXT_PUBLIC_KAKAO_CLIENT_SECRET=...
# Next Auth
NEXTAUTH_SECRET=...
NEXTAUTH_URL=http://localhost:30003. /page/api/auth/[...nextauth].ts 생성하기
/page/api/auth 폴더 하위에 [...nextauth].ts 라는 이름으로 파일을 생성해야 한다.
파일 이름을 [...nextauth].ts로 하는 이유는 동적 라우팅 기능을 활용하기 위해서이다.
- [...nextauth].ts라는 파일 이름은 동적 세그먼트를 포함할 수 있음을 나타냄
- NextAuth.js가 제공하는 인증 기능을 /api/auth/ 경로 아래에 자동으로 설정할 수 있음
- Next.js가 인증 관련 요청을 처리하고, NextAuth.js와 통합된 인증 및 세션 관리를 구현할 수 있음
import NextAuth from "next-auth"; import KakaoProvider from "next-auth/providers/kakao"; const handler = NextAuth({ providers: [ KakaoProvider({ clientId: process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID || "", clientSecret: process.env.NEXT_PUBLIC_KAKAO_CLIENT_SECRET || "", }) ] }); export default handler;4. _app.tsx에 SessionProvider 추가하기
SessionProvider를 추가하는 이유는 전역적으로 세션 상태를 관리하기 위함이다.
_app.tsx는 애플리케이션의 모든 페이지에 공통으로 적용되는 레이아웃을 정의하는 파일이다.
import { SessionProvider } from "next-auth/react"; export default function App({ Component, pageProps }: AppProps) { // ... 생략 return ( <QueryClientProvider client={queryClient}> <RecoilRoot> <SessionProvider session={pageProps.session}> {/* React Query Devtools: 필요한 경우 주석 해제 후 사용 */} {/* <ReactQueryDevtools initialIsOpen={false} /> */} <Layout> <Head> <title>UNIBUS</title> </Head> {isLoading ? <Spinner /> : <Component {...pageProps} />} </Layout> </SessionProvider> </RecoilRoot> </QueryClientProvider> ); }5. 로그인, 로그아웃 및 로그인 정보 가져오기
signIn()
- 사용자를 로그인하도록 유도하는 함수
- 해당 함수 호출 시 사용자는 로그인 프로세스 진행 가능
signOut
- 현재 로그인된 사용자를 로그아웃하도록 유도하는 함수
- 해당 함수 호출 시 현재 사용자의 세션을 종료하고 로그아웃 됨
useSession
- 현재 세션 정보를 가져오는 hook
- 해당 hook 사용 시 현재 로그인된 사용자에 대한 정보를 가져와 사용할 수 있음
import { signIn, signOut, getSession } from "next-auth/react"; const LoginPage = () => { const {data: session} = useSession(); // 로그인 정보 가져오기 return ( <div> <button onClick={()=>signIn("kakao")}>로그인</button> <button onClick={()=>signOut("kakao")}>로그아웃</button> </div> ); }; export default LoginPage;마무리
오늘은 Next.js에서 NextAuth.js를 사용해 카카오 로그인을 구현하는 방법에 대해 알아봤습니다.
Next.js에서만 사용할 수 있는 라이브러리라서 꼭 경험해보고 싶었는데 좋은 기회로 공부할 수 있었습니다!
728x90'개발공부 > Next.js' 카테고리의 다른 글
[Next.js] Zod + React Hook Form 사용해 회원가입 페이지 만들기 (2) 2024.04.03 [Next.js, Node.js] 토큰 암호화 (crypto-js) (0) 2024.02.22 [Next.js] Hydration failed 에러 해결 (Unhandled Runtime Error) (0) 2024.02.17 Next.js에서 카카오 지도 사용하기 (0) 2024.01.25 세션 스토리지 에러 (ReferenceError: sessionStorage is not defined) (2) 2024.01.08