Auth.js | Installation

Auth.js 설치하기

먼저 사용 중인 프레임워크에 맞는 패키지를 설치합니다.

npm install next-auth@beta

pnpm add next-auth@beta

yarn add next-auth@beta

bun add next-auth@beta

npm run qwik add auth

pnpm run qwik add auth

yarn qwik add auth

bun run qwik add auth

npm install @auth/sveltekit

pnpm add @auth/sveltekit

yarn add @auth/sveltekit

bun add @auth/sveltekit

npm install @auth/express

pnpm add @auth/express

yarn add @auth/express

bun add @auth/express

@auth/core는 설치할 필요가 없습니다. 사용자는 @auth/core와 직접 상호작용할 일이 없습니다.

환경 설정

필수로 설정해야 하는 환경 변수는 AUTH_SECRET뿐입니다. 이 값은 라이브러리가 토큰과 이메일 인증 해시를 암호화하는 데 사용하는 임의의 값입니다. (자세한 내용은 배포 문서를 참고하세요.) 공식 Auth.js CLI를 실행하여 이 값을 생성할 수 있습니다:

npx auth secret

이 명령어는 프레임워크 규칙(예: Next.js의 .env.local)을 준수하며 .env 파일에 해당 값을 추가합니다.

설정하기

다음으로 Auth.js 설정 파일과 객체를 생성합니다. 이 파일에서 라이브러리의 동작을 제어하고 커스텀 인증 로직, 어댑터 등을 지정할 수 있습니다. 모든 프레임워크에서 프로젝트 내에 auth.ts 파일을 생성하는 것을 권장합니다. 이 파일에서는 프레임워크별 초기화 함수에 모든 옵션을 전달하고, 라우트 핸들러, 로그인 및 로그아웃 메서드 등을 내보냅니다.

이 파일은 원하는 이름으로 지을 수 있고, 원하는 위치에 배치할 수 있습니다. 여기서 제안하는 것은 단지 컨벤션일 뿐입니다.

먼저 앱의 루트에 새로운 auth.ts 파일을 생성하고 다음 내용을 추가합니다.

./auth.ts

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

/app/api/auth/[...nextauth]/route.ts 경로에 라우트 핸들러를 추가합니다.

💡

이 파일은 반드시 App Router 라우트 핸들러여야 하지만, 나머지 앱은 page/ 아래에 유지할 수 있습니다.

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

import { handlers } from "@/auth" // 방금 생성한 auth.ts 파일 참조
export const { GET, POST } = handlers

세션을 유지하기 위해 선택적으로 미들웨어를 추가합니다. 이 미들웨어는 호출될 때마다 세션 만료 시간을 업데이트합니다.

./middleware.ts

export { auth as middleware } from "@/auth"

src/routes 디렉토리에 새로운 plugin@auth.ts 파일을 생성하고 다음 내용을 추가합니다.

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [...],
  })
)

src/ 디렉토리에 새로운 auth.ts 파일을 생성하고 다음 내용을 추가합니다.

./src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit"
 
export const { handle } = SvelteKitAuth({
  providers: [],
})

SvelteKit의 src/hooks.server.ts 파일에서 handle 메서드를 다시 내보냅니다.

./src/hooks.server.ts

export { handle } from "./auth"

이 handle 함수는 event.locals에 auth() 메서드를 추가하며, 이는 모든 +layout.server.ts 또는 +page.server.ts 파일에서 사용할 수 있습니다. 따라서 load 함수에서 세션에 접근할 수 있습니다.

./src/routes/+layout.server.ts

import type { LayoutServerLoad } from "./$types"
 
export const load: LayoutServerLoad = async (event) => {
  const session = await event.locals.auth()
 
  return {
    session,
  }
}

ExpressAuth를 임포트하고 인증 라우트에 핸들러를 추가합니다.

./src/routes/auth.route.ts

import { ExpressAuth } from "@auth/express"
import express from "express"
 
const app = express()
 
// 앱이 프록시를 통해 제공되는 경우
// `X-Forwarded-*` 헤더를 읽을 수 있도록 프록시를 신뢰합니다.
app.set("trust proxy", true)
app.use("/auth/*", ExpressAuth({ providers: [] }))

이렇게 하면 Auth.js API가 생성되지만, 아직 리소스를 보호하지는 않습니다. 자세한 내용은 리소스 보호하기를 참조하세요.

인증 방법 설정

기본 설정이 완료되었습니다! 이제 첫 번째 인증 방법을 설정하고 providers 배열을 채워보겠습니다.

Migrate to NextAuth.js v5 인증

Auth.js 설치하기

환경 설정

설정하기

인증 방법 설정

About Auth.js

Download

Acknowledgements