Resend を使用したマジックリンク

このチュートリアルでは、Resend でログインできるように、Next.js アプリケーションで Auth.js を設定します。

マジックリンク（「パスワードレス」とも呼ばれます）認証は、URL に埋め込まれた検証トークンを含むメールを使用するログイン方法です。ユーザーがリンクをクリックすると、検証トークンがまだ有効である限り、Auth.js アプリにリダイレクトされ、ログインされます。

Auth.js のセットアップ

Auth.js と Next.js のインストール

このチュートリアルでは、デフォルトの Auth.js & Next.js サンプルアプリを使用します。既存の Next.js アプリがある場合は、それも動作するはずです。ない場合は、リポジトリをクローンしてください。

git clone https://github.com/nextauthjs/next-auth-example.git && cd next-auth-example

サンプルアプリを使用している場合、Auth.js はすでにインストールされています。そうでない場合は、インストール手順に従ってください。

サーバー構成の作成

次に、Auth.js の必要な構成と動的ルートハンドラーを含む、メインの Auth.js 構成ファイルを作成します。

import NextAuth from "next-auth"
import Resend from "next-auth/providers/resend"
 
export const { handlers, auth } = NextAuth({
  providers: [Resend],
})

export { GET, POST } from "@/auth"

これは キャッチオールの動的ルートであるため、アプリケーションが OAuth 2 プロトコルを使用して選択した OAuth プロバイダーと対話できるように、関連するすべての Auth.js API ルートに応答します。

環境変数の追加

インストールセクションで説明されているように、.env.local ファイルを作成していない場合は作成し、次の Resend API キー変数を追加します。

AUTH_SECRET="changeMe"
 
AUTH_RESEND_KEY=

AUTH_RESEND_KEY には、アカウントとアプリケーションを登録したら、Resend 開発者ポータルから適切なキーを入力します。

アプリの登録

Resend を使用してメールを送信できるようにするには、次の 2 つを行う必要があります。

1. API キーを作成する
2. ドメインを検証する

API キー

Resend でアカウントにサインアップし、メインのサイドバーにある 「API キー」に移動する必要があります。そこで、「API キーを作成」をクリックできます。「送信アクセス」のみが必要です。

ドメイン

ドメインを検証するには、Resend ドキュメントに従い、ドメインですべての設定が完了したら戻ってきてください。

次に、from アドレスを、Resend で構成および検証したドメインからのものになるように更新する必要があります。

import NextAuth from "next-auth"
import Resend from "next-auth/providers/resend"
 
export const { handlers, auth } = NextAuth({
  providers: [
    Resend({
      from: "auth@app.company.com",
    }),
  ],
})

すべてを接続する

必要な API キーを入手したので、先ほど作成した .env.local ファイルに貼り付けます。

AUTH_SECRET="changeMe"
 
AUTH_RESEND_KEY={apiKey}

すべてが揃ったので、ローカル開発サーバーを起動してログインプロセスをテストできます。

npm run dev

pnpm run dev

yarn dev

bun run dev

http://localhost:3000 に移動します。次のページが表示されるはずです。

「サインイン」をクリックすると、デフォルトの Auth.js サインインページにリダイレクトされます。このページは、ニーズに合わせてカスタマイズできます。次に、メール入力フィールドにメールアドレスを入力し、「Resend でサインイン」をクリックします。

メールの受信トレイに移動すると、Auth.js アプリケーションからのメールが見つかり、そこに「サインイン」というラベルのボタンがあります。このボタンをクリックすると、ローカル開発アプリにリダイレクトされ、サインインされるはずです。

ここに戻ってきた場合は、すべてが正常に機能したことを意味します。ユーザーがパスワードレスのマジックリンクを介してアプリケーションにログインできるように、パスワードレス認証フロー全体を完了しました！

デプロイ

Resend を使用した Auth.js アプリケーションのデプロイには、他の変更は必要ありません。必要なすべての環境変数を本番環境に追加したことを確認してください。詳細については、デプロイメントページを参照してください。