電子郵件供應商

此登入機制首先由使用者在登入表單上提供其電子郵件地址。然後，系統會將驗證權杖傳送到所提供的電子郵件地址。使用者有 24 小時的時間點擊電子郵件內文中的連結以「使用」該權杖並註冊他們的帳戶，否則驗證權杖將過期，他們必須要求新的權杖。

💡

電子郵件供應商可以搭配 JSON Web Tokens 和資料庫工作階段一起使用。無論您選擇哪一種，您仍然必須設定資料庫，以便 Auth.js 可以儲存驗證權杖，並在使用者嘗試登入時查詢這些權杖。不使用資料庫無法啟用電子郵件供應商。

供應商

Forward Email 設定

資料庫轉接器

請確保您已設定資料庫轉接器，如前所述，無密碼登入需要資料庫才能運作，因為需要儲存驗證權杖。

設定環境變數

如果格式如上例所示，Auth.js 會自動擷取這些變數。如果需要，您也可以使用不同的環境變數名稱，但這樣您需要手動將它們傳遞給供應商。

.env

AUTH_FORWARDEMAIL_KEY=abc123

設定供應商

讓我們在 Auth.js 設定中啟用 ForwardEmail 作為登入選項。您必須從套件匯入 ForwardEmail 供應商，並將其傳遞給我們稍早在 Auth.js 設定檔中設定的供應商陣列

./auth.ts

import NextAuth from "next-auth"
import ForwardEmail from "next-auth/providers/forwardemail"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [ForwardEmail],
})

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import ForwardEmail from "@auth/qwik/providers/forwardemail"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [ForwardEmail],
  })
)

./src/auth.ts

import SvelteKitAuth from "@auth/sveltekit"
import ForwardEmail from "@auth/sveltekit/providers/forwardemail"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [ForwardEmail],
})

./src/hooks.server.ts

export { handle } from "./auth"

接下來，我們可以在應用程式的某個地方（例如導覽列）新增登入按鈕。這會將一封電子郵件傳送給使用者，其中包含登入的魔法連結。

./components/sign-in.tsx

import { signIn } from "../../auth.ts"
 
export function SignIn() {
  return (
    <form
      action={async (formData) => {
        "use server"
        await signIn("forwardemail", formData)
      }}
    >
      <input type="text" name="email" placeholder="Email" />
      <button type="submit">Signin with Forward Email</button>
    </form>
  )
}

./components/sign-in.tsx

import { component$ } from "@builder.io/qwik"
import { useSignIn } from "./plugin@auth"
 
export default component$(() => {
  const signInSig = useSignIn()
 
  return (
    <button
      onClick$={() => signInSig.submit({ redirectTo: "/" })}
    >
      SignIn
    </button>
  )
})

src/routes/+page.svelte

<script lang="ts">
  import { SignIn } from "@auth/sveltekit/components"
</script>
 
<div>
  <nav>
    <img src="/img/logo.svg" alt="Company Logo" />
    <SignIn provider="forwardemail" />
  </nav>
</div>

啟動您的應用程式，一旦使用者輸入他們的電子郵件並點擊登入按鈕，他們將被重新導向到一個頁面，要求他們檢查電子郵件。當他們點擊電子郵件中的連結時，他們將會登入。

請查看我們的自訂魔法連結電子郵件，以了解如何變更使用者收到的登入電子郵件的外觀和風格。

如需有關此供應商的更多資訊，請前往Forward Email 文件頁面。

Resend 設定

資料庫轉接器

請確保您已設定資料庫轉接器，如前所述，無密碼登入需要資料庫才能運作，因為需要儲存驗證權杖。

設定環境變數

如果格式如上例所示，Auth.js 會自動擷取這些變數。如果需要，您也可以使用不同的環境變數名稱，但這樣您需要手動將它們傳遞給供應商。

.env

AUTH_RESEND_KEY=abc123

設定供應商

讓我們在 Auth.js 設定中啟用 Resend 作為登入選項。您必須從套件匯入 Resend 供應商，並將其傳遞給我們稍早在 Auth.js 設定檔中設定的供應商陣列

./auth.ts

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

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import Resend from "@auth/qwik/providers/resend"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [Resend],
  })
)

./src/auth.ts

import SvelteKitAuth from "@auth/sveltekit"
import Resend from "@auth/sveltekit/providers/resend"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [Resend],
})

./src/hooks.server.ts

export { handle } from "./auth"

接下來，我們可以在應用程式的某個地方（例如導覽列）新增登入按鈕。這會將一封電子郵件傳送給使用者，其中包含登入的魔法連結。

./components/sign-in.tsx

import { signIn } from "../../auth.ts"
 
