コンテンツへスキップ
App Routerアプリケーションの構築認証

認証

アプリケーションのデータを保護するために、認証を理解することは非常に重要です。このページでは、認証を実装するために使用するReactとNext.jsの機能について説明します。

開始する前に、プロセスを3つの概念に分解すると役立ちます。

  1. 認証：ユーザーが本人であることを確認します。ユーザー名とパスワードなど、ユーザーが持っているもので身元を証明する必要があります。
  2. セッション管理：リクエスト間でユーザーの認証状態を追跡します。
  3. 認可：ユーザーがアクセスできるルートとデータを決定します。

この図は、ReactとNext.jsの機能を使用した認証フローを示しています。

Diagram showing the authentication flow with React and Next.js features

このページの例では、教育目的で基本的なユーザー名とパスワードによる認証について説明しています。カスタム認証ソリューションを実装できますが、セキュリティと簡素化のために、認証ライブラリを使用することをお勧めします。これらは、認証、セッション管理、認可のためのビルトインソリューションに加えて、ソーシャルログイン、多要素認証、ロールベースのアクセス制御などの追加機能を提供します。認証ライブラリセクションにリストがあります。

認証

サインアップとログイン機能

Reactの<form>要素と、サーバーアクションおよびuseFormStateを使用して、ユーザー資格情報の取得、フォームフィールドの検証、認証プロバイダーのAPIまたはデータベースへの呼び出しを行うことができます。

サーバーアクションは常にサーバー上で実行されるため、認証ロジックを処理するための安全な環境を提供します。

サインアップ/ログイン機能を実装する手順は次のとおりです。

1. ユーザー資格情報の取得

ユーザー資格情報を取得するには、送信時にサーバーアクションを呼び出すフォームを作成します。たとえば、ユーザーの名前、メールアドレス、パスワードを受け入れるサインアップフォームです。

app/ui/signup-form.tsx
import { signup } from '@/app/actions/auth'
 
export function SignupForm() {
  return (
    <form action={signup}>
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" name="name" placeholder="Name" />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" name="email" type="email" placeholder="Email" />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input id="password" name="password" type="password" />
      </div>
      <button type="submit">Sign Up</button>
    </form>
  )
}
app/actions/auth.tsx
export async function signup(formData: FormData) {}

2. サーバーでのフォームフィールドの検証

サーバーアクションを使用して、サーバー上でフォームフィールドを検証します。認証プロバイダーがフォーム検証を提供していない場合は、ZodやYupのようなスキーマ検証ライブラリを使用できます。

例としてZodを使用すると、適切なエラーメッセージを含むフォームスキーマを定義できます。

app/lib/definitions.ts
import { z } from 'zod'
 
export const SignupFormSchema = z.object({
  name: z
    .string()
    .min(2, { message: 'Name must be at least 2 characters long.' })
    .trim(),
  email: z.string().email({ message: 'Please enter a valid email.' }).trim(),
  password: z
    .string()
    .min(8, { message: 'Be at least 8 characters long' })
    .regex(/[a-zA-Z]/, { message: 'Contain at least one letter.' })
    .regex(/[0-9]/, { message: 'Contain at least one number.' })
    .regex(/[^a-zA-Z0-9]/, {
      message: 'Contain at least one special character.',
    })
    .trim(),
})
 
export type FormState =
  | {
      errors?: {
        name?: string[]
        email?: string[]
        password?: string[]
      }
      message?: string
    }
  | undefined

認証プロバイダーのAPIやデータベースへの不要な呼び出しを防ぐために、定義されたスキーマと一致しないフォームフィールドがある場合は、サーバーアクションで早期にreturnできます。

app/actions/auth.ts
import { SignupFormSchema, FormState } from '@/app/lib/definitions'
 
export async function signup(state: FormState, formData: FormData) {
  // Validate form fields
  const validatedFields = SignupFormSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    password: formData.get('password'),
  })
 
  // If any form fields are invalid, return early
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
    }
  }
 
  // Call the provider or db to create a user...
}

<SignupForm />に戻ると、ReactのuseFormStateフックを使用して、フォームの送信中に検証エラーを表示できます。

app/ui/signup-form.tsx
'use client'
 
