ゼロから学ぶ React, Next.js㉒【Learn Next.js】Chapter15
【Chapter15】 認証の追加
前の章では、フォームのバリデーションを追加し、アクセシビリティを向上させることで、請求書のルートの構築を完了しました。この章では、ダッシュボードに認証を追加します。
この章で扱うトピック
- 🔑 認証とは何か。
- ⏭️ NextAuth.jsを使用してアプリに認証を追加する方法。
- 🚫 Middlewareを使用してユーザーをリダイレクトし、ルートを保護する方法。
- ❄️ Reactの
useFormStatusとuseFormStateを使用して、保留状態とフォームのエラーを処理する方法。
認証とは？
認証は、現在の多くのWebアプリケーションの重要な部分です。これは、システムがユーザーが自称する通りの人物であるかどうかを確認する方法です。
安全なWebサイトでは、多くの場合、ユーザーの身元を確認するために複数の方法を使用します。例えば、ユーザー名とパスワードを入力した後、サイトはデバイスに確認コードを送信したり、Google Authenticatorのような外部アプリを使用したりします。この2要素認証（2FA）は、セキュリティを強化するのに役立ちます。誰かがパスワードを知ったとしても、あなたの固有のトークンがなければアカウントにアクセスできません。
認証 vs 認可
Web開発では、認証と認可は異なる役割を果たします。
- 認証は、ユーザーが自称する通りの人物であることを確認することです。ユーザー名とパスワードのような、あなたが持っているものを使ってあなたの身元を証明しています。
- 認可は次のステップです。ユーザーの身元が確認されたら、認可によってアプリケーションのどの部分を使用できるかが決定されます。
つまり、認証はあなたが誰であるかを確認し、認可はアプリケーションで何ができるか、何にアクセスできるかを決定します。
クイズの時間です！
知識をテストし、学んだことを確認しましょう。認証と認可の違いを最もよく説明しているのは次のうちどれですか？
A. 認証は、アクセスできる内容を決定します。認可は、身元を確認します。
B. 認証と認可はどちらも、ユーザーがアプリケーションのどの部分にアクセスできるかを決定します。
C. 認証は身元を確認します。認可は、アクセスできる内容を決定します。
D. 違いはありません。両方の用語は同じ意味です。
解答
C. 認証は身元を確認します。認可は、アクセスできる内容を決定します。
この2つは似ているように見えますが、認証がユーザーの身元を確認するのに対し、認可はあなたがアクセスできるものを決定します。
ログインルートの作成
アプリケーションに/loginという新しいルートを作成し、次のコードを貼り付けます。
import AcmeLogo from '@/app/ui/acme-logo';
import LoginForm from '@/app/ui/login-form';
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>
<LoginForm />
</div>
</main>
);
}
このページは<LoginForm />をインポートしていますが、これは後ほどこの章で更新します。
NextAuth.js
アプリケーションに認証を追加するために、NextAuth.jsを使用します。NextAuth.jsは、セッション管理、サインイン、サインアウト、その他の認証の側面に関連する複雑さの多くを抽象化します。これらの機能を手動で実装することもできますが、その過程は時間がかかり、エラーが発生しやすくなります。NextAuth.jsはこのプロセスを簡素化し、Next.jsアプリケーションでの認証のための統一されたソリューションを提供します。
NextAuth.jsの設定
ターミナルで次のコマンドを実行して、NextAuth.jsをインストールします。
npm install next-auth@beta
ここでは、Next.js 14と互換性のあるNextAuth.jsのベータ版をインストールしています。
次に、アプリケーション用のシークレットキーを生成します。このキーは、ユーザーセッションのセキュリティを確保するために、クッキーの暗号化に使用されます。ターミナルで次のコマンドを実行することでこれを行うことができます。
openssl rand -base64 32
次に、.envファイルで、生成したキーをAUTH_SECRET変数に追加します。
AUTH_SECRET=your-secret-key
本番環境でも認証を機能させるには、Vercelプロジェクトの環境変数も更新する必要があります。Vercelで環境変数を追加する方法については、ガイドを確認してください。
pagesオプションの追加
プロジェクトのルートディレクトリにauth.config.tsファイルを作成し、authConfigオブジェクトをエクスポートします。このオブジェクトには、NextAuth.jsの設定オプションが含まれます。今のところ、pagesオプションのみが含まれます。
import type { NextAuthConfig } from 'next-auth';
export const authConfig = {
pages: {
signIn: '/login',
},
};
pagesオプションを使用して、カスタムのサインイン、サインアウト、エラーページのルートを指定できます。これは必須ではありませんが、pagesオプションにsignIn: '/login'を追加することで、ユーザーはNextAuth.jsのデフォルトページではなく、カスタムのログインページにリダイレクトされます。
Next.js Middlewareでルートを保護する
次に、ルートを保護するロジックを追加します。これにより、ログインしていないユーザーがダッシュボードページにアクセスできなくなります。
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プロバイダの追加」セクションで詳しく説明します。
メモ：二重否定 (!!)
二重否定 とは
複数の否定演算子を連続して使用することで、明示的にあらゆる値を対応する論理型プリミティブに変換することができます。変換は値の「真値性」または「偽値性」に基づいて行われます (truthy および falsy を参照)。(MDN)
Truthy (真値)とは
JavaScript において、真値 (truthy) は論理値のコンテキストに現れた時に true とみなされる値のことです。偽値 (falsy) として定義された値 (つまり、false, 0, -0, 0n, "", null, undefined, NaN) を除くすべての値は真値です。(MDN)
const isLoggedIn = !!auth?.user;の部分は以下のように解釈できます。
- authオブジェクトが存在し、userプロパティが truthy値（オブジェクト、非空文字列など）である場合、式はtrueになり、ユーザーがログインしていることを示します。
- authオブジェクトが存在しない、またはuserプロパティがfalsy値（null、undefined、空文字列など）である場合、式はfalseになり、ユーザーがログインしていないことを示します。
次に、authConfigオブジェクトをMiddlewareファイルにインポートする必要があります。プロジェクトのルートに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を採用する利点は、Middlewareが認証を検証するまで保護されたルートのレンダリングが開始されないため、アプリケーションのセキュリティとパフォーマンスの両方が向上することです。
パスワードのハッシュ化
データベースに保存する前にパスワードをハッシュ化するのは良い習慣です。ハッシュ化は、パスワードをランダムに見える固定長の文字列に変換し、ユーザーのデータが露出した場合でもセキュリティのレイヤーを提供します。
seed.jsファイルでは、bcryptというパッケージを使用して、ユーザーのパスワードをデータベースに保存する前にハッシュ化しました。この章の後半で、ユーザーが入力したパスワードがデータベースのパスワードと一致することを確認するために、再度使用します。ただし、bcryptパッケージ用に別のファイルを作成する必要があります。これは、bcryptがNext.js Middlewareで利用できないNode.js APIに依存しているためです。
authConfigオブジェクトを展開する新しいファイル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プロバイダは、ユーザーがユーザー名とパスワードでログインできるようにします。
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({})],
});
サインイン機能の追加
authorize関数を使用して認証ロジックを処理できます。Server Actionsと同様に、Zodを使用して、ユーザーがデータベースに存在するかどうかを確認する前に、メールとパスワードを検証できます。
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関数を作成して、データベースからユーザーを照会します。
import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';
import { z } from 'zod';
+import { sql } from '@vercel/postgres';
+import type { User } from '@/app/lib/definitions';
+async function getUser(email: string): Promise<User | undefined> {
+ try {
+ const user = await sql<User>`SELECT * FROM users WHERE email=${email}`;
+ return user.rows[0];
+ } catch (error) {
+ console.error('Failed to fetch user:', error);
+ throw new Error('Failed to fetch user.');
+ }
+}
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を呼び出して、パスワードが一致するかどうかを確認します。
import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';
import { sql } from '@vercel/postgres';
import { z } from 'zod';
import type { User } from '@/app/lib/definitions';
+import bcrypt from 'bcrypt';
// ...
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('Invalid credentials');
+ return null;
},
}),
],
});
最後に、パスワードが一致する場合はユーザーを返し、そうでない場合はnullを返してユーザーのログインを防ぎます。
ログインフォームの更新
次に、認証ロジックをログインフォームに接続する必要があります。actions.tsファイルで、authenticateという新しいアクションを作成します。このアクションは、auth.tsからsignIn関数をインポートする必要があります。
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 'Invalid credentials.';
default:
return 'Something went wrong.';
}
}
throw error;
}
}
'CredentialsSignin'エラーがある場合は、適切なエラーメッセージを表示したいと思います。NextAuth.jsのエラーについては、ドキュメントで確認できます。
最後に、login-form.tsxコンポーネントでは、ReactのuseFormStateを使用してサーバーアクションを呼び出しフォームのエラーを処理し、useFormStatusを使用してフォームの保留状態を処理できます。
'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 { useFormState, useFormStatus } from 'react-dom';
+import { authenticate } from '@/app/lib/actions';
export default function LoginForm() {
+ const [errorMessage, dispatch] = useFormState(authenticate, undefined);
return (
+ <form action={dispatch} 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`}>
Please log in to continue.
</h1>
<div className="w-full">
<div>
<label
className="mb-3 mt-5 block text-xs font-medium text-gray-900"
htmlFor="email"
>
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="Enter your email address"
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"
>
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="Enter password"
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>
<LoginButton />
+ <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>
);
}
function LoginButton() {
+ const { pending } = useFormStatus();
return (
+ <Button className="mt-4 w-full" aria-disabled={pending}>
+ Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
+ </Button>
);
}
ログアウト機能の追加
<SideNav />にログアウト機能を追加するには、auth.tsからsignOut関数を<form>要素内で呼び出します。
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();
+ }}
>
<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">Sign Out</div>
</button>
</form>
</div>
</div>
);
}
試してみましょう
さあ、試してみましょう。次の資格情報を使用してアプリケーションにログインおよびログアウトできるはずです。
- Email: user@nextmail.com
- Password: 123456
次の章
Discussion