export function SignIn() {
  return (
    <form
      action={async (formData) => {
        "use server"
        await signIn("resend", formData)
      }}
    >
      <input type="text" name="email" placeholder="Email" />
      <button type="submit">Signin with Resend</button>
    </form>
  )
}

./components/sign-in.tsx

"use client"
import { signIn } from "next-auth/react"
 
export function SignIn() {
  const resendAction = (formData: FormData) => {
    signIn("resend", formData)
  }
 
  return (
    <form action={resendAction}>
      <label htmlFor="email-resend">
        Email
        <input type="email" id="email-resend" name="email" />
      </label>
      <input type="submit" value="Signin with Resend" />
    </form>
  )
}

./components/sign-in.tsx

import { component$ } from "@builder.io/qwik"
import { useSignIn } from "./plugin@auth"
 
export default component$(() => {
  const signInSig = useSignIn()
 
  return (
    <button
      onClick$={() => signInSig.submit({ redirectTo: "/" })}
    >
      SignIn
    </button>
  )
})

src/routes/+page.svelte

<script lang="ts">
  import { SignIn } from "@auth/sveltekit/components"
</script>
 
<div>
  <nav>
    <img src="/img/logo.svg" alt="Company Logo" />
    <SignIn provider="resend" />
  </nav>
</div>

請查看我們的自訂魔法連結電子郵件，以了解如何變更使用者收到的登入電子郵件的外觀和風格。

如需有關此供應商的更多資訊，請前往Resend 文件頁面。

Sendgrid 設定

資料庫轉接器

請確保您已設定資料庫轉接器，如前所述，無密碼登入需要資料庫才能運作，因為需要儲存驗證權杖。

設定環境變數

如果格式如上例所示，Auth.js 會自動擷取這些變數。如果需要，您也可以使用不同的環境變數名稱，但這樣您需要手動將它們傳遞給供應商。

.env

AUTH_SENDGRID_KEY=abc123

設定供應商

讓我們在 Auth.js 設定中啟用 Sendgrid 作為登入選項。您必須從套件匯入 Sendgrid 供應商，並將其傳遞給我們稍早在 Auth.js 設定檔中設定的供應商陣列

./auth.ts

import NextAuth from "next-auth"
import Sendgrid from "next-auth/providers/sendgrid"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [Sendgrid],
})

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import Sendgrid from "@auth/qwik/providers/sendgrid"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [Sendgrid],
  })
)

./src/auth.ts

import SvelteKitAuth from "@auth/sveltekit"
import Sendgrid from "@auth/sveltekit/providers/sendgrid"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [Sendgrid],
})

./src/hooks.server.ts

export { handle } from "./auth"

接下來，我們可以在應用程式的某個地方（例如導覽列）新增登入按鈕。這會將一封電子郵件傳送給使用者，其中包含登入的魔法連結。

./components/sign-in.tsx

import { signIn } from "../../auth.ts"
 
export function SignIn() {
  return (
    <form
      action={async (formData) => {
        "use server"
        await signIn("sendgrid", formData)
      }}
    >
      <input type="text" name="email" placeholder="Email" />
      <button type="submit">Signin with Sendgrid</button>
    </form>
  )
}

./components/sign-in.tsx

"use client"
import { signIn } from "next-auth/react"
 
export function SignIn() {
  const sendgridAction = (formData: FormData) => {
    signIn("sendgrid", formData)
  }
 
  return (
    <form action={sendgridAction}>
      <label htmlFor="email-sendgrid">
        Email
        <input type="email" id="email-sendgrid" name="email" />
      </label>
      <input type="submit" value="Signin with Sendgrid" />
    </form>
  )
}

./components/sign-in.tsx

import { component$ } from "@builder.io/qwik"
import { useSignIn } from "./plugin@auth"
 
export default component$(() => {
  const signInSig = useSignIn()
 
  return (
    <button
      onClick$={() => signInSig.submit({ redirectTo: "/" })}
    >
      SignIn
    </button>
  )
})

src/routes/+page.svelte

<script lang="ts">
  import { SignIn } from "@auth/sveltekit/components"
</script>
 
<div>
  <nav>
    <img src="/img/logo.svg" alt="Company Logo" />
    <SignIn provider="sendgrid" />
  </nav>
</div>

請查看我們的自訂魔法連結電子郵件，以了解如何變更使用者收到的登入電子郵件的外觀和風格。

如需有關此供應商的更多資訊，請前往Sendgrid 文件頁面。

Nodemailer 設定

安裝 `nodemailer`

Auth.js 不包含 nodemailer 作為相依性，因此如果您想使用 Nodemailer 供應商，則需要自行安裝。

npm install nodemailer

pnpm add nodemailer

yarn add nodemailer

bun add nodemailer

