リソースの保護

ルートの保護は、一般的にセッションを確認し、アクティブなセッションが見つからない場合（ログインページへのリダイレクト、または401: 認証されていないレスポンスの返却など）にアクションを実行することで実現できます。

ページ

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を使用して、sessionをプロップとしてページに返します。

./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ローダーを使用して現在のsessionStorageを取得できます。

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"
 
// This route is protected
app.get("/profile", authenticatedUser, (req, res) => {
  const { session } = res.locals
  res.render("profile", { user: session?.user })
})
 
// This route is not protected
app.get("/", (req, res) => {
  res.render("index")
})
 
app.use("/", root)

APIルート

さまざまなフレームワークでの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: Update once server-side API methods are implemented for pages router again
 
// 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" })
}

セッションデータはルートイベントの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ルートは、SvelteKitの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 }) => {
      // Logged in users are authenticated, otherwise redirect to login page
      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設定エクスポートで定義されたページを保護します。matcherの詳細については、Next.jsドキュメントを参照してください。

💡

認証にはミドルウェアだけに依存しないでください。データのフェッチにできるだけ近い時点で、セッションが常に検証されるようにしてください。

セッション取得カスタムページ

リソースの保護

ページ

APIルート

Next.jsミドルウェア

Auth.jsについて

ダウンロード

謝辞