import { useFormState, useFormStatus } from 'react-dom'
import { signup } from '@/app/actions/auth'
 
export function SignupForm() {
  const [state, action] = useFormState(signup, undefined)
 
  return (
    <form action={action}>
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" name="name" placeholder="Name" />
      </div>
      {state?.errors?.name && <p>{state.errors.name}</p>}
 
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" name="email" placeholder="Email" />
      </div>
      {state?.errors?.email && <p>{state.errors.email}</p>}
 
      <div>
        <label htmlFor="password">Password</label>
        <input id="password" name="password" type="password" />
      </div>
      {state?.errors?.password && (
        <div>
          <p>Password must:</p>
          <ul>
            {state.errors.password.map((error) => (
              <li key={error}>- {error}</li>
            ))}
          </ul>
        </div>
      )}
      <SubmitButton />
    </form>
  )
}
 
function SubmitButton() {
  const { pending } = useFormStatus()
 
  return (
    <button disabled={pending} type="submit">
      Sign Up
    </button>
  )
}

知っておくと良い点

  • これらの例では、Next.js App RouterにバンドルされているReactのuseFormStateフックを使用しています。React 19を使用している場合は、代わりにuseActionStateを使用してください。Reactのドキュメントで詳細情報をご覧ください。
  • React 19では、useFormStatusは、data、method、actionなどの追加キーを返されるオブジェクトに含みます。React 19を使用していない場合、pendingキーのみが使用できます。
  • React 19では、useActionStateも返される状態にpendingキーを含みます。
  • データを変更する前に、ユーザーがアクションを実行する権限を持っていることを常に確認する必要があります。認証と認可を参照してください。

3. ユーザーの作成またはユーザー資格情報の確認

フォームフィールドの検証後、認証プロバイダーのAPIまたはデータベースを呼び出すことで、新しいユーザーアカウントを作成したり、ユーザーが存在するかどうかを確認できます。

前の例からの続き

app/actions/auth.tsx
export async function signup(state: FormState, formData: FormData) {
  // 1. Validate form fields
  // ...
 
  // 2. Prepare data for insertion into database
  const { name, email, password } = validatedFields.data
  // e.g. Hash the user's password before storing it
  const hashedPassword = await bcrypt.hash(password, 10)
 
  // 3. Insert the user into the database or call an Auth Library's API
  const data = await db
    .insert(users)
    .values({
      name,
      email,
      password: hashedPassword,
    })
    .returning({ id: users.id })
 
  const user = data[0]
 
  if (!user) {
    return {
      message: 'An error occurred while creating your account.',
    }
  }
 
  // TODO:
  // 4. Create user session
  // 5. Redirect user
}

ユーザーアカウントの作成またはユーザー資格情報の検証に成功した後、ユーザーの認証状態を管理するためのセッションを作成できます。セッション管理戦略によっては、セッションはCookieまたはデータベース、あるいはその両方で保存できます。詳細については、セッション管理セクションに進んでください。

ヒント

  • 上記の例は、教育目的で認証手順を詳細に説明しているため冗長です。これは、独自の安全なソリューションを実装すると、すぐに複雑になる可能性があることを強調しています。認証ライブラリを使用してプロセスを簡素化することを検討してください。
  • ユーザーエクスペリエンスを向上させるために、登録フローの早い段階で重複するメールアドレスやユーザー名をチェックすることを検討できます。たとえば、ユーザーがユーザー名を入力しているときや、入力フィールドのフォーカスが外れたときなどです。これにより、不要なフォーム送信を防ぎ、ユーザーにすぐにフィードバックを提供できます。use-debounceなどのライブラリを使用して、これらのチェックの頻度を管理できます。

セッション管理

セッション管理は、ユーザーの認証状態がリクエスト間で保持されるようにします。セッションまたはトークンの作成、保存、更新、削除が含まれます。

2種類のセッションがあります。

  1. ステートレス：セッションデータ（またはトークン）はブラウザーのCookieに保存されます。Cookieは各リクエストで送信され、サーバーでセッションを検証できるようにします。この方法はシンプルですが、正しく実装されていない場合はセキュリティが低下する可能性があります。
  2. データベース：セッションデータはデータベースに保存され、ユーザーのブラウザーは暗号化されたセッションIDのみを受け取ります。この方法はより安全ですが、複雑で、より多くのサーバーリソースを使用する可能性があります。

