로그인 구현은 이미 이전에 NextAuth를 활용해 Naver 로그인을 구현한 적이 있다.
그런데 NextAuth가 지금은 NextJS 뿐만 아니라 여러 라이브러리에서 사용할 수 있도록 AuthJS라는 이름으로 새롭게 바뀌었다고 한다.
그래서 새로운 기능도 체험해볼 겸 AuthJS를 선택했다.
(사실 이전에 사용했던 NextAuth는 다른 분들의 코드를 따라하기에 바빴기 때문에 새로 공부할 겸 선택한 것도 있다)
우선 AuthJS에 대한 자세한 내용은 공식 홈페이지를 참고하도록 하자
라이브러리 설치 및 준비
npm install next-auth@beta필수 환경변수로 AUTH_SECRET이 필요하다. 라이브러리에서 토큰과 이메일 인증 해시를 암호화하는 데 사용하는 임의의 값이다.
npx auth secret다음으로 AuthJS 구성 파일과 객체를 생성한다.
AuthJS에서는 모든 프레임워크는 프로젝트에 auth.ts 파일을 만들 것을 권장한다.
/// Auth.ts
import NextAuth from "next-auth"
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [],
})
/app/api/auth/[...nextauth] 폴더 밑에 route.ts 파일을 생성한다.
/// route.ts
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers
선택 사항으로 미들웨어를 추가하면 세션이 호출될 때마다 세션 만료가 업데이트된다고 한다.
인증
AuthJS에서는 공식적으로 OAuth를 권장한다고 한다.
그래서 나도 기존에 NextAuth를 사용할 때 네이버 계정으로 인증을 대신했던 것처럼 이번에도 네이버를 사용하기로 했다.
NextAuth를 사용했을 때는 네이버 provider를 설정해주고 따로 Providers.tsx 파일을 생성했는데 AuthJS에서는 굉장히 간단해졌다.
/// auth.ts
import NextAuth from "next-auth"
import Naver from "next-auth/providers/naver"
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [Naver],
})
이렇게 auth.ts 파일에 providers 부분에 Naver를 추가해주고
/// layout.ts
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<SessionProvider>
{children}
</SessionProvider>
</body>
</html>
);
Providers.tsx를 따로 작성할 필요 없이 SessionProvider로 childern을 감싸주면 된다!
