使用 Resend 的魔法連結

在本教學中，我們將在 Next.js 應用程式中設定 Auth.js，以便能夠使用 Resend 登入。

魔法連結（也稱為「無密碼」）身份驗證是一種登入方法，它使用包含嵌入在 URL 中的驗證 Token 的電子郵件。當使用者點擊連結時，他們將被重新導向到您的 Auth.js 應用程式並登入，只要該驗證 Token 仍然有效。

設定 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"

由於這是一個 捕獲所有動態路由，它將回應所有相關的 Auth.js API 路由，以便您的應用程式可以使用 OAuth 2 協定與選定的 OAuth 提供者互動。

新增環境變數

如果您還沒有，請按照安裝章節中的說明建立一個 .env.local 檔案，並新增以下 Resend API 金鑰變數。

AUTH_SECRET="changeMe"
 
AUTH_RESEND_KEY=

一旦我們註冊了我們的帳戶和應用程式，我們將用來自 Resend 開發人員入口網站的正確金鑰填寫 AUTH_RESEND_KEY。

註冊您的應用程式

為了能夠使用 Resend 發送電子郵件，您需要做兩件事。

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

導覽至 https://127.0.0.1:3000。您應該會看到以下頁面

點擊 「登入」，您應該會被重新導向到預設的 Auth.js 登入頁面。您可以自訂此頁面以滿足您的需求。接下來，在電子郵件輸入欄位中輸入您的電子郵件地址，然後點擊 「使用 Resend 登入」。

前往您的電子郵件收件匣，您應該會找到來自您的 Auth.js 應用程式的電子郵件，其中包含標示為「登入」的按鈕。點擊此按鈕，您應該會被重新導向回您的本機開發應用程式並登入！

如果您回到了這裡，表示一切都運作正常！我們已經完成了整個無密碼身份驗證流程，以便您的使用者可以透過無密碼魔法連結登入您的應用程式！

部署

使用 Resend 部署您的 Auth.js 應用程式不需要進行任何其他變更。只要確保您已將所有必要的環境變數新增到您的生產環境中即可。請參閱部署頁面以獲取更多資訊。