知っておくと良い点：どちらの方法も、または両方を使用できますが、iron-sessionまたはJoseなどのセッション管理ライブラリを使用することをお勧めします。

ステートレスセッション

ステートレスセッションを作成および管理するには、いくつかの手順に従う必要があります。

  1. セッションの署名に使用される秘密鍵を生成し、環境変数として保存します。
  2. セッション管理ライブラリを使用してセッションデータを暗号化/復号化するロジックを作成します。
  3. Next.jsのcookiesAPIを使用してCookieを管理します。

上記の他に、ユーザーがアプリケーションに戻ったときにセッションを更新（または更新）し、ユーザーがログアウトしたときにセッションを削除する機能を追加することを検討してください。

知っておくと良い点：認証ライブラリにセッション管理が含まれているかどうかを確認してください。

1. 秘密鍵の生成

セッションに署名するための秘密鍵を生成するには、いくつかの方法があります。たとえば、ターミナルでopensslコマンドを使用することを選択できます。

ターミナル
openssl rand -base64 32

このコマンドは、秘密鍵として使用でき、環境変数ファイルに保存できる32文字のランダム文字列を生成します。

.env
SESSION_SECRET=your_secret_key

次に、セッション管理ロジックでこのキーを参照できます。

app/lib/session.js
const secretKey = process.env.SESSION_SECRET

2. セッションの暗号化と復号化

次に、お好みのセッション管理ライブラリを使用して、セッションを暗号化および復号化できます。前の例から続けて、Jose（Edgeランタイムと互換性があります）とReactのserver-onlyパッケージを使用して、セッション管理ロジックがサーバーでのみ実行されるようにします。

app/lib/session.ts
import 'server-only'
import { SignJWT, jwtVerify } from 'jose'
import { SessionPayload } from '@/app/lib/definitions'
 
const secretKey = process.env.SESSION_SECRET
const encodedKey = new TextEncoder().encode(secretKey)
 
export async function encrypt(payload: SessionPayload) {
  return new SignJWT(payload)
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
    .setExpirationTime('7d')
    .sign(encodedKey)
}
 
export async function decrypt(session: string | undefined = '') {
  try {
    const { payload } = await jwtVerify(session, encodedKey, {
      algorithms: ['HS256'],
    })
    return payload
  } catch (error) {
    console.log('Failed to verify session')
  }
}

ヒント:

  • ペイロードには、ユーザーID、ロールなど、後続のリクエストで使用される最小限の一意のユーザーデータを含める必要があります。電話番号、メールアドレス、クレジットカード情報などの個人を特定できる情報、またはパスワードなどの機密データを含めるべきではありません。

セッションをCookieに保存するには、Next.jsのcookies APIを使用します。Cookieはサーバー側で設定し、推奨オプションを含める必要があります。

  • HttpOnly: クライアント側のJavaScriptからのCookieへのアクセスを防止します。
  • Secure: Cookieを送信するためにhttpsを使用します。
  • SameSite: クロスサイトリクエストでCookieを送信できるかどうかを指定します。
  • Max-AgeまたはExpires: 一定期間後にCookieを削除します。
  • Path: CookieのURLパスを定義します。

これらのオプションの詳細については、MDNを参照してください。

app/lib/session.ts
import 'server-only'
import { cookies } from 'next/headers'
 
export async function createSession(userId: string) {
  const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
  const session = await encrypt({ userId, expiresAt })(await cookies()).set(
    'session',
    session,
    {
      httpOnly: true,
      secure: true,
      expires: expiresAt,
      sameSite: 'lax',
      path: '/',
    }
  )
}

サーバーアクションに戻って、createSession()関数を呼び出し、redirect() APIを使用してユーザーを適切なページにリダイレクトできます。

app/actions/auth.ts
import { createSession } from '@/app/lib/session'
 
