メールプロバイダー

このログインメカニズムは、ユーザーがログインフォームでメールアドレスを入力することから始まります。次に、認証トークンが入力されたメールアドレスに送信されます。ユーザーはメール本文にあるリンクをクリックしてトークンを「消費」し、アカウントを登録するために24時間の猶予があります。さもなければ、認証トークンは期限切れとなり、新しいトークンを要求する必要があります。

💡

メールプロバイダーは、JSON Web Tokenとデータベースセッションの両方で使用できます。どちらを選択する場合でも、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"

次に、Navbar のように、アプリケーションのどこかにサインインボタンを追加できます。これにより、サインインするためのマジックリンクを含むメールがユーザーに送信されます。

./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 の設定

データベースアダプター

環境変数の設定

.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 の設定

データベースアダプター

環境変数の設定

.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

nodemailer と連携することが知られているサービスのいずれかからの SMTP サーバーへのアクセスが必要です。あるいは、Nodemailer は他のトランスポートメカニズムもサポートしています。

データベースアダプター

前述のとおり、マジックリンクログインを機能させるには認証トークンを保存する必要があるため、必ずデータベースアダプターを設定してください。

SMTP トランスポートの構成

SMTP サーバー接続を構成する方法は 2 つあります。接続文字列を使用するか、構成オブジェクトを使用します。

.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"

次に、Navbar のように、アプリケーションのどこかにサインインボタンを追加できます。これにより、ユーザーは 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設定ファイルの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の設定

データベースアダプター

環境変数の設定

.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` をインストールする