NextJs 13 でのパスワードレスログイン

この記事では、NextAuth.js ライブラリを使用して Next.js プロジェクトにパスワードなしの認証を実装するために必要な手順について詳しく説明します。さらに、これを実現するために、データベースアダプターとして Prisma を利用します。

パスワードレス認証は、従来のユーザー名とパスワードの組み合わせを不要にする革新的なアプローチです。代わりに、電子メールのマジックリンクや SMS 経由で送信されるワンタイムコードなどの代替方法を活用することで、より安全でユーザーフレンドリーな認証エクスペリエンスを提供します。

Next.js は、Web アプリケーションを構築するための人気のある React フレームワークであり、そのシンプルさと効率性で知られています。 Next.js 用に明示的に設計された認証ライブラリである NextAuth.js を統合することで、パスワードなしの認証をプロジェクトに簡単に組み込むことができます。

さらに、データベースアダプターとして Prisma を利用します。 Prisma は、タイプセーフで自動生成されるクエリビルダーを提供することでデータベースの対話を簡素化する ORM (オブジェクトリレーショナルマッピング) ツールです。 PostgreSQL、MySQL、SQLite などの複数のデータベースをサポートしているため、認証の実装に多用途に使用できます。

このガイドでは、Next.js プロジェクトで NextAuth.js を使用してパスワードなしの認証をセットアップおよび構成する方法を段階的に説明します。また、Prisma をデータベースアダプターとして統合し、アプリケーションとデータベース間のシームレスな通信を可能にする方法も示します。

ここでは、パスワードなしの認証と NextAuth.js および Prisma の機能を使用して、Next.js アプリケーションのセキュリティとユーザーエクスペリエンスを向上させる方法を検討します。さぁ、始めよう。

パスワードレスログインとは何ですか?

パスワードレスログインは、その名前が示すように、従来のユーザー名とパスワードの組み合わせを不要にする認証方法です。代わりに、電子メールのマジックリンクや SMS 経由で送信されるワンタイムコードなど、ユーザーの身元を確認する代替手段を利用します。このアプローチには、従来のログイン方法に比べていくつかの利点があります。まず、脆弱なパスワードやパスワードの再利用など、パスワード関連の脆弱性のリスクが排除されます。次に、複雑なパスワードを覚えて入力する必要がなくなるため、ユーザーエクスペリエンスが簡素化されます。

電子メールのマジックリンクまたはワンタイムコードを使用してパスワードなしのログインを実装するには、SMTP (Simple Mail Transfer Protocol) サーバーが必要です。

SMTP サーバーは、インターネット経由で電子メールを送信する役割を果たします。パスワードレス認証のコンテキストでは、サーバーはマジックリンクまたはワンタイムコードをユーザーの登録電子メールアドレスに送信します。ユーザーがログインプロセスを開始すると、一意のリンクまたはコードを含む電子メールが生成され、ユーザーに送信されます。ユーザーはリンクをクリックするかコードを入力して認証プロセスを完了します。 SMTP サーバーは、アプリケーションとユーザーの電子メールサービスの間の仲介者として機能し、認証メッセージの安全かつ信頼性の高い配信を保証します。 SMTP サーバーを利用することで、パスワードなしのログインを効果的に実装し、ユーザーにシームレスな認証エクスペリエンスを提供できます。

＃＃＃始めましょう！

まず、新しい Next.js プロジェクトを生成する必要があります。これを行うには、次のコマンドを使用します。

npx create-next-app@latest

新しい Next.js プロジェクトを生成したら、新しく作成したプロジェクトディレクトリに移動できます。

ディレクトリをプロジェクトに変更すると、Next.js プロジェクト構造を構成するさまざまなフォルダーやファイルを探索できるようになります。

Next.js アプリケーションの効果的な開発と編成には、プロジェクトの構造を理解することが不可欠です。公式ドキュメントを参照すると、ベストプラクティスを活用して、コードの構造化、静的資産の管理、および再利用可能なコンポーネントを作成します。

