Auth.js入門

2025/01/15に公開

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が使えないため、サーバーコンポーネントで定義します。特に、signInsignOutのコンポーネントを切り出すと管理が容易です。

認証メソッド

  • サインイン(ログイン)
    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;
    
    • ??演算子
      左辺がnullundefined、または偽値の場合に右辺を返します。型の安全性を確保するために使用します。

    • 例:画像の src 属性に使用

      <img src={session?.user?.image ?? "/default.png"} alt="User Image" />
      

 
 
 
 
以上です。

KA projects

Discussion