NextAuth 사용법 7편 - NextAuth로 네이버 아이디 로그인 만들기

안녕하세요?

NextAuth 사용법이 벌써 7편까지 왔네요.

지난 시간에 카카오 로그인을 했는데, 네이버 로그인을 안 하면 좀 그래서 간단하게 적어 보겠습니다.

먼저, 네이버 디벨로퍼에 가입하고 아래 그림처럼 네이버 로그인을 클릭하면 됩니다.

그러면 아래와 같이 "오픈 API 이용 신청" 버튼이 보입니다. 클릭하십시오.

그러면 아래와 같이 애플리케이션 이름과 네이버 로그인에서 가져올 항목을 선택하는 화면이 보이는데요.

간단하게 별명과 프로필 사진을 선택하시면 됩니다.

그리고 아래와 같이 환경 추가 옵션창을 선택해서 PC웹을 선택해 줍니다.

그러면 위와 같이 서비스 URL을 넣는 칸이 보이고 또 Callback URL을 넣는 곳이 나옵니다.

NextAuth의 콜백 URL은 일정한 규칙이 있습니다.

아래와 같습니다.

http://localhost:3000/api/auth/callback/naver

이제 맨 밑에 등록하기 버튼을 누르면 애플리케이션이 등록되는데요.

아래와 같이 애플리케이션 정보가 나옵니다.

여기서 중요한 게 Client ID와 Client Secret입니다.

카카오 아이디로 로그인하기에서는 Client Secret가 본인이 아무렇게나 적으면 됐었는데, 네이버에서는 아예 ID와 Secret를 명확하게 지정해 주네요.

NextAuth에 NaverProvider 추가하기

NaverProvider 추가하기는 아주 간단합니다.

위 그림처럼 간단하게 추가할 수 있습니다.

그리고 .env 파일에 각각 NAVER_CLIENT_ID와 NAVER_CLIENT_SECRET 값에 아까 네이버 디벨로퍼에서 등록한 애플리케이션 정보에 나오는 값으로 저장하시면 됩니다.

제 .env 파일은 아래와 같습니다.

NEXTAUTH_SECRET=qerkasjhfkauiqeywrhkasjhfksajfh
NEXTAUTH_URL=http://localhost:3000
SECRET_KEY=dkasdhfjahsdfjhskdfhaksdhfakjs
KAKAO_CLIENT_ID=700-----------------
KAKAO_CLIENT_SECRET=dkasdhfjahsdfjhskdfhaksdhfakjsdddddssaa
NAVER_CLIENT_ID=tEy-----------
NAVER_CLIENT_SECRET=Nb------------

DATABASE_URL="file:./dev.db"

'[...nextauth]/route.ts' 파일을 수정해 볼까요?

import KakaoProvider from "next-auth/providers/kakao";
import NaverProvider from "next-auth/providers/naver";\

...
...
...

    KakaoProvider({
      clientId: process.env.KAKAO_CLIENT_ID!,
      clientSecret: process.env.KAKAO_CLIENT_SECRET!,
    }),

    NaverProvider({
    clientId: process.env.NAVER_CLIENT_ID!,
    clientSecret: process.env.NAVER_CLIENT_SECRET!
  })

...
...
...

기존 코드는 같습니다.

'app/sigin/page.tsx' 파일에 네이버 로그인 추가하기 버튼을 추가합니다.

...
...
...

      <div className="space-y-4">
        <button
          className="w-full transform rounded-md bg-gray-700 px-4 py-2 tracking-wide text-white transition-colors duration-200 hover:bg-gray-600 focus:bg-gray-600 focus:outline-none"
          onClick={() => signIn("kakao", { redirect: true, callbackUrl: "/" })}
        >
          kakao login
        </button>
        <button
          className="w-full transform rounded-md bg-gray-700 px-4 py-2 tracking-wide text-white transition-colors duration-200 hover:bg-gray-600 focus:bg-gray-600 focus:outline-none"
          onClick={() => signIn("naver", { redirect: true, callbackUrl: "/" })}
        >
          naver login
        </button>
      </div>

...
...
...