export async function signup(state: FormState, formData: FormData) {
  // Previous steps:
  // 1. Validate form fields
  // 2. Prepare data for insertion into database
  // 3. Insert the user into the database or call an Library API
 
  // Current steps:
  // 4. Create user session
  await createSession(user.id)
  // 5. Redirect user
  redirect('/profile')
}

ヒント:

  • クライアント側の改ざんを防ぐために、Cookieはサーバー側で設定する必要があります。
  • 🎥動画：Next.jsを使用したステートレスセッションと認証の詳細はこちら→ YouTube（11分）.

セッションの更新（またはリフレッシュ）

セッションの有効期限を延長することもできます。これは、ユーザーがアプリケーションに再度アクセスした後もログイン状態を維持する場合に便利です。例えば、

app/lib/session.ts
import 'server-only'
import { cookies } from 'next/headers'
import { decrypt } from '@/app/lib/session'
 
export async function updateSession() {
  const session = (await cookies()).get('session')?.value
  const payload = await decrypt(session)
 
  if (!session || !payload) {
    return null
  }
 
  const expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
 
  const cookieStore = await cookies()
  cookieStore().set('session', session, {
    httpOnly: true,
    secure: true,
    expires: expires,
    sameSite: 'lax',
    path: '/',
  })
}

ヒント：認証ライブラリがリフレッシュトークンをサポートしているかどうかを確認してください。リフレッシュトークンは、ユーザーのセッションを延長するために使用できます。

セッションの削除

セッションを削除するには、Cookieを削除します。

app/lib/session.ts
import 'server-only'
import { cookies } from 'next/headers'
 
export async function deleteSession() {
  const cookieStore = await cookies()
  cookieStore().delete('session')
}

その後、ログアウト時など、アプリケーションでdeleteSession()関数を再利用できます。

app/actions/auth.ts
import { cookies } from 'next/headers'
import { deleteSession } from '@/app/lib/session'
 
export async function logout() {
  deleteSession()
  redirect('/login')
}

データベースセッション

データベースセッションを作成および管理するには、次の手順に従います。

  1. セッションデータとユーザーデータを保存するためのテーブルをデータベースに作成します（または、認証ライブラリがこれらを処理しているかどうかを確認します）。
  2. セッションの挿入、更新、削除機能を実装します。
  3. ユーザーのブラウザに保存する前にセッションIDを暗号化し、データベースとCookieが同期していることを確認します（これはオプションですが、ミドルウェアでの楽観的認証チェックには推奨されます）。

例えば、

app/lib/session.ts
import cookies from 'next/headers'
import { db } from '@/app/lib/db'
import { encrypt } from '@/app/lib/session'
 
export async function createSession(id: number) {
  const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
 
  // 1. Create a session in the database
  const data = await db
    .insert(sessions)
    .values({
      userId: id,
      expiresAt,
    })
    // Return the session ID
    .returning({ id: sessions.id })
 
  const sessionId = data[0].id
 
  // 2. Encrypt the session ID
  const session = await encrypt({ sessionId, expiresAt })
 
  // 3. Store the session in cookies for optimistic auth checks
  const cookieStore = await cookies()
  cookieStore().set('session', session, {
    httpOnly: true,
    secure: true,
    expires: expiresAt,
    sameSite: 'lax',
    path: '/',
  })
}

ヒント:

  • より高速なデータ取得のために、Vercel Redisなどのデータベースの使用を検討できます。ただし、プライマリデータベースにセッションデータを保持し、データリクエストを組み合わせることでクエリ数を減らすこともできます。
  • ユーザーの最後のログイン時刻やアクティブなデバイスの数などを追跡したり、ユーザーがすべてのデバイスからログアウトできるようにするなど、より高度なユースケースには、データベースセッションを使用することを選択できます。

セッション管理を実装したら、ユーザーがアプリケーション内でアクセスおよび実行できるものを制御するための認証ロジックを追加する必要があります。詳細は認証セクションを参照してください。

認証

ユーザーが認証され、セッションが作成されると、アプリケーション内でユーザーがアクセスおよび実行できるものを制御するための認証を実装できます。

