1. 基本

1.1 Auth.js とは

Auth.js は、ウェブアプリケーション向けの認証ソリューションを提供するライブラリです。以下の特徴があります：

簡単な OAuth と OpenID Connect の実装
現在、OAuth 認証や 2 要素認証が必須となっているため、Auth.js は非常に便利なツールです。例えば、Google ログインのような OAuth 認証を簡単に実装できます。
モダンなフレームワークやデータベースへの対応
最新のフレームワークやデータベースと互換性があり、柔軟な開発が可能です。
安全な設計によるセキュリティ
セキュリティを重視した設計により、安心して認証機能を運用できます。

1.2 認証

Auth.js は複数の認証方式をサポートしています。主な認証方式は以下の通りです：

a. OAuth：推奨

最も簡単な認証方式
Google や Twitter を用いて認可・認証を行うことで、アプリ自体がパスワードを管理する必要がなくなります。
JWT の活用
JSON Web Token（JWT）を使用することで、データベースを持たずに安全な運用が可能です。
OpenID Connect との違い
OAuth はアクセストークンを使用する認可のプロトコルですが、OpenID Connect はアクセストークンに加えて ID トークンを使用する認証のプロトコルです。以下の図で違いを確認できます：
1. OAuth：アクセストークンを使用する。認可のためのプロトコル
2. OpenID Connect：アクセストークン＋ ID トークンを使用する。認証のためのプロトコル
認証はユーザーの身元を確認することであるのに対し、認可はユーザーにリソースにアクセスする権利を与えるということ

(引用元：OAuth と OpenID Connect について～仕組みや特徴など解説～)

b. Email 認証

登録メールアドレスを使用した認可
ユーザーのメールアドレスを用いて認証を行います。

c. Credentials 認証

ID とパスワードによる認可
一般的なユーザー名とパスワードを用いた認証方式です。

1.3 対応しているデータベース（ORM）

Auth.js は以下の ORM と互換性があります：

Prisma
Drizzle
MongoDB

その他、多くのデータベースにも対応しています。

2. 実践

Auth.js を Next.js プロジェクトで使う方法について説明します。

2.1 セットアップ

セットアップ手順は以下のドキュメントに従ってください。

2.2 認証処理

認証処理では、以下のポイントに注意が必要です：

Promise の扱い
認証関連の関数は Promise を返すため、async/awaitを使用する必要があります。ただし、クライアントコンポーネントではasync/awaitが使えないため、サーバーコンポーネントで定義します。特に、signInやsignOutのコンポーネントを切り出すと管理が容易です。

認証メソッド

サインイン（ログイン）
```
await signIn("google");
```
サインアウト（ログアウト）
```
await signOut();
```
リダイレクトオプション
```
await signIn("google", { redirectTo: "/" });
```
オプションを指定しない場合、デフォルトのサインイン・アウトページにリダイレクトされます。

2.3 セッション管理

セッション管理は認証機能の重要な部分です。以下にセッションの取得方法とアクセス管理について説明します。

セッションの取得

セッション情報はクライアントとサーバーで異なる方法で取得します：

サーバーコンポーネントでの取得
```
const session = await auth();
```
サーバーコンポーネントのみで使用可能です。
クライアントコンポーネントでの取得
```
const { data: session } = useSession();
```
クライアントコンポーネントでのみ使用可能で、SessionProviderのセットアップが必要です。

SessionProvider のセットアップ

以下のように、SessionProviderをセットアップします：

ディレクトリ構造

web/
  ├ components/
  │     └ AuthProvider.tsx // SessionProvider周りのエラーを回避
  └ app/
      └ layout.tsx // Providerやレイアウト情報を記述

layout.tsx の例

import type { Metadata } from "next";
import "./globals.css";
import { Toaster } from "@/components/ui/toaster";
import { auth } from "@/app/auth";
import { AuthProvider } from "@/components/AuthProvider";

export const metadata: Metadata = {
  title: "タイトル",
  description: "説明",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const session = await auth();
  return (
    <html lang="ja">
      <body>
        <main>
          <AuthProvider session={session}>{children}</AuthProvider>
        </main>
        <Toaster />
      </body>
    </html>
  );
}

AuthProvider.tsx の例

"use client";
import { SessionProvider } from "next-auth/react";

export { SessionProvider as AuthProvider };

セッションによるアクセス管理

セッション情報を用いてアクセスを制御する方法です：

if (!session?.user) {
  redirect("/");
}

リダイレクトフックのインポート
redirectフックをインポートして使用します。
ユーザー情報の参照
session?.userでユーザー情報にアクセスできます。例えば、ユーザーの画像を取得する場合：
```
session?.user?.image ?? undefined;
```
- ??演算子
  左辺がnullやundefined、または偽値の場合に右辺を返します。型の安全性を確保するために使用します。
- 例：画像の src 属性に使用
```
<img src={session?.user?.image ?? "/default.png"} alt="User Image" />
```

以上です。

Discussion