电子邮件提供商

这种登录机制从用户在登录表单中提供其电子邮件地址开始。然后，一个**验证令牌**将发送到提供的电子邮件地址。用户随后有 24 小时的时间来点击电子邮件正文中的链接以“使用”该令牌并注册其帐户，否则验证令牌将过期，他们将需要请求一个新的令牌。

💡

电子邮件提供商可以与 JSON Web 令牌和数据库会话一起使用，无论您选择哪种方式，您都**仍然必须配置一个数据库**，以便 Auth.js 可以保存验证令牌并在用户尝试登录时查找它们。没有使用数据库，就不可能启用电子邮件提供商。

提供商

转发邮件设置

数据库适配器

请确保您已设置数据库适配器，如前所述，无密码登录需要数据库，因为验证令牌需要存储。

设置环境变量

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/[email protected]

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>

启动您的应用程序，一旦用户输入其电子邮件并点击登录按钮，他们将被重定向到一个页面，要求他们查看其电子邮件。当他们点击其电子邮件中的链接时，他们将登录。

查看我们的自定义魔法链接电子邮件，了解如何更改用户收到的登录电子邮件的外观和感觉。

有关此提供商的更多信息，请访问转发邮件文档页面。

Resend 设置

数据库适配器

请确保您已设置数据库适配器，如前所述，无密码登录需要数据库，因为验证令牌需要存储。

设置环境变量

.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/[email protected]

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 设置

数据库适配器

请确保您已设置数据库适配器，如前所述，无密码登录需要数据库，因为验证令牌需要存储。

设置环境变量

.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/[email protected]

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:[email protected]:587
EMAIL_FROM=[email protected]

./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/[email protected]

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 设置

数据库适配器

请确保您已设置数据库适配器，如前所述，无密码登录需要数据库，因为验证令牌需要存储。

设置环境变量

.env

AUTH_POSTMARK_KEY=abc123

设置提供商

让我们在我们的 Auth.js 配置中启用 Postmark 作为登录选项。您需要从包中导入 Postmark 提供商，并将其传递给我们在 Auth.js 配置文件中之前设置的提供商数组

./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/[email protected]

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 设置

数据库适配器

请确保您已设置数据库适配器，如前所述，无密码登录需要数据库，因为验证令牌需要存储。

设置环境变量

.env

AUTH_MAILGUN_KEY=abc123

设置提供商

让我们在我们的 Auth.js 配置中启用 Mailgun 作为登录选项。您需要从包中导入 Mailgun 提供商，并将其传递给我们在 Auth.js 配置文件中之前设置的提供商数组

./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/[email protected]

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 凭据

电子邮件提供商

提供商

转发邮件设置

数据库适配器

设置环境变量

设置提供商

Resend 设置

数据库适配器

设置环境变量

设置提供商

Sendgrid 设置

数据库适配器

设置环境变量

设置提供商

Nodemailer 设置

安装 `nodemailer`

数据库适配器

SMTP 传输配置

Postmark 设置

数据库适配器

设置环境变量

设置提供商

Mailgun 设置

数据库适配器

设置环境变量

设置提供商

关于 Auth.js

下载

鸣谢

电子邮件提供商

提供商

转发邮件设置

数据库适配器

设置环境变量

设置提供商

添加登录按钮

登录

Resend 设置

数据库适配器

设置环境变量

设置提供商

添加登录按钮

登录

Sendgrid 设置

数据库适配器

设置环境变量

设置提供商

添加登录按钮

登录

Nodemailer 设置

安装 nodemailer

数据库适配器

SMTP 传输配置

登录按钮

登录

Postmark 设置

数据库适配器

设置环境变量

设置提供商

添加登录按钮

登录

Mailgun 设置

数据库适配器

设置环境变量

设置提供商

添加登录按钮

登录

关于 Auth.js

下载

鸣谢

安装 `nodemailer`