[Saida Lab] Next-auth 적용하기 (1)_app router + kakao Login
전에 리액트를 이용해서 소셜 로그인 (카카오 로그인)을 구현했던 경험이 있었다.
그 때 기억 때문에 이번에 프로젝트 진행할 때, 그 방법 그대로 하려고 하다가
CTO님께서 '다른 프로젝트에서도 Next-auth 사용해서 적용했으니 이번에도 적용해봐요'
라고 하셔서 몇일간의 고생 끝에 적용한 내용을 기록하려고 한다.
React로는 어떻게 했더라..
카카오 디벨로퍼에 있는 문서를 보면 REST API를 사용하는 방식으로는 위와 같은 방식을 진행한다고 적혀있다.
실제로 나도 위 문서를 토대로 로그인 작업을 진행했었다.
a 태그에 카카오 인가코드 받을 수 있는 링크 연결해 주고,
리다이렉트 경로 설정해서 내 프로젝트의 설정한 경로로 오게 되면
서버로 인가 코드 보내줘서 서버가 토큰을 받아오게 하거나,
아니면 클라이언트에서 다시 카카오로 인가코드 쏴서 토큰 받고
그 토큰을 다시 서버로 전달하는 이러한 방식으로 로그인을 진행했었다.
이걸 생각해서 예전에 Next.js 로 블로그 페이지를 만드는 프로젝트를 진행할 때
지정해 준 리다이렉트 페이지로 왔다가 에러를 내뱉고 다시 첫 페이지로 돌아가는 에러가 계속 발생했었는데
이 부분은 nextjs의 SSR 때문에 발생하는 일이어서 되게 어거지로 해결했었던 경험이 있었다.
그런 경험 때문인지 이번에 적용할 때 약간의 두려움이 있었는데
next 에서 이런 소셜 로그인을 간편하게 할 수 있도록 도움을 주는 라이브러리가 바로 이 NextAuth 가 되겠다.
참고 사항
혹시라도 내 글을 읽고 도움이 될까? 해서 들어온 분들을 위해 내 프로젝트 상황에 대해서 전반적인 정리를 해두겠다.
프레임워크 : Next.js (ver 14.1.0)
스타일 라이브러리 : sass (1.70.0)
NextAuth 라이브러리 버전 (4.24.6)
추가로 App router 환경에서 구현했고, 카카오로 로그인을 진행했다.
Init Setting
npm install next-auth
우선 NextAuth의 공식문서에 있는 대로 사용하고자 하는 프로젝트에서 설치를 진행한다.그 다음 최신 버전인 4 에서 부터는 Session Provider 사용이 의무가 되어서 이 부분을 세팅해 주어야 한다.
// src/components/providers/session-provider.tsx
import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { ReactNode } from "react";
type Props = {
session?: Session | null;
children: ReactNode;
};
const AuthSession = ({ session, children }: Props) => {
return <SessionProvider session={session}>{children}</SessionProvider>;
};
export default AuthSession;
파일의 위치는 어디에 있던 상관이 없는거 같아서, 다른 Provider도 사용하는 터라 위와 같이 파일 위치를 잡았다.
// layout.tsx
import AuthSession from "@_components/Providers/session-provider";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<AuthSession>{children}</AuthSession>
</body>
</html>
);
}
만든 Provider는 layout.tsx에 import 해와서 children을 감싸주는 방법으로 세팅해준다.
이렇게 해야 로그인 이후 받아온 정보를 next auth 에서 제공하는 hook(useSession)을 이용해서
모든 페이지에서 데이터를 사용할 수 있는 것 같다.
// .env
KAKAO_CLIENT_ID=
KAKAO_CLIENT_SECRET=
NEXTAUTH_SECRET=
NEXTAUTH_URL=http://localhost:3000/api/auth
// 난수 생성 코드
openssl rand -base64 32
그 다음에는 환경변수를 세팅해 준다.
NextAuth에서 카카오 로그인을 사용하면서 필요한 환경 변수의 종류를 위의 4가지가 있다.
kakao 관련 키는 카카오 디벨로퍼에서 확인할 수 있는데, NEXTAUTH_SECRET 키는 도저히 공식 문서에서도 찾아볼 수 없었는데
다른 블로그들을 찾아보니 위의 난수 생성 코드를 이용해서 나온 값을 넣어줬길래 나도 그렇게 작성했다
// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import { NextAuthOptions } from "next-auth";
import kakaoProvider from "next-auth/providers/kakao";
const authOptions: NextAuthOptions = {
providers: [
kakaoProvider({
clientId: process.env.KAKAO_CLIENT_ID as string,
clientSecret: process.env.KAKAO_CLIENT_SECRET as string,
}),
],
secret: process.env.NEXTAUTH_SECRET,
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
그 다음 위에 작성한 것 처럼 파일의 경로대로 폴더와 파일을 만들어줘야 한다.
app router는 app 폴더에 작성한 폴더 경로대로 routing을 하기 때문에 이렇게 정해주는 것은
카카오 서버에서 인증을 거친 후 redirect 경로에 맞도록 폴더를 설정해줘야 해서 이렇게 경로를 잡는게 아닐까 싶다.
http://localhost:3000/api/auth/callback/kakao
그래서 카카오의 Redirect URI 경로도 위와 같이 설정해 주었다.
api/auth 까지는 app 폴더에 정한대로 가는거 같고 그 뒤에 callback/kakao 이 부분은
next auth에서 지정해 놓은 경로대로 이동하는 것 같다.
실제 사용
"use client";
import { signIn } from "next-auth/react";
import { Button } from "@_components/Action";
import css from "./Home.module.scss";
function Home() {
return (
<main className={css.container}>
<Button type="kakao" clickAction={() => signIn("kakao")}>
카카오로 시작하기
</Button>
</main>
);
}
export default Home;
실제 사용은 간단했다.
기본적인 세팅을 마친 뒤 실제 로그인을 진행하고자 하는 곳에서 signin이라는 메서드를 불러와
이벤트에 걸어주기만 하면 끝이다.
물론 이 이후에 추가적인 세팅도 진행해야 하긴 하지만, 일단 너무나도 간단하게 kakao 로그인을 구현할 수 있었다.
"use client";
import { useSession } from "next-auth/react";
import css from "./Main.module.scss";
function Main() {
const { data, status } = useSession();
return (
<main className={css.container}>
<span>{data.user.name}님 환영합니다!</span> // 카카오에 등록된 유저 이름 표기
</main>
);
}
export default Main;
그렇게 한 뒤, 카카오에서 받아온 유저에 대한 정보를
useSession hook으로 위와 같은 방법처럼 간편하게 가져와서 사용할 수 있다!