認証チェックには主に2つの種類があります。

  1. 楽観的チェック: Cookieに保存されたセッションデータを使用して、ユーザーがルートにアクセスしたり、アクションを実行したりする権限があるかどうかをチェックします。これらのチェックは、UI要素の表示/非表示や、権限またはロールに基づいてユーザーのリダイレクトなど、迅速な操作に役立ちます。
  2. セキュアチェック: データベースに保存されたセッションデータを使用して、ユーザーがルートにアクセスしたり、アクションを実行したりする権限があるかどうかをチェックします。これらのチェックはより安全であり、機密データまたはアクションへのアクセスを必要とする操作に使用されます。

どちらの場合も、次のことをお勧めします。

ミドルウェアを使用した楽観的チェック（オプション）

ミドルウェアを使用して、権限に基づいてユーザーをリダイレクトする場合があります。

  • 楽観的チェックを実行します。ミドルウェアはすべてのルートで実行されるため、リダイレクトロジックを集中化し、不正なユーザーを事前にフィルタリングするのに適した方法です。
  • ユーザー間でデータを共有する静的ルート（例：有料コンテンツ）を保護するため。

ただし、ミドルウェアはプリフェッチされたルートを含むすべてのルートで実行されるため、パフォーマンスの問題を防ぐために、Cookieからセッションを読み取る（楽観的チェック）だけで、データベースチェックを避けることが重要です。

例えば、

middleware.ts
import { NextRequest, NextResponse } from 'next/server'
import { decrypt } from '@/app/lib/session'
import { cookies } from 'next/headers'
 
// 1. Specify protected and public routes
const protectedRoutes = ['/dashboard']
const publicRoutes = ['/login', '/signup', '/']
 
export default async function middleware(req: NextRequest) {
  // 2. Check if the current route is protected or public
  const path = req.nextUrl.pathname
  const isProtectedRoute = protectedRoutes.includes(path)
  const isPublicRoute = publicRoutes.includes(path)
 
  // 3. Decrypt the session from the cookie
  const cookie = (await cookies()).get('session')?.value
  const session = await decrypt(cookie)
 
  // 4. Redirect to /login if the user is not authenticated
  if (isProtectedRoute && !session?.userId) {
    return NextResponse.redirect(new URL('/login', req.nextUrl))
  }
 
  // 5. Redirect to /dashboard if the user is authenticated
  if (
    isPublicRoute &&
    session?.userId &&
    !req.nextUrl.pathname.startsWith('/dashboard')
  ) {
    return NextResponse.redirect(new URL('/dashboard', req.nextUrl))
  }
 
  return NextResponse.next()
}
 
// Routes Middleware should not run on
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}

ミドルウェアは最初のチェックに役立ちますが、データ保護の唯一の防衛手段ではありません。セキュリティチェックの大部分は、データソースにできるだけ近い場所で実行する必要があります。データアクセスレイヤーの詳細については、を参照してください。

ヒント:

  • ミドルウェアでは、req.cookies.get('session').valueを使用してCookieを読み取ることもできます。
  • ミドルウェアはEdgeランタイムを使用します。認証ライブラリとセッション管理ライブラリが互換性があることを確認してください。
  • ミドルウェアでmatcherプロパティを使用して、ミドルウェアを実行するルートを指定できます。ただし、認証の場合は、すべてのルートでミドルウェアを実行することをお勧めします。

データアクセスレイヤー（DAL）の作成

データリクエストと認証ロジックを集中化するために、DALを作成することをお勧めします。

DALには、ユーザーがアプリケーションと対話する際にユーザーのセッションを確認する関数が含まれている必要があります。少なくとも、この関数はセッションの有効性をチェックし、ユーザー情報を返してさらにリクエストを行う必要があります。

たとえば、verifySession()関数をincludeしたDAL用の別々のファイルを作成します。次に、ReactのcacheAPIを使用して、Reactレンダリングパス中に関数の戻り値をメモ化します。

app/lib/dal.ts
import 'server-only'
 
import { cookies } from 'next/headers'
import { decrypt } from '@/app/lib/session'
 
export const verifySession = cache(async () => {
  const cookie = (await cookies()).get('session')?.value
  const session = await decrypt(cookie)
 
  if (!session?.userId) {
    redirect('/login')
  }
 
  return { isAuth: true, userId: session.userId }
})

