NextAuth를 이용한 Naver 로그인

Byeonghyeon·2024년 3월 28일

MINE NextAuth next.js

MINE

목록 보기

2/10

회원가입을 구현하기 위해 생각하던 중 한 라이브러리에 대해 알게 되었다.

NextAuth라는 이 라이브러리는 Next.JS 애플리케이션에서 사용자 인증을 손쉽게 구현할 수 있도록 도와주는 라이브러리이다. 다양한 소셜 로그인을 지원하며, 자체 로그인 또한 구현할 수 있도록 도와준다.

자세한 내용은 NextAuth 공식 홈페이지를 참고하도록 하자.

내가 해당 내용에 대해 도움을 받은 곳이 있다.

NextAuth 사용법

이곳이다. 자세한 내용은 이곳을 참고하도록 하자.

라이브러리 설치

npm install next-auth

NextAuth 설정

route.ts 파일 생성

app/api/auth/[...nextauth]/ 경로에 route.ts 파일을 생성해준다.

import NextAuth from 'next-auth/next'

const handler = NextAuth({})

export { handler as GET, handler as POST }

Naver 로그인 설정

나는 네이버 로그인 api를 이용할 것이니까 네이버 개발자 센터에서 앱 등록을 하자.

홈 페이지 > 네이버 로그인 > 오픈 API 이용 신청 > 약관동의 > 본인인증

애플리케이션 등록 시 필요한 제공 정보를 체크한다.

그 후 서비스 URL을 등록한다.

서비스 URL : http://localhost:3000
Callback URL : http://localhost:3000/api/auth/callback/naver

등록 후 Client ID와 Client Secretㅇ르 발급받는다.

import NextAuth from "next-auth/next";
import NaverProvider from "next-auth/providers/naver";

const handler = NextAuth({
  providers: [
    NaverProvider({
        clientId: process.env.NAVER_CLIENT_ID || "",
        clientSecret: process.env.NAVER_CLIENT_SECRET || ""
    }),


  pages: {
    signIn: "/signin",
  },

});

export { handler as GET, handler as POST };

route.ts로 돌아와 해당 내용을 추가해주자.

최상위 폴더에 .env 파일을 생성해 해당 내용을 추가한다.

NAVER_CLIENT_ID=xxxxxxxxxxxxxxxx
NAVER_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxx

Providers 설정

"use client";

import { SessionProvider } from "next-auth/react";
import React, { ReactNode } from "react";

interface Props {
  children: ReactNode;
}
function Providers({ children }: Props) {
  return <SessionProvider>{children}</SessionProvider>;
}

export default Providers;

Providers.tsx를 생성한 후 해당 내용을 적어주자.

//app/layout.tsx

import Providers from "./components/Providers";
import "./globals.css";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

layout.tsx 파일에 childern을 Providers 컴포넌트로 감싸주자.

로그인 버튼

"use client";

import Link from "next/link";
import { signIn, signOut, useSession } from "next-auth/react";
import Image from "next/image";


const Navbar = () => {
  const {data: session} = useSession();

  return (
    <header className="fixed left-0 right-0 top-0 bg-gray-800 py-4 z-50 user-not-selectable">
      <nav className="container mx-auto flex items-center justify-between">
        <p className="font-bold text-white">MINE</p>
        <ul className="flex items-center justify-end space-x-4">
          <li>
            <Link href="/">
              <p className="text-white">홈</p>
            </Link>
          </li>
          {session ? 
                (   
                    <ul className="flex items-center justify-end space-x-4">
                        <li>
                            <Link href="/mypage"><p className="text-white cursor-pointer">{session.user.name} 님</p></Link>
                        </li>
                        <li>
                            <p className="text-white cursor-pointer" onClick={() => signOut()}>{<Image src="/btnD_logout.png" alt="logout" width={122} height={40} />}</p>
                        </li>
                    </ul>
                ) 
              : 
                (
                    <li>
                        <p className="text-white cursor-pointer" onClick={() => signIn("naver", { redirect: true, callbackUrl: "/" })}><Image src="/btnD_login.png" alt="login" width={110} height={40} /></p>
                    </li>
                )
            }
        </ul>
      </nav>
    </header>
  );
};