依存関係をインストールする

NextAuth.js を使用して Next.js プロジェクトでパスワードなしの認証を有効にするには、まず必要な依存関係をインストールする必要があります。コマンド yarn add next-auth nodemailer を実行して、NextAuth.js と nodemailer の両方をプロジェクトに追加します。

特に、nodemailer は Node.js で電子メールを送信するための人気があり汎用性の高いモジュールであるため、使用します。パスワードレス認証に必要なマジックリンクまたはワンタイムコードを電子メールで送信する簡単で信頼性の高い方法を提供します。

次に、Prisma をデータベースアダプターとして統合しましょう。まず、次のコマンドを使用して必要な Prisma パッケージをインストールします。

yarn add @prisma/client @next-auth/prisma-adapter

これらのパッケージにより、Next.js アプリケーションとデータベース間のシームレスな通信が可能になります。さらに、次のコマンドを実行して、Prisma を開発依存関係としてインストールする必要もあります。

yarn add prisma --dev

このステップにより、Prisma とデータベース対話用の自動生成クエリビルダーを操作するために必要なツールが確実に入手できるようになります。

これらの依存関係をインストールすることで、Next.js プロジェクトで NextAuth.js と Prisma を使用してパスワードなしの認証を実装するための基盤を確立します。

Prisma のセットアップ

Next.js プロジェクトでパスワードなしの認証を使用するには、Prisma をセットアップし、電子メール送信用の SMTP サーバーにアクセスする必要があります。このチュートリアルでは、個人の Gmail アカウントを使用してメールを送信する方法を説明します。セットアップを成功させるには、以下の手順に従ってください。

まず、プロジェクトのルートに「prisma」フォルダーを作成します。このフォルダーには、Prisma 関連のファイルと構成が格納されます。次に、「prisma」フォルダー内に、「schema.prisma」という新しいファイルを作成します。スキーマファイルはデータベースの構造を定義し、Prisma の自動生成コードの青写真として機能します。

スキーマの概念が初めてでも、心配する必要はありません。スキーマは、データベースのテーブル、フィールド、関係、および制約を指定します。スキーマを作成するには、NextAuth.js の公式ドキュメントを参照し、そこに提供されているサンプルスキーマをコピーします。このスキーマは開始点であり、アプリケーションの要件に合わせてカスタマイズできます。

次に、プロジェクトのルートに「.env」ファイルを作成します。このファイルには、SMTP サーバーに必要な構成を含む環境変数が保存されます。「.env」ファイルにデータを追加するには、以下に示す設定例をコピーします。 Gmail アカウントの資格情報と SMTP サーバー設定を対応するフィールドに必ず入力してください。

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

これらの手順に従うことで、Prisma がセットアップされ、Gmail アカウントを使用して電子メールを送信できるように SMTP サーバーが設定されます。これらの準備は、Next.js プロジェクトでパスワードなしの認証フローを有効にするために重要です。

注記

Google アカウントの 2 要素認証 (2FA) を有効にしている場合は、アプリのパスワードを作成する必要があります。アプリパスワードは、Google アカウントのメインパスワードを公開せずに、特定のアプリやデバイスへのアクセスを許可する個別のパスワードです。アプリのパスワードを生成するには、以下の手順に従ってください。

https://myaccount.google.com/ にアクセスして、Google アカウント設定ページに移動します。
[セキュリティ] タブに移動します。
[2FA] セクションを探し、下にスクロールして [アプリパスワード] を選択します。

セキュリティ確認のため、Google アカウントのパスワードを再度入力するよう求められる場合があります。
[アプリの選択] ドロップダウンで、[メール] または [その他 (カスタム名)] を選択します。

「メール」オプションが利用可能な場合は、それを選択します。
[メール] オプションが利用できない場合は、[その他 (カスタム名)] を選択し、識別用のカスタム名を入力します。