您需要存取 SMTP 伺服器，最好是來自已知可與 nodemailer 搭配使用的服務之一。或者，Nodemailer 也支援其他傳輸機制。

資料庫轉接器

請確保您已設定資料庫轉接器，如前所述，魔法連結登入需要資料庫才能運作，因為需要儲存驗證權杖。

SMTP 傳輸設定

設定 SMTP 伺服器連線有兩種方式：使用連線字串或設定物件。

.env

EMAIL_SERVER=smtp://username:password@smtp.example.com:587
EMAIL_FROM=noreply@example.com

./auth.ts

import NextAuth from "next-auth"
import Nodemailer from "next-auth/providers/nodemailer"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    Nodemailer({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM,
    }),
  ],
})

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import Nodemailer from "@auth/qwik/providers/nodemailer"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [
      Nodemailer({
        server: import.meta.env.EMAIL_SERVER,
        from: import.meta.env.EMAIL_FROM,
      }),
    ],
  })
)

./src/auth.ts

import SvelteKitAuth from "@auth/sveltekit"
import Nodemailer from "@auth/sveltekit/providers/nodemailer"
import { env } from "$env/dynamic/prviate"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [
    Nodemailer({
      server: env.EMAIL_SERVER,
      from: env.EMAIL_FROM,
    }),
  ],
})

./src/hooks.server.ts

export { handle } from "./auth"

接下來，我們可以在應用程式的某處（例如導覽列）新增一個登入按鈕。這會將使用者轉送到 Auth.js 的預設登入頁面。

./components/sign-in.tsx

import { signIn } from "../../auth.ts"
 
export function SignIn() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn()
      }}
    >
      <button type="submit">Sign In</button>
    </form>
  )
}

./components/sign-in.tsx

import { component$ } from "@builder.io/qwik"
import { useSignIn } from "./plugin@auth"
 
export default component$(() => {
  const signInSig = useSignIn()
 
  return (
    <button
      onClick$={() => signInSig.submit({ redirectTo: "/" })}
    >
      SignIn
    </button>
  )
})

src/routes/+page.svelte

<script lang="ts">
  import { signIn } from '@auth/sveltekit/client'
</script>
 
<div>
  <nav>
    <img src="/img/logo.svg" alt="Company Logo" />
    <button on:click={signIn}>Signin</button>
  </nav>
</div>

啟動您的應用程式，點擊我們剛新增的登入按鈕，您應該會看到 Auth.js 內建的登入頁面，並可選擇使用電子郵件登入。

輸入您的電子郵件並點擊「使用電子郵件登入」。您應該會收到來自 Auth.js 的電子郵件，點擊該郵件後，您應該會被重新導向至您的應用程式，並已完成驗證。

有關此供應商的更多資訊，請前往Nodemailer 文件頁面。

Postmark 設定

資料庫介面卡

請確保您已設定資料庫轉接器，如前所述，無密碼登入需要資料庫才能運作，因為需要儲存驗證權杖。

設定環境變數

如果格式如上例所示，Auth.js 會自動擷取這些變數。如果需要，您也可以使用不同的環境變數名稱，但這樣您需要手動將它們傳遞給供應商。

.env

AUTH_POSTMARK_KEY=abc123

設定供應商

讓我們在 Auth.js 設定中啟用 Postmark 作為登入選項。您必須從套件匯入 Postmark 供應商，並將其傳遞給我們先前在 Auth.js 設定檔中設定的 providers 陣列。

./auth.ts

import NextAuth from "next-auth"
import Postmark from "next-auth/providers/postmark"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [Postmark],
})

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import Postmark from "@auth/qwik/providers/postmark"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [Postmark],
  })
)

./src/auth.ts

import SvelteKitAuth from "@auth/sveltekit"
import Postmark from "@auth/sveltekit/providers/postmark"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [Postmark],
})

./src/hooks.server.ts

export { handle } from "./auth"

接下來，我們可以在應用程式的某個地方（例如導覽列）新增登入按鈕。這會將一封電子郵件傳送給使用者，其中包含登入的魔法連結。

./components/sign-in.tsx

import { signIn } from "../../auth.ts"
 
export function SignIn() {
  return (
    <form
      action={async (formData) => {
        "use server"
        await signIn("postmark", formData)
      }}
    >
      <input type="text" name="email" placeholder="Email" />
      <button type="submit">Signin with Postmark</button>
    </form>
  )
}

./components/sign-in.tsx

"use client"
import { signIn } from "next-auth/react"
 
export function SignIn() {
  const postmarkAction = (formData: FormData) => {
    signIn("postmark", formData)
  }
 
  return (
    <form action={postmarkAction}>
      <label htmlFor="email-postmark">
        Email
        <input type="email" id="email-postmark" name="email" />
      </label>
      <input type="submit" value="Signin with Postmark" />
    </form>
  )
}

