Auth.js入門
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 トークンを使用する認証のプロトコルです。以下の図で違いを確認できます:
-
OAuth:アクセストークンを使用する。認可のためのプロトコル
-
OpenID Connect:アクセストークン+ ID トークンを使用する。認証のためのプロトコル
認証はユーザーの身元を確認することであるのに対し、認可はユーザーにリソースにアクセスする権利を与えるということ
-
OAuth:アクセストークンを使用する。認可のためのプロトコル
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