「生成」または「パスワードの生成」ボタンをクリックします。
Google が独自のアプリパスワードを生成します。このパスワードはアプリケーションで電子メールを送信するために使用するため、メモしておいてください。
この生成されたアプリパスワードを Next.js アプリケーションの SMTP サーバー構成で使用します。通常の Gmail アカウントのパスワードをこのアプリのパスワードに置き換えます。

これにより、2FA が有効になっている場合でも、アプリケーションは Gmail アカウントを使用して電子メールを安全に送信できます。

Supabase を使用した PostgreSQL

続行する前に、プロジェクトのデータベースが正しく機能していることを確認する必要があります。このデモでは、Supabase PostgreSQL データベースの使用をお勧めします。 Supabase プロジェクトを開始して PostgreSQL 接続 URL を取得するには、次の手順に従います。

supabase.io にアクセスしてアカウントにサインインするか、アカウントをお持ちでない場合は新しいアカウントを作成します。
ログインすると、Supabase ダッシュボードに移動します。「新しいプロジェクトを作成」をクリックして新しいプロジェクトを開始します。
プロジェクトに名前を付け、現在の場所に最も近い地域を選択します。パスワードは後で必要になるため、覚えておいてください。
プロジェクトを作成すると、プロジェクトダッシュボードが表示されます。左側のサイドバーの「データベース」をクリックしてデータベース設定にアクセスします。
「データベース」セクションに、PostgreSQL 接続 URL があります。この URL には、ホスト、ポート、データベース名、ユーザー名、パスワードなど、Supabase プロジェクトのデータベースに接続するために必要な情報がすべて含まれています。 postgres://<ユーザー名>:<パスワード>@<ホスト>:<ポート>/<データベース> の形式で表示されます。

PostgreSQL 接続 URL をコピーし、安全に保管します。これは、アプリケーションと Supabase データベース間の接続を確立するために必要になります。

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

ここで、コマンド `npx prisma generated` を実行して、Prisma クライアントを確実に生成しましょう。

Prisma クライアントは、スキーマに基づいて自動的に生成されるデータベース クライアントです。デフォルトでは、Prisma クライアントは「node_modules/.prisma/client」フォルダーに生成されますが、[必要に応じてカスタムの場所を指定する](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path)。

次に、最初の移行の作成に進みます。次のコマンドを実行します:「npx prisma merge dev」。各移行にわかりやすい名前を付けることができます。

Prisma では、移行は時間の経過に伴うデータベース スキーマの調整を管理するために使用される方法です。これにより、既存のデータを失うことなくデータベース構造を変更できます。これらの移行は、変化するアプリケーションのニーズにデータベース スキーマが確実に適合するようにするため、非常に重要です。 Prisma の移行ツールを使用すると、これらの変更を簡単にバージョン管理、適用、および元に戻すことができるため、チームワークが簡素化され、さまざまな環境にわたって均一なデータベース スキーマが維持されます。

ここでデータベースを確認すると、最初の移行からの変更がデータベース セクションに反映されていることがわかります。

初期移行を実行することにより、移行スクリプトで定義されているようにデータベース スキーマに変更が適用されました。

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### Prisma アダプターを使用した NextAuthJS のセットアップ

Next.js アプリケーションでは、NextAuthJS はワイルドカード ルートまたはフォールバック ルートとも呼ばれるキャッチオール ルートを使用して認証リクエストを管理します。この動的ルートは、Next.js のファイルベースのルーティング システムを使用して定義されます。

「**app**」ディレクトリ内に「**api**」という名前のフォルダーを作成します。 「**api**」フォルダ内に「**auth**」フォルダを作成します。 「**auth**」フォルダー内に、「**[...nextauth]**」というキャッチオール ルートをフォルダーとして作成します。最後に、キャッチオール ルート フォルダー内に「**route.ts**」ファイルを作成し、次のコードを追加します。

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

