리소스 보호

라우트를 보호하는 일반적인 방법은 세션을 확인하고, 활성 세션이 없을 때 사용자를 로그인 페이지로 리다이렉트하거나 401: Unauthenticated 응답을 반환하는 것입니다.

Pages

auth.ts 또는 auth.js 설정 파일에서 내보낸 NextAuth()의 auth 함수를 사용하여 세션 객체를 가져올 수 있습니다.

app/server/page.tsx

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>
  )
}

Next.js Pages 라우터에서 페이지를 보호하기 위해 getServerSideProps에서 auth를 사용하여 세션을 페이지에 props로 전달할 수 있습니다.

./pages/dashboard.tsx

import { auth } from "../auth"
 
export default function Dashboard({ session }) {
  if (!session.user) return <div>Not authenticated</div>
 
  return <div>{JSON.stringify(session, null, 2)}</div>
}
 
export async function getServerSideProps(ctx) {
  const session = await auth(ctx)
 
  return {
    props: {
      session,
    },
  }
}

클라이언트 측에서 useSession()을 사용하여 세션에 접근하려면, <SessionProvider />가 애플리케이션을 감싸고 있는지 확인하세요.

./pages/_app.tsx

import type { AppProps } from "next/app"
import { SessionProvider } from "next-auth/react"
 
export default function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />;
    </SessionProvider>
  )
}

컴포넌트 내부에서 useSession 로더를 사용하여 현재 세션 스토리지를 가져올 수 있습니다.

import { component$ } from '@builder.io/qwik';
import { useSession } from '~/routes/plugin@auth';
 
export default component$(() => {
  const session = useSession();
  return <p>{session.value?.user?.email}</p>;
});

SvelteKit에서는 hooks.server.ts에서 가져와 사용하는 Auth.js handle 함수에 의해 추가된 event.locals.auth() 함수를 활용할 수 있습니다.

서버 측에서 event.locals.auth()를 호출하여 +page.server.ts 또는 +layout.server.ts 파일에서 세션을 확인하고, 요청을 허용하거나 /login 페이지로 리디렉션할 수 있습니다.

src/routes/dashboard/+page.server.ts

import { fail, redirect } from "@sveltejs/kit"
import type { PageServerLoad } from "./$types"
 
export const load: PageServerLoad = async (event) => {
  const session = await event.locals.auth()
 
  if (!session?.user?.userId) {
    return fail(401, { type: "error", error: "Unauthenticated" })
  }
 
  return {
    session,
  }
}

세션의 존재를 확인하여 라우트를 보호하고, 세션이 없으면 로그인 페이지로 리디렉션할 수 있습니다. 이는 각 라우트마다 또는 미들웨어를 사용하여 라우트 그룹에 대해 수행할 수 있습니다.

lib.ts

import { getSession } from "@auth/express"
 
export async function authenticatedUser(
  req: Request,
  res: Response,
  next: NextFunction
) {
  const session = res.locals.session ?? (await getSession(req, authConfig))
  if (!session?.user) {
    res.redirect("/login")
  } else {
    next()
  }
}

app.ts

import { authenticatedUser } from "./lib.ts"
 
// 이 라우트는 보호됩니다
app.get("/profile", authenticatedUser, (req, res) => {
  const { session } = res.locals
  res.render("profile", { user: session?.user })
})
 
// 이 라우트는 보호되지 않습니다
app.get("/", (req, res) => {
  res.render("index")
})
 
app.use("/", root)

API Routes

다양한 프레임워크에서 API 라우트를 보호하는 것도 auth 내보내기를 사용해 할 수 있습니다.

Next.js에서는 auth 함수를 사용해 API 라우트 핸들러를 감쌀 수 있습니다. 그러면 요청 매개변수에 auth 키가 생기고, 이를 통해 유효한 세션을 확인할 수 있습니다.

./app/api/admin/route.ts

import { auth } from "@/auth"
import { NextResponse } from "next/server"
 
export const GET = auth(function GET(req) {
  if (req.auth) return NextResponse.json(req.auth)
  return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
})

./pages/api/admin.ts

// TODO: 페이지 라우터용 서버 사이드 API 메서드가 다시 구현되면 업데이트 예정
 
// import { auth } from "../../auth"
// import { getSession } from "next-auth/react"
import { NextApiRequest, NextApiResponse } from "next"
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // const session = await auth(req, res)
  // const session = await getSession(req, res)
  const url = `${req.headers["x-forwarded-proto"]}://${req.headers.host}/api/auth/session`
 
  const sessionRes = await fetch(url)
  const session = await sessionRes.json()
 
  if (!session.user) {
    return res.status(401).json({ message: "Not authenticated" })
  }
 
  return res.json({ data: "Protected data" })
}

세션 데이터는 route event.sharedMap을 통해 접근할 수 있습니다. 따라서 layout.tsx나 page index.tsx에 다음과 같이 보호된 라우트를 만들고 리다이렉트할 수 있습니다:

export const onRequest: RequestHandler = (event) => {
  const session = event.sharedMap.get("session")
  if (!session || new Date(session.expires) < new Date()) {
    throw event.redirect(302, `/`)
  }
}

SvelteKit의 API 라우트는 Auth.js의 다른 서버 사이드 파일과 동일하게 작동합니다. +server.ts 파일에서 event.locals.auth()를 호출해 세션에 접근할 수 있습니다.

src/routes/api/users/+server.ts

import type { RequestHandler } from "./$types"
 
export const GET: RequestHandler = async (event) => {
  const session = await event.locals.auth()
 
  if (!session?.user?.userId) {
    return new Response(null, { status: 401, statusText: "Unauthorized" })
  }
}

Next.js 미들웨어

Next.js 12 이상에서는 페이지를 보호하는 가장 쉬운 방법은 미들웨어 파일을 사용하는 것입니다. 루트 페이지 디렉토리에 middleware.ts 파일을 생성하고 다음과 같이 작성할 수 있습니다.

middleware.ts

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

그런 다음 auth.ts 파일에서 authorized 콜백을 정의합니다. 자세한 내용은 참조 문서를 확인하세요.

auth.ts

import NextAuth from "next-auth"
 
export const { auth, handlers } = NextAuth({
  callbacks: {
    authorized: async ({ auth }) => {
      // 로그인한 사용자는 인증된 상태, 그렇지 않으면 로그인 페이지로 리다이렉트
      return !!auth
    },
  },
})

미들웨어 내부에서 더 많은 로직을 구현하고 싶다면 auth 메서드를 래퍼로 사용할 수도 있습니다.

middleware.ts

import { auth } from "@/auth"
 
export default auth((req) => {
  if (!req.auth && req.nextUrl.pathname !== "/login") {
    const newUrl = new URL("/login", req.nextUrl.origin)
    return Response.redirect(newUrl)
  }
})

여러 라우트를 매칭하기 위해 정규식을 사용하거나 특정 라우트를 제외하여 나머지 모든 라우트를 보호할 수도 있습니다. 다음 예제는 파비콘이나 정적 이미지와 같은 경로에서 미들웨어가 실행되지 않도록 합니다.

middleware.ts

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
}

미들웨어는 matcher 설정에 따라 페이지를 보호합니다. 매처에 대한 자세한 내용은 Next.js 문서를 참조하세요.

💡

권한 부여를 위해 미들웨어에만 의존해서는 안 됩니다. 항상 데이터를 가져오는 부분에서 세션을 검증하는 것이 중요합니다.

세션 가져오기 커스텀 페이지

리소스 보호

Pages

API Routes

Next.js 미들웨어

About Auth.js

Download

Acknowledgements