./components/sign-in.tsx

import { component$ } from "@builder.io/qwik"
import { useSignIn } from "./plugin@auth"
 
export default component$(() => {
  const signInSig = useSignIn()
 
  return (
    <button
      onClick$={() => signInSig.submit({ redirectTo: "/" })}
    >
      SignIn
    </button>
  )
})

src/routes/+page.svelte

<script lang="ts">
  import { SignIn } from "@auth/sveltekit/components"
</script>
 
<div>
  <nav>
    <img src="/img/logo.svg" alt="Company Logo" />
    <SignIn provider="postmark" />
  </nav>
</div>

請查看我們的自訂魔術連結電子郵件，了解如何變更使用者接收以進行登入的電子郵件的外觀和風格。

有關此供應商的更多資訊，請前往Postmark 文件頁面。

Mailgun 設定

資料庫介面卡

請確保您已設定資料庫轉接器，如前所述，無密碼登入需要資料庫才能運作，因為需要儲存驗證權杖。

設定環境變數

如果格式如上例所示，Auth.js 會自動擷取這些變數。如果需要，您也可以使用不同的環境變數名稱，但這樣您需要手動將它們傳遞給供應商。

.env

AUTH_MAILGUN_KEY=abc123

設定供應商

讓我們在 Auth.js 設定中啟用 Mailgun 作為登入選項。您必須從套件匯入 Mailgun 供應商，並將其傳遞給我們先前在 Auth.js 設定檔中設定的 providers 陣列。

./auth.ts

import NextAuth from "next-auth"
import Mailgun from "next-auth/providers/mailgun"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [Mailgun],
})

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import Mailgun from "@auth/qwik/providers/mailgun"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [Mailgun],
  })
)

./src/auth.ts

import SvelteKitAuth from "@auth/sveltekit"
import Mailgun from "@auth/sveltekit/providers/mailgun"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [Mailgun],
})

./src/hooks.server.ts

export { handle } from "./auth"

接下來，我們可以在應用程式的某個地方（例如導覽列）新增登入按鈕。這會將一封電子郵件傳送給使用者，其中包含登入的魔法連結。

./components/sign-in.tsx

import { signIn } from "../../auth.ts"
 
export function SignIn() {
  return (
    <form
      action={async (formData) => {
        "use server"
        await signIn("mailgun", formData)
      }}
    >
      <input type="text" name="email" placeholder="Email" />
      <button type="submit">Signin with Mailgun</button>
    </form>
  )
}

./components/sign-in.tsx

import { component$ } from "@builder.io/qwik"
import { useSignIn } from "./plugin@auth"
 
export default component$(() => {
  const signInSig = useSignIn()
 
  return (
    <button
      onClick$={() => signInSig.submit({ redirectTo: "/" })}
    >
      SignIn
    </button>
  )
})

src/routes/+page.svelte

<script lang="ts">
  import { SignIn } from "@auth/sveltekit/components"
</script>
 
<div>
  <nav>
    <img src="/img/logo.svg" alt="Company Logo" />
    <SignIn provider="mailgun" />
  </nav>
</div>

請查看我們的自訂魔術連結電子郵件，了解如何變更使用者接收以進行登入的電子郵件的外觀和風格。

有關此供應商的更多資訊，請前往Mailgun 文件頁面。

OAuth 憑證

電子郵件供應商

供應商

Forward Email 設定

資料庫轉接器

設定環境變數

設定供應商

Resend 設定

資料庫轉接器

設定環境變數

設定供應商

Sendgrid 設定

資料庫轉接器

設定環境變數

設定供應商

Nodemailer 設定

安裝 `nodemailer`

資料庫轉接器

SMTP 傳輸設定

Postmark 設定

資料庫介面卡

設定環境變數

設定供應商

Mailgun 設定

資料庫介面卡

設定環境變數

設定供應商

關於 Auth.js

下載

鳴謝

電子郵件供應商

供應商

Forward Email 設定

資料庫轉接器

設定環境變數

設定供應商

新增登入按鈕

登入

Resend 設定

資料庫轉接器

設定環境變數

設定供應商

新增登入按鈕

登入

Sendgrid 設定

資料庫轉接器

設定環境變數

設定供應商

新增登入按鈕

登入

Nodemailer 設定

安裝 nodemailer

資料庫轉接器

SMTP 傳輸設定

登入按鈕

登入

Postmark 設定

資料庫介面卡

設定環境變數

設定供應商

新增登入按鈕

登入

Mailgun 設定

資料庫介面卡

設定環境變數

設定供應商

新增登入按鈕

登入

關於 Auth.js

下載

鳴謝

安裝 `nodemailer`