キャッチオールルートファイルでは、NextAuthJS ライブラリをインポートし、認証オプション、プロバイダー、および構成をセットアップします。 NextAuthJS は、受信リクエストの解析を処理し、必要な認証アクションを特定し、指定されたオプションに従って適切なロジックを実行します。

提供されたコードは、電子メールプロバイダーを使用した認証のために Prisma アダプターを使用して NextAuthJS をセットアップします。それぞれのステートメントを説明しましょう。

輸入:

PrismaAdapter および PrismaClient は、それぞれ @next-auth/prisma-adapter および @prisma/client からインポートされます。これらは NextAuthJS を Prisma と統合するために使用されます。
NextAuth は next-auth からインポートされ、Next.js アプリケーションで認証を処理するためのメインライブラリです。
EmailProvider は next-auth/providers/email からインポートされ、電子メールベースの認証のプロバイダーとして使用されます。

プリズマのセットアップ:

PrismaClient のインスタンスは new PrismaClient() を使用して作成されます。これにより、Prisma ORM および基盤となるデータベースとの通信が可能になります。

認証オプション:

authOptions は NextAuthJS での認証の設定を定義するオブジェクトです。
adapter プロパティは PrismaAdapter(prisma) に設定され、PrismaAdapter を使用して NextAuthJS を Prisma に接続します。
providers 配列には、単一のプロバイダー EmailProvider が含まれます。これは、必要な電子メールサーバーの詳細と from の電子メールアドレスで構成されます。

NextAuth ハンドラー:

NextAuth 関数が authOptions を引数として呼び出され、認証ハンドラーが作成されます。
結果のハンドラーは handler 変数に割り当てられます。

エクスポート:

handler は、HTTP GET リクエストと POST リクエストの両方をサポートするために、GET および POST としてエクスポートされます。

次に、サーバーを実行して機能をテストしましょう。まず、「yarn dev」を実行して開発サーバーを起動します。次に、ブラウザを開いて「localhost:3000」にアクセスし、アプリケーションが動作していることを確認します。

認証機能をテストするには、「localhost:3000/api/auth/signin」にアクセスしてください。ここでは、NextAuthJS の魔法を体験します。 NextAuthJS に含まれる提供されたテンプレートを使用すると、パスワードなしのサインインプロセスが有効になります。試してみるには、有効な電子メールアドレスを入力してください。

電子メールを送信すると、NextAuthJS が舞台裏のプロセスを処理します。まず、一意のサインインリンクを含む電子メールを生成し、指定された電子メールアドレスに送信します。このリンクは、ユーザーの安全な認証トークンとして機能します。次に、ユーザーがリンクをクリックすると、NextAuthJS がトークンを検証し、ユーザーを認証します。

このパスワードレスログイン機能は、パスワードの必要性を排除することで、セキュリティとユーザーエクスペリエンスを向上させます。ユーザーは、電子メールで受け取ったリンクをクリックするだけで、自分のアカウントに迅速かつ安全にアクセスできます。ログインプロセスを合理化し、パスワード関連の脆弱性のリスクを軽減します。

ユーザーが NextAuthJS によって生成されたサインイン電子メールをクリックして認証を受けると、シームレスなログインエクスペリエンスを促進するために、いくつかのアクションがバックグラウンドで実行されます。

1.電子メールリンクの検証: ユーザーがサインインリンクをクリックすると、NextAuthJS はリンクに埋め込まれた認証トークンを検証します。このトークンにより、認証プロセスのセキュリティと整合性が保証されます。

2.認証プロセス: トークンの検証が成功すると、NextAuthJS はユーザーを識別し、認証プロセスを完了します。提供されたトークンと、多要素認証などの構成された追加の認証要素に基づいてユーザーの ID が検証されます。

3.セッションの作成: 認証が成功すると、NextAuthJS はユーザーのセッションを作成します。セッションはユーザーの認証ステータスを表す永続的な状態であり、ユーザーは後続のリクエストに対して再認証することなく、保護されたリソースにアクセスできます。

