이메일 프로바이더

이 로그인 방식은 사용자가 로그인 폼에 이메일 주소를 입력하는 것으로 시작합니다. 그런 다음 제공된 이메일 주소로 **인증 토큰(Verification Token)**이 전송됩니다. 사용자는 이메일 본문의 링크를 클릭하여 토큰을 “소비”하고 계정을 등록할 수 있습니다. 이 과정은 24시간 이내에 완료해야 하며, 그렇지 않으면 인증 토큰이 만료되고 새로운 토큰을 요청해야 합니다.

💡

이메일 프로바이더는 JSON Web Tokens(JWT)와 데이터베이스 세션 모두와 함께 사용할 수 있습니다. 어떤 방식을 선택하든, 반드시 데이터베이스를 구성해야 합니다. 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/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">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: "/" })}
    >
      로그인
    </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 설정

데이터베이스 어댑터

이전에 언급했듯이, 데이터베이스 어댑터를 설정했는지 확인하세요. 비밀번호 없는 로그인 기능이 동작하려면 데이터베이스가 필요합니다. 이는 검증 토큰을 저장해야 하기 때문입니다.

환경 변수 설정

위 예시처럼 환경 변수를 설정하면 Auth.js가 자동으로 이를 인식합니다.
필요한 경우 환경 변수 이름을 다르게 지정할 수도 있지만, 이 경우에는 수동으로 프로바이더에 전달해야 합니다.

.env

AUTH_RESEND_KEY=abc123

Resend 프로바이더 설정

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"

로그인 버튼 추가

다음으로, 여러분의 애플리케이션의 Navbar 같은 곳에 로그인(Signin) 버튼을 추가할 수 있습니다. 이 버튼은 사용자에게 매직 링크가 포함된 이메일을 보내 로그인할 수 있게 해줍니다.

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

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"

로그인 버튼 추가하기

다음으로, 여러분의 애플리케이션의 네비게이션 바(Navbar) 같은 곳에 로그인 버튼을 추가할 수 있습니다. 이 버튼은 사용자에게 매직 링크가 포함된 이메일을 보내 로그인을 할 수 있게 해줍니다.

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

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/private"
 
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>

Postmark 설정

데이터베이스 어댑터

앞서 언급한 대로 데이터베이스 어댑터 설정을 완료했는지 확인하세요. 비밀번호 없이 로그인을 사용하려면 검증 토큰을 저장할 데이터베이스가 필요합니다.

환경 변수 설정

위 예시와 같은 형식으로 환경 변수를 설정하면 Auth.js가 자동으로 이를 인식합니다.
필요한 경우 환경 변수에 다른 이름을 사용할 수도 있지만, 이 경우에는 해당 변수를 프로바이더에 수동으로 전달해야 합니다.

.env

AUTH_POSTMARK_KEY=abc123

프로바이더 설정

Postmark를 Auth.js 설정에서 로그인 옵션으로 활성화해 보겠습니다. 먼저 패키지에서 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/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"

로그인 버튼 추가하기

다음으로, 여러분의 애플리케이션에서 Navbar 같은 곳에 로그인 버튼을 추가할 수 있습니다. 이 버튼은 사용자에게 매직 링크가 포함된 이메일을 보내 로그인을 할 수 있게 해줍니다.

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

루프 설정

데이터베이스 어댑터

Loops에서 트랜잭션 이메일 템플릿 만들기

Loops는 트랜잭션 이메일 템플릿을 시작하는 데 도움이 되는 가이드를 제공합니다.
이 프로바이더는 템플릿에 하나의 데이터 변수인 url만 전달합니다. 이 변수는 로그인을 위한 매직 링크입니다. 대소문자를 구분하므로 템플릿에서 url을 정확히 사용해야 합니다.
템플릿 생성 마지막 페이지에서 TRANSACTIONAL ID를 복사해야 합니다. 이 단계를 건너뛰었다면 걱정하지 마세요. 템플릿 편집 페이지에서 언제든지 확인할 수 있습니다.

Loops에서 API 키 생성하기

Loops와 인증하려면 API 키를 생성해야 합니다. 이 키는 비밀로 유지하고 누구와도 공유하지 않아야 합니다.
API 설정 페이지로 이동해 “Generate”를 클릭하면 키를 생성할 수 있습니다.
키 이름은 “Auth.js”처럼 여러분에게 의미 있는 이름으로 지정하는 것이 좋습니다.