その後、データリクエスト、サーバーアクション、ルートハンドラーでverifySession()関数を呼び出すことができます。

app/lib/dal.ts
export const getUser = cache(async () => {
  const session = await verifySession()
  if (!session) return null
 
  try {
    const data = await db.query.users.findMany({
      where: eq(users.id, session.userId),
      // Explicitly return the columns you need rather than the whole user object
      columns: {
        id: true,
        name: true,
        email: true,
      },
    })
 
    const user = data[0]
 
    return user
  } catch (error) {
    console.log('Failed to fetch user')
    return null
  }
})

ヒント:

  • DALはリクエスト時にフェッチされたデータを保護するために使用できます。ただし、ユーザー間でデータを共有する静的ルートの場合、データはリクエスト時ではなくビルド時にフェッチされます。静的ルートを保護するにはミドルウェアを使用します。
  • セキュアチェックの場合、セッションIDとデータベースを比較することで、セッションの有効性を確認できます。レンダリングパス中にデータベースへの不要な重複リクエストを避けるために、Reactのcache関数を使用します。
  • 関連するデータリクエストを、メソッドの前にverifySession()を実行するJavaScriptクラスに統合することを検討できます。

データ転送オブジェクト（DTO）の使用

データを取得する際には、アプリケーションで使用される必要なデータのみを返し、オブジェクト全体を返さないことをお勧めします。たとえば、ユーザーデータを取得する場合、パスワード、電話番号などを含むユーザーオブジェクト全体ではなく、ユーザーIDと名前のみを返すことができます。

ただし、返されるデータ構造を制御できない場合、またはチームでクライアントにオブジェクト全体を渡したくない場合は、クライアントに公開しても安全なフィールドを指定するなどの戦略を使用できます。

app/lib/dto.ts
import 'server-only'
import { getUser } from '@/app/lib/dal'
 
function canSeeUsername(viewer: User) {
  return true
}
 
function canSeePhoneNumber(viewer: User, team: string) {
  return viewer.isAdmin || team === viewer.team
}
 
export async function getProfileDTO(slug: string) {
  const data = await db.query.users.findMany({
    where: eq(users.slug, slug),
    // Return specific columns here
  })
  const user = data[0]
 
  const currentUser = await getUser(user.id)
 
  // Or return only what's specific to the query here
  return {
    username: canSeeUsername(currentUser) ? user.username : null,
    phonenumber: canSeePhoneNumber(currentUser, user.team)
      ? user.phonenumber
      : null,
  }
}

データリクエストと承認ロジックをDALに集約し、DTOを使用することで、すべてのリクエストのセキュリティと一貫性を確保できます。これにより、アプリケーションの規模拡大に伴う保守、監査、デバッグが容易になります。

知っておくと良い点:

  • DTOの定義方法はいくつかあります。`toJSON()`を使用する方法、上記の例のような個別の関数を使用する方法、JSクラスを使用する方法などがあります。これらはJavaScriptのパターンであり、ReactやNext.js固有の機能ではないため、アプリケーションに最適なパターンを調査することをお勧めします。
  • セキュリティベストプラクティスについては、弊社のNext.jsセキュリティに関する記事をご覧ください。

サーバーコンポーネント[icon]

サーバーコンポーネントにおける認証チェックは、ロールベースアクセスに役立ちます。例えば、ユーザーのロールに基づいてコンポーネントを条件付きでレンダリングする場合などです。

app/dashboard/page.tsx
import { verifySession } from '@/app/lib/dal'
 
export default function Dashboard() {
  const session = await verifySession()
  const userRole = session?.user?.role // Assuming 'role' is part of the session object
 
  if (userRole === 'admin') {
    return <AdminDashboard />
  } else if (userRole === 'user') {
    return <UserDashboard />
  } else {
    redirect('/login')
  }
}

この例では、DALの`verifySession()`関数を使用して、「admin」、「user」、および権限のないロールをチェックしています。このパターンにより、各ユーザーは自分のロールに適したコンポーネントのみと対話します。

レイアウトと認証チェック[icon]

部分レンダリングのため、レイアウトでのチェックには注意が必要です。レイアウトはナビゲーション時に再レンダリングされないため、ルートの変更ごとにユーザーセッションがチェックされません。

代わりに、データソースまたは条件付きでレンダリングされるコンポーネントの近くにチェックを行う必要があります。

例えば、ユーザーデータを取得してナビゲーションにユーザー画像を表示する共有レイアウトを考えてみましょう。レイアウトで認証チェックを行う代わりに、レイアウトでユーザーデータ（`getUser()`）を取得し、DALで認証チェックを行う必要があります。

これにより、アプリケーション内で`getUser()`が呼び出される場所であればどこでも認証チェックが実行され、開発者がユーザーがデータへのアクセス権限を持っているかどうかを確認するのを忘れるのを防ぎます。

app/layout.tsx
export default async function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await getUser();
 
  return (
    // ...
  )
}
app/lib/dal.ts
export const getUser = cache(async () => {
  const session = await verifySession()
  if (!session) return null
 
  // Get user ID from session and fetch data
})

知っておくと良い点

  • SPAにおける一般的なパターンとして、ユーザーに権限がない場合、レイアウトまたは最上位レベルのコンポーネントで`return null`を行うことがありますが、これは**推奨されません**。Next.jsアプリケーションには複数のエントリポイントがあるため、ネストされたルートセグメントやサーバーアクションへのアクセスを防ぐことができません。

サーバーアクション[icon]

公開されているAPIエンドポイントと同様に、サーバーアクションについてもセキュリティ上の考慮事項を適用し、ユーザーが変更を実行することを許可されているかどうかを確認してください。

以下の例では、アクションを実行する前にユーザーのロールをチェックしています。

app/lib/actions.ts
'use server'
import { verifySession } from '@/app/lib/dal'
 
export async function serverAction(formData: FormData) {
  const session = await verifySession()
  const userRole = session?.user?.role
 
  // Return early if user is not authorized to perform the action
  if (userRole !== 'admin') {
    return null
  }
 
  // Proceed with the action for authorized users
}

ルートハンドラー[icon]

公開されているAPIエンドポイントと同様に、ルートハンドラーについてもセキュリティ上の考慮事項を適用し、ユーザーがルートハンドラーにアクセスすることを許可されているかどうかを確認してください。

例えば、

app/api/route.ts
import { verifySession } from '@/app/lib/dal'
 
export async function GET() {
  // User authentication and role verification
  const session = await verifySession()
 
  // Check if the user is authenticated
  if (!session) {
    // User is not authenticated
    return new Response(null, { status: 401 })
  }
 
  // Check if the user has the 'admin' role
  if (session.user.role !== 'admin') {
    // User is authenticated but does not have the right permissions
    return new Response(null, { status: 403 })
  }
 
  // Continue for authorized users
}

上記の例は、2段階のセキュリティチェックを行うルートハンドラーを示しています。まずアクティブなセッションをチェックし、次にログインしているユーザーが「admin」かどうかを確認します。

コンテキストプロバイダー[icon]

インターリービングにより、認証にコンテキストプロバイダーを使用できます。ただし、Reactの`context`はサーバーコンポーネントではサポートされていないため、クライアントコンポーネントでのみ使用できます。

これは機能しますが、子サーバーコンポーネントは最初にサーバーでレンダリングされるため、コンテキストプロバイダーのセッションデータにアクセスできません。

app/layout.ts
import { ContextProvider } from 'auth-lib'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ContextProvider>{children}</ContextProvider>
      </body>
    </html>
  )
}
"use client";
 
import { useSession } from "auth-lib";
 
export default function Profile() {
  const { userId } = useSession();
  const { data } = useSWR(`/api/user/${userId}`, fetcher)
 
  return (
    // ...
  );
}

クライアントコンポーネント（クライアント側データ取得など）でセッションデータが必要な場合は、Reactの`taintUniqueValue`[icon] APIを使用して、機密性の高いセッションデータがクライアントに公開されないようにします。

リソース[icon]

Next.jsにおける認証について学習したところで、安全な認証とセッション管理の実装に役立つ、Next.js互換のライブラリとリソースを紹介します。

認証ライブラリ[icon]

セッション管理ライブラリ[icon]

参考資料[icon]

認証とセキュリティについてさらに学習するには、次のリソースをご覧ください。