4.Cookie: NextAuthJS は、セッションを管理するためにユーザーのブラウザに安全な HTTP 専用 Cookie を設定します。これらの Cookie は、複数のリクエストにわたってユーザーの認証状態を維持する上で重要な役割を果たします。通常、Cookie にはセッション Cookie が含まれ、認証構成に応じてオプションでリフレッシュトークン Cookie が含まれます。

セッション Cookie: セッション Cookie には、ユーザーのセッションを一意に識別するセッション識別子 (ランダムに生成された文字列など) が含まれています。これは、NextAuthJS が後続のリクエストを正しいセッションおよびユーザーに関連付けるのに役立ちます。
CSRF トークン Cookie: NextAuthJS は、CSRF (クロスサイトリクエストフォージェリ) トークン Cookie を設定して、CSRF 攻撃から保護します。 CSRF トークンは、NextAuthJS によって生成され、Cookie に保存される一意の値です。これは、ユーザーによる後続のリクエストの信頼性を検証および検証するために使用されます。ユーザーがフォームを送信したり機密性の高いアクションを実行したりすると、リクエストのヘッダーまたは本文に CSRF トークンが含まれ、リクエストが悪意のあるソースからのものではなく、認証されたユーザーのセッションからのものであることが保証されます。
コールバック URL Cookie: NextAuthJS は、認証フローにリダイレクトされる前にユーザーがアクセスしようとしていた元の URL を保存するコールバック URL Cookie を設定します。この Cookie は、認証が成功した後に NextAuthJS がユーザーを目的のページにリダイレクトするのに役立ちます。一般的なランディングページではなく、ユーザーを意図した目的地にシームレスに戻すことで、スムーズなユーザーエクスペリエンスを保証します。

NextAuthJS は、安全な HTTP のみの Cookie を使用することで、認証状態が安全で改ざん防止された状態を維持することを保証します。 Cookie は暗号化され、悪意のある者による不正なアクセスや変更を防ぎます。

NextAuthJS と Prisma アダプターを Next.js アプリケーションに統合することに成功しました。 NextAuthJS が提供する使いやすさと適応性により、信頼性の高い認証システムが手に入ります。

このガイドで使用されているコードについては、以下のリンクにある GitHub リポジトリを確認してください: https://github.com/codelabsacademy/next-auth-guide。

しかし、なぜここで止まるのでしょうか？ Web 開発に情熱を持ち、スキルを向上させたいと考えている場合は、Web 開発ブートキャンプへの応募を検討してください。私たちのブートキャンプは包括的な学習体験を提供し、Web 開発のダイナミックな世界で優れた能力を発揮するために必要な知識と実践的なスキルを身に付けます。

ブートキャンプに参加すると、最先端のテクノロジーを実際に使って経験を積み、実際のプロジェクトに取り組み、業界の専門家から個別の指導を受けることができます。初心者でも経験豊富な開発者でも、当社のプログラムは Web 開発スキルを次のレベルに引き上げられるように設計されています。

Web 開発の旅を加速するこの機会をお見逃しなく。今すぐ Web 開発ブートキャンプに応募して、Web 開発のエキサイティングな分野での可能性を最大限に引き出してください。一緒に素晴らしいデジタルエクスペリエンスを構築し、ウェブの未来を形作っていきましょう。

NextAuth.js と Prisma を使用した Next.js 13 プロジェクトへのパスワードレスログインの実装

パスワードレスログインとは何ですか?

依存関係をインストールする

Prisma のセットアップ

Supabase を使用した PostgreSQL

キャリアサービス

連絡を取り合いましょう

NextAuth.js と Prisma を使用した Next.js 13 プロジェクトへのパスワードレス ログインの実装

パスワードレスログインとは何ですか?

依存関係をインストールする

Prisma のセットアップ

Supabase を使用した PostgreSQL

キャリアサービス

連絡を取り合いましょう

NextAuth.js と Prisma を使用した Next.js 13 プロジェクトへのパスワードレスログインの実装