환경 변수 설정

Loops를 구현하려면 다음 환경 변수를 설정해야 합니다. 이전 단계에서 이미 이 변수들을 가지고 있을 것입니다.

.env

AUTH_LOOPS_KEY=abc123
AUTH_LOOPS_TRANSACTIONAL_ID=def456

Loops 프로바이더 설정

Auth.js 설정에서 Loops를 로그인 옵션으로 활성화해 보겠습니다. 먼저 패키지에서 Loops 프로바이더를 가져와서, 이전에 설정한 Auth.js 설정 파일의 프로바이더 배열에 추가해야 합니다.

./auth.ts

import NextAuth from "next-auth"
import Loops from "next-auth/providers/loops"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    Loops({
      apiKey: process.env.AUTH_LOOPS_KEY,
      transactionalId: process.env.AUTH_LOOPS_TRANSACTIONAL_ID,
    }),
  ],
})

./src/auth.ts

import SvelteKitAuth from "@auth/sveltekit"
import Loops from "@auth/sveltekit/providers/loops"
import {
  AUTH_LOOPS_KEY,
  AUTH_LOOPS_TRANSACTIONAL_ID,
} from "$env/static/private"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [
    Loops({
      apiKey: AUTH_LOOPS_KEY,
      transactionalId: AUTH_LOOPS_TRANSACTIONAL_ID,
    }),
  ],
})

./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("loops", formData)
      }}
    >
      <input type="text" name="email" placeholder="Email" />
      <button type="submit">Sign in with Loops</button>
    </form>
  )
}

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="loops"/>
  </nav>
</div>

애플리케이션을 시작하고, 방금 추가한 로그인 버튼을 클릭하면 Auth.js가 제공하는 기본 로그인 페이지가 나타납니다. 이 페이지에서 이메일을 통해 로그인할 수 있는 옵션이 제공됩니다. 사용자는 이메일을 입력하고 “Loops로 로그인” 버튼을 클릭하면, 아름답게 포맷된 로그인 이메일을 받게 됩니다. 이메일 안의 링크를 클릭하면 사용자는 애플리케이션으로 리디렉션되며, 이미 인증된 상태로 접속하게 됩니다!

Mailgun 설정

데이터베이스 어댑터

환경 변수 설정

Auth.js는 위 예시와 같은 형식으로 환경 변수를 자동으로 인식합니다.
필요한 경우 환경 변수에 다른 이름을 사용할 수도 있지만, 이 경우에는 수동으로 프로바이더에 전달해야 합니다.

.env

AUTH_MAILGUN_KEY=abc123

프로바이더 설정

Mailgun을 로그인 옵션으로 활성화해 보겠습니다. Auth.js 설정에서 이를 구성할 수 있습니다. 먼저, 패키지에서 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/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"

로그인 버튼 추가히기

다음으로, 여러분의 애플리케이션에서 Navbar 같은 곳에 로그인 버튼을 추가할 수 있습니다. 이 버튼은 사용자에게 매직 링크가 포함된 이메일을 보내 로그인할 수 있게 해줍니다.

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

이메일 프로바이더

프로바이더

이메일 전달 설정

데이터베이스 어댑터

환경 변수 설정

프로바이더 설정

로그인 버튼 추가하기

로그인

Resend 설정

데이터베이스 어댑터

환경 변수 설정

Resend 프로바이더 설정

로그인 버튼 추가

로그인

Sendgrid 설정

데이터베이스 어댑터

환경 변수 설정

프로바이더 설정

로그인 버튼 추가하기

로그인

Nodemailer 설정

nodemailer 설치하기

데이터베이스 어탭터

SMTP 전송 설정

로그인 버튼

로그인

Postmark 설정

데이터베이스 어댑터

환경 변수 설정

프로바이더 설정

로그인 버튼 추가하기

로그인

루프 설정

데이터베이스 어댑터

Loops에서 트랜잭션 이메일 템플릿 만들기

Loops에서 API 키 생성하기

환경 변수 설정

Loops 프로바이더 설정

로그인 버튼 추가하기

로그인

Mailgun 설정

데이터베이스 어댑터

환경 변수 설정

프로바이더 설정

로그인 버튼 추가히기

로그인

About Auth.js

Download

Acknowledgements

`nodemailer` 설치하기