Auth.js(NextAuth) OAuth 로그인 구현 및 세션 관리

2025년 01월 13일

4분

Next.js 15.1.0 버전을 기준으로 작성되었습니다.

들어가며

최근 본인의 일상을 업로드하는 블로그를 취미로 운영하는 사람이 많아진 것 같다. 개발 블로그는 티스토리나 벨로그를 많이 사용하는 반면 일상은 네이버 블로그를 사용하는 사람이 많다. 개인 일상만 네이버 블로그에 업로드 하는 것은 굉장히 귀찮기 때문에 내가 깃허브에서 팔로우하고 있는 사람만 열람이 가능한 게시글을 따로 만들기로 결정하였다. 이를 위해서 로그인 기능이 필요해졌다.

일반 개발 관련 게시글에 접속할 때는 로그인이 필요하지 않지만, 개인 일상과 관련된 게시글은 로그인하지 않으면 열람할 수 없도록 개발할 것이다.

이전에 로그인 기능 개발 시 Spring Security로 JWT 토큰을 발행하고 관리 했었지만 이번에는 Auth.js라는 간단하게 인증 처리를 할 수 있는 라이브러리가 있어서 사용해보기로 하였다.

초기 설정

Auth.js 설치

npm install next-auth@beta

환경 설정

npx auth secret

auth.ts 파일 생성

auth.ts

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [GitHub],
})

파일 위치 무관

다른 플랫폼은 여기를 참고해주세요

route.ts 파일 생성

./app/api/auth/[...nextauth]/route.ts

import { handlers } from "@/lib/auth"
export const { GET, POST } = handlers

디렉터리 위치 주의

GitHub APP 설정 (OAuth 설정)

GitHub App 등록은 여기를 눌러주세요

새로운 GitHub App 등록

GitHub App 등록

하단 Webhook은 해제하고 등록 하여준다

등록한 GitHub App 설정

GitHub App 설정

Client ID와 Secret Key를 복사해서 .env.local 파일에 넣어준다. 예시는 다음과 같다

.env.local

AUTH_SECRET=Secret
AUTH_GITHUB_ID=Client ID
AUTH_GITHUB_SECRET=Secret Key
NEXTAUTH_URL=http://localhost:3000

로그인 테스트

로그인 테스트를 위한 간단한 컴포넌트

import { signIn } from "@/lib/auth"
 
export default function SignIn() {
    return (
        <form
            action={async () => {
            "use server"
            await signIn("github")
            }}
        >
            <button type="submit">Signin with GitHub</button>
        </form>
    )
}

정상적으로 기능하는 것을 볼 수 있다.

세션 관리

Auth.js를 사용하면 아주 간단하게 세션을 관리할 수 있다.

세션 설정

layout.tsx

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html ...>
            <body ...>
                ...
                        <SessionProvider>
                            <Header />
                            <Suspense fallback={<Loading />}>
                                <main className="flex-1 min-h-screen pt-[64px] pb-[48px] relative">
                                    {children}
                                </main>
                            </Suspense>
                            <Footer />
                        </SessionProvider>
                    ...
            </body>
        </html>
    );
}

로그인 확인도 매우 쉽게 가능하다

로그인 확인

import { auth } from "@/auth"
 
export default async function Page() {
  const session = await auth()
  if (!session) return <div>Not authenticated</div>
 
  return (
    <div>
      <pre>{JSON.stringify(session, null, 2)}</pre>
    </div>
  )
}

이렇게하면 로그인 여부를 확인할 수 있을 것이다.