[Next js 15] Oauth 구현 (Naver)

Typescript로 네이버 로그인 구현하기

기본 세팅

Callback URL을 다음과 같은 형식으로 지정해줘야 한다.

 

또한, .env 파일을 루트 폴더에 생성하여 NAVER_CLIENT_ID, NAVER_CLIENT_SECRET을 지정해줘야 한다. 그리고

next-auth.d.ts 파일을 만들어 타입을 관리해줘야 하는데 다음과 같다.

// Types/next-auth.d.ts

import NextAuth from "next-auth"
import { JWT } from "next-auth/jwt"

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: {
      email: string
      /** The user's postal address. */
      address: string
    }
  }
}

declare module "next-auth" {
  interface Session {
    accessToken?: string
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    accessToken?: string
  }
}

 

Session에 다른 속성들을 더 추가 가능하니 참고하길 바란다.

 

다음으로는 공식문서를 참고하면서 만들었다.

https://next-auth.js.org/getting-started/example

Getting Started | NextAuth.js

// app/api/[...nextauth]/route.ts
import NextAuth from "next-auth"
import NaverProvider from "next-auth/providers/naver";

const handler = NextAuth({
    providers: [
        NaverProvider({
          clientId: process.env.NAVER_CLIENT_ID!,
          clientSecret: process.env.NAVER_CLIENT_SECRET!
        })
      ],
      session: { strategy: "jwt" },
      callbacks: {
        async session({ session, token }) {
          if (token?.accessToken) session.accessToken = token.accessToken
          return session
        },
      },
})

export { handler as GET, handler as POST }

 

// /Components/LoginBtn
import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn("naver")}>Sign in</button>
    </>
  )
}

 

// /login/page.tsx
'use client'

import LoginBtn from "../Components/LoginBtn"
import { SessionProvider } from "next-auth/react"

export default function Login() {
    return (
      <div>
        <input id="id" placeholder="ID"></input>
        <input id="pw" placeholder="비밀번호"></input>
        <SessionProvider>
          <LoginBtn></LoginBtn>
        </SessionProvider>
        
        
      </div>
    )
  }

이후 서버를 동작하면 로그인과 로그아웃이 잘 되는 것을 확인할 수 있다.