App Router: 認証機能の追加

前章では、フォームのバリデーションとアクセシビリティの改善を通じて請求書ルートの構築を完了しました。本章では、ダッシュボードに認証機能を追加します。

認証とは？

認証は現代の多くのウェブアプリケーションにおいて重要な要素です。これはシステムがユーザーが自称する人物であるかを確認する方法です。

安全なウェブサイトでは、通常、ユーザーの身元を確認するために複数の方法を使用します。例えば、ユーザー名とパスワードを入力した後、サイトはデバイスに確認コードを送信したり、Google Authenticatorなどの外部アプリを使用したりすることがあります。この2要素認証（2FA）によりセキュリティが向上します。誰かがパスワードを知ったとしても、ユニークなトークンなしではアカウントにアクセスできません。

認証と認可の違い

ウェブ開発において、認証（Authentication）と認可（Authorization）は異なる役割を果たします：

認証はユーザーが自称する人物であることを確認することです。ユーザー名やパスワードなど、ユーザーが持っている情報で身元を証明します。
認可はその次のステップです。ユーザーの身元が確認された後、認可はアプリケーションのどの部分を使用できるかを決定します。

つまり、認証は「あなたが誰であるか」を確認し、認可は「アプリケーション内で何ができるか」を決定します。

ログインルートの作成

まず、アプリケーションに/loginという新しいルートを作成し、以下のコードを貼り付けます：

/app/login/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import LoginForm from '@/app/ui/login-form';
import { Suspense } from 'react';
 
export default function LoginPage() {
  return (
    <main className="flex items-center justify-center md:h-screen">
      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
        <div className="flex h-20 w-full items-end rounded-lg bg-blue-500 p-3 md:h-36">
          <div className="w-32 text-white md:w-36">
            <AcmeLogo />
          </div>
        </div>
        <Suspense>
          <LoginForm />
        </Suspense>
      </div>
    </main>
  );
}

このページでは<LoginForm />をインポートしていますが、このコンポーネントは後ほど更新します。このコンポーネントはReactの<Suspense>でラップされています。これは、受信リクエスト（URL検索パラメータ）から情報にアクセスするためです。

NextAuth.js

認証機能を追加するためにNextAuth.jsを使用します。NextAuth.jsは、セッション管理、サインイン/サインアウト、その他の認証関連の複雑な処理の多くを抽象化します。これらの機能を手動で実装することも可能ですが、時間がかかりエラーが発生しやすいです。NextAuth.jsはこのプロセスを簡素化し、Next.jsアプリケーションにおける認証の統一されたソリューションを提供します。

NextAuth.jsのセットアップ

ターミナルで次のコマンドを実行してNextAuth.jsをインストールします：

Terminal

pnpm i next-auth@beta

ここではNext.js 14+と互換性のあるNextAuth.jsのbetaバージョンをインストールしています。

次に、アプリケーション用のシークレットキーを生成します。このキーはCookieの暗号化に使用され、ユーザーセッションの安全性を確保します。ターミナルで次のコマンドを実行します：

Terminal

# macOS
openssl rand -base64 32
# Windowsはhttps://generate-secret.vercel.app/32を使用できます

次に、.envファイルで、生成したキーをAUTH_SECRET変数に追加します：

.env

AUTH_SECRET=your-secret-key

本番環境で認証を機能させるには、Vercelプロジェクトの環境変数も更新する必要があります。Vercelで環境変数を追加する方法については、このガイドを参照してください。

pagesオプションの追加

プロジェクトのルートにauth.config.tsファイルを作成し、authConfigオブジェクトをエクスポートします。このオブジェクトにはNextAuth.jsの設定オプションが含まれます。今のところ、pagesオプションのみ含まれます：

/auth.config.ts

import type { NextAuthConfig } from 'next-auth';
 
export const authConfig = {
  pages: {
    signIn: '/login',
  },
} satisfies NextAuthConfig;

pagesオプションを使用して、カスタムのサインイン、サインアウト、エラーページのルートを指定できます。これは必須ではありませんが、pagesオプションにsignIn: '/login'を追加することで、ユーザーはNextAuth.jsのデフォルトページではなく、カスタムログインページにリダイレクトされます。

Next.js Middlewareでルートを保護

次に、ルートを保護するロジックを追加します。これにより、ユーザーがログインしていない限り、ダッシュボードページにアクセスできなくなります。

/auth.config.ts

import type { NextAuthConfig } from 'next-auth';
 
export const authConfig = {
  pages: {
    signIn: '/login',
  },
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false; // 未認証ユーザーをログインページにリダイレクト
      } else if (isLoggedIn) {
        return Response.redirect(new URL('/dashboard', nextUrl));
      }
      return true;
    },
  },
  providers: [], // 今のところ空の配列でプロバイダーを追加
} satisfies NextAuthConfig;

authorizedコールバックは、Next.js Middlewareを使用してページへのリクエストが許可されているかどうかを確認するために使用されます。これはリクエストが完了する前に呼び出され、authとrequestプロパティを含むオブジェクトを受け取ります。authプロパティにはユーザーのセッションが含まれ、requestプロパティには受信リクエストが含まれます。

providersオプションは、さまざまなログインオプションをリストする配列です。今のところ、NextAuthの設定を満たすために空の配列になっています。Credentialsプロバイダーの追加セクションで詳しく学びます。

次に、authConfigオブジェクトをMiddlewareファイルにインポートする必要があります。プロジェクトのルートにmiddleware.tsというファイルを作成し、次のコードを貼り付けます：

/middleware.ts

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
 
export default NextAuth(authConfig).auth;
 
export const config = {
  // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
};

ここでは、authConfigオブジェクトでNextAuth.jsを初期化し、authプロパティをエクスポートしています。また、Middlewareからmatcherオプションを使用して、特定のパスで実行するように指定しています。

このタスクにMiddlewareを使用する利点は、認証が確認されるまで保護されたルートのレンダリングが開始されないため、アプリケーションのセキュリティとパフォーマンスの両方が向上することです。

パスワードのハッシュ化

パスワードをデータベースに保存する前にハッシュ化するのは良い習慣です。ハッシュ化により、パスワードはランダムに見える固定長の文字列に変換され、ユーザーデータが漏洩した場合でもセキュリティ層を提供します。

データベースにシードデータを投入する際、bcryptパッケージを使用してユーザーのパスワードをハッシュ化してからデータベースに保存しました。本章の後半で、ユーザーが入力したパスワードがデータベースのものと一致するかどうかを比較するために再びこれを使用します。ただし、bcryptパッケージ用に別のファイルを作成する必要があります。これは、bcryptがNext.js Middlewareでは利用できないNode.js APIに依存しているためです。

authConfigオブジェクトを展開する新しいauth.tsファイルを作成します：

/auth.ts

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
});

Credentialsプロバイダーの追加

次に、NextAuth.jsのprovidersオプションを追加する必要があります。providersは、GoogleやGitHubなどのさまざまなログインオプションをリストする配列です。このコースでは、Credentialsプロバイダーのみを使用することに焦点を当てます。

Credentialsプロバイダーでは、ユーザー名とパスワードでログインできます。

/auth.ts

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [Credentials({})],
});

豆知識：

OAuthやメールなどの他のプロバイダーもあります。すべてのオプションについてはNextAuth.jsドキュメントを参照してください。

サインイン機能の追加

authorize関数を使用して認証ロジックを処理できます。Server Actionsと同様に、zodを使用してメールアドレスとパスワードを検証し、データベースにユーザーが存在するかどうかを確認します：

/auth.ts

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';
import { z } from 'zod';
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);
      },
    }),
  ],
});

資格情報を検証した後、データベースからユーザーをクエリする新しいgetUser関数を作成します。

/auth.ts

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';
import { z } from 'zod';
import type { User } from '@/app/lib/definitions';
import bcrypt from 'bcrypt';
import postgres from 'postgres';
 
const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
 
async function getUser(email: string): Promise<User | undefined> {
  try {
    const user = await sql<User[]>`SELECT * FROM users WHERE email=${email}`;
    return user[0];
  } catch (error) {
    console.error('ユーザーの取得に失敗しました:', error);
    throw new Error('ユーザーの取得に失敗しました。');
  }
}
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);
 
        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await getUser(email);
          if (!user) return null;
        }
 
        return null;
      },
    }),
  ],
});

次に、bcrypt.compareを呼び出してパスワードが一致するかどうかを確認します：

/auth.ts

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';
import { z } from 'zod';
import type { User } from '@/app/lib/definitions';
import bcrypt from 'bcrypt';
import postgres from 'postgres';
 
const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });
 
// ...
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        // ...
 
        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await getUser(email);
          if (!user) return null;
          const passwordsMatch = await bcrypt.compare(password, user.password);
 
          if (passwordsMatch) return user;
        }
 
        console.log('無効な資格情報');
        return null;
      },
    }),
  ],
});

最後に、パスワードが一致する場合はユーザーを返し、一致しない場合はユーザーがログインできないようにnullを返します。

ログインフォームの更新

認証ロジックをログインフォームに接続する必要があります。actions.tsファイルにauthenticateという新しいアクションを作成します。このアクションはauth.tsからsignIn関数をインポートする必要があります:

/app/lib/actions.ts

'use server';
 
import { signIn } from '@/auth';
import { AuthError } from 'next-auth';
 
// ...
 
export async function authenticate(
  prevState: string | undefined,
  formData: FormData,
) {
  try {
    await signIn('credentials', formData);
  } catch (error) {
    if (error instanceof AuthError) {
      switch (error.type) {
        case 'CredentialsSignin':
          return '無効な認証情報です。';
        default:
          return '問題が発生しました。';
      }
    }
    throw error;
  }
}

'CredentialsSignin'エラーが発生した場合、適切なエラーメッセージを表示します。NextAuth.jsのエラーについてはドキュメントで学べます。

最後に、login-form.tsxコンポーネントでReactのuseActionStateを使用してサーバーアクションを呼び出し、フォームエラーを処理し、フォームの保留状態を表示できます:

app/ui/login-form.tsx

'use client';
 
import { lusitana } from '@/app/ui/fonts';
import {
  AtSymbolIcon,
  KeyIcon,
  ExclamationCircleIcon,
} from '@heroicons/react/24/outline';
import { ArrowRightIcon } from '@heroicons/react/20/solid';
import { Button } from '@/app/ui/button';
import { useActionState } from 'react';
import { authenticate } from '@/app/lib/actions';
import { useSearchParams } from 'next/navigation';
 
export default function LoginForm() {
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get('callbackUrl') || '/dashboard';
  const [errorMessage, formAction, isPending] = useActionState(
    authenticate,
    undefined,
  );
 
  return (
    <form action={formAction} className="space-y-3">
      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
        <h1 className={`${lusitana.className} mb-3 text-2xl`}>
          続行するにはログインしてください。
        </h1>
        <div className="w-full">
          <div>
            <label
              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
              htmlFor="email"
            >
              メールアドレス
            </label>
            <div className="relative">
              <input
                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                id="email"
                type="email"
                name="email"
                placeholder="メールアドレスを入力"
                required
              />
              <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
            </div>
          </div>
          <div className="mt-4">
            <label
              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
              htmlFor="password"
            >
              パスワード
            </label>
            <div className="relative">
              <input
                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                id="password"
                type="password"
                name="password"
                placeholder="パスワードを入力"
                required
                minLength={6}
              />
              <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
            </div>
          </div>
        </div>
        <input type="hidden" name="redirectTo" value={callbackUrl} />
        <Button className="mt-4 w-full" aria-disabled={isPending}>
          ログイン <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
        </Button>
        <div
          className="flex h-8 items-end space-x-1"
          aria-live="polite"
          aria-atomic="true"
        >
          {errorMessage && (
            <>
              <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
              <p className="text-sm text-red-500">{errorMessage}</p>
            </>
          )}
        </div>
      </div>
    </form>
  );
}

ログアウト機能の追加

<SideNav />にログアウト機能を追加するには、<form>要素内でauth.tsのsignOut関数を呼び出します:

/ui/dashboard/sidenav.tsx

import Link from 'next/link';
import NavLinks from '@/app/ui/dashboard/nav-links';
import AcmeLogo from '@/app/ui/acme-logo';
import { PowerIcon } from '@heroicons/react/24/outline';
import { signOut } from '@/auth';
 
export default function SideNav() {
  return (
    <div className="flex h-full flex-col px-3 py-4 md:px-2">
      // ...
      <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
        <NavLinks />
        <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
        <form
          action={async () => {
            'use server';
            await signOut({ redirectTo: '/' });
          }}
        >
          <button className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
            <PowerIcon className="w-6" />
            <div className="hidden md:block">ログアウト</div>
          </button>
        </form>
      </div>
    </div>
  );
}

試してみる

実際に試してみてください。以下の認証情報を使用してアプリケーションにログイン/ログアウトできるはずです:

メールアドレス: [email protected]
パスワード: 123456

認証機能の追加

On this page