Add NotificationAPI email provider and docs

.github/ISSUE_TEMPLATE/2_bug_provider.yml

@@ -74,6 +74,7 @@ body:
         - "Netlify"
         - "NetSuite"
         - "Nextcloud"
+        - "NotificationAPI"
         - "Notion"
         - "Okta"
         - "OneLogin"

docs/pages/getting-started/authentication/email.mdx

@@ -41,6 +41,14 @@ This login mechanism starts by the user providing their email address at the log
         <img className="size-16 dark:bg-[currentColor]" src={`/img/providers/forwardemail.svg`} />
         <div className="text-sm text-center line-clamp-1">Forward Email</div>
       </RichTabs.Trigger>
+      <RichTabs.Trigger
+        value="notificationapi"
+        orientation="vertical"
+        className="!border border-neutral-200 dark:border-neutral-700 aria-selected:!bg-neutral-100 aria-selected:dark:!bg-neutral-950 dark:!bg-neutral-900 !bg-white !h-auto !w-auto !gap-2 !justify-start p-6 px-8 rounded-md outline-none transition-all duration-300 hover:bg-neutral-200 !font-normal"
+      >
+        <img className="size-16 dark:bg-[currentColor]" src={`/img/providers/notificationapi.svg`} />
+        <div className="text-sm text-center">NotificationAPI</div>
+      </RichTabs.Trigger>
       <RichTabs.Trigger
         value="resend"
         orientation="vertical"
@@ -244,6 +252,194 @@ For more information on this provider go to the [Forward Email docs page](/getti
 
 </RichTabs.Content>
 
+<RichTabs.Content
+  orientation="vertical"
+  value="notificationapi"
+  className="h-full !border-0 !w-full"
+  tabIndex={-1}
+>
+
+### NotificationAPI Setup
+
+<Steps>
+
+### Database Adapter
+
+Please make sure you've [setup a database adapter](/getting-started/database), as mentioned earlier,
+a database is required for passwordless login to work as verification tokens need to be stored.
+
+### Setup Environment Variables
+
+Auth.js will automatically pick up these if formatted like the example below.
+You can [also use a different name for the environment variables](/guides/environment-variables#oauth-variables) if needed, but then you’ll need to pass them to the provider manually.
+
+```bash filename=".env"
+NOTIFICATIONAPI_API_KEY=...
+```
+
+### Setup Provider
+
+Let’s enable `NotificationAPI` as a sign in option in our Auth.js configuration:
+
+<Code>
+<Code.Next>
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import NotificationAPI from "next-auth/providers/notificationapi"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  providers: [
+    NotificationAPI({
+      notificationId: "auth_magic_link",
+    }),
+  ],
+})
+```
+
+</Code.Next>
+<Code.Qwik>
+
+```ts filename="/src/routes/[email protected]"
+import { QwikAuth$ } from "@auth/qwik"
+import NotificationAPI from "@auth/qwik/providers/notificationapi"
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+  () => ({
+    providers: [
+      NotificationAPI({
+        notificationId: "auth_magic_link",
+      }),
+    ],
+  })
+)
+```
+
+</Code.Qwik>
+<Code.Svelte>
+
+```ts filename="./src/auth.ts"
+import SvelteKitAuth from "@auth/sveltekit"
+import NotificationAPI from "@auth/sveltekit/providers/notificationapi"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+  providers: [
+    NotificationAPI({
+      notificationId: "auth_magic_link",
+    }),
+  ],
+})
+```
+
+```ts filename="./src/hooks.server.ts"
+export { handle } from "./auth"
+```
+
+</Code.Svelte>
+</Code>
+
+### Add Signin Button
+
+Next, we can add a signin button somewhere in your application like the Navbar. This will send an email to the user containing the magic link to sign in.
+
+<Code>
+<Code.Next>
+
+```tsx filename="./components/sign-in.tsx"
+import { signIn } from "../../auth.ts"
+
+export function SignIn() {
+  return (
+    <form
+      action={async (formData) => {
+        "use server"
+        await signIn("notificationapi", formData)
+      }}
+    >
+      <input type="text" name="email" placeholder="Email" />
+      <button type="submit">Signin with NotificationAPI</button>
+    </form>
+  )
+}
+```
+
+</Code.Next>
+<Code.NextClient>
+
+```tsx filename="./components/sign-in.tsx"
+"use client"
+import { signIn } from "next-auth/react"
+
+export function SignIn() {
+  const notificationapiAction = (formData: FormData) => {
+    signIn("notificationapi", formData)
+  }
+
+  return (
+    <form action={notificationapiAction}>
+      <label htmlFor="email-notificationapi">
+        Email
+        <input type="email" id="email-notificationapi" name="email" />
+      </label>
+      <input type="submit" value="Signin with NotificationAPI" />
+    </form>
+  )
+}
+```
+
+</Code.NextClient>
+<Code.Qwik>
+
+```ts filename="./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>
+  )
+})
+```
+
+</Code.Qwik>
+<Code.Svelte>
+
+```html filename="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="notificationapi" />
+  </nav>
+</div>
+```
+
+</Code.Svelte>
+</Code>
+
+### Signin
+
+Start your application, once the user enters their Email and clicks on the signin button, they'll be redirected to a page that asks them to check their email. When they click on the link in their email, they will be signed in.
+
+</Steps>
+
+<Callout type="info">
+  You can visually design your magic link email template in NotificationAPI.
+</Callout>
+
+For more information on this provider go to the [NotificationAPI provider docs page](/getting-started/providers/notificationapi).
+
+</RichTabs.Content>
+
 <RichTabs.Content
   orientation="vertical"
   value="resend"

docs/pages/getting-started/providers/notificationapi.mdx

@@ -0,0 +1,110 @@
+import { Callout, Tabs } from "nextra/components"
+import { Code } from "@/components/Code"
+
+<img
+  align="right"
+  src="/img/providers/notificationapi.svg"
+  className="dark:bg-[currentColor]"
+  height="64"
+  width="96"
+/>
+
+# NotificationAPI Provider
+
+## Overview
+
+The [NotificationAPI](https://www.notificationapi.com) provider for Auth.js is an easy way to implement the "magic link" authentication flow with Email. It doesn't require additional integrations or writing HTML email templates.
+
+This flow can be used to sign in existing or new users by simply sending them a link.
+
+## Flow
+
+1. User inputs their email.
+2. Auth.js generates a <b>verification token</b> - valid for 24 hours by default - and stores it using the database adapter.
+3. NotificationAPI delivers the "Magic Link" via Email. The Magic Link is a URL containing the verification token. When visited, the token is passed to Auth.js which logs the user in.
+
+<Callout type="warning">
+  The magic link auth flow requires a [database
+  adapter](https://authjs.dev/getting-started/database) to work. The database is
+  used to store the verification tokens, to be matched later against what the
+  user provides.
+</Callout>
+
+## Setup
+
+### 1. NotificationAPI Account
+
+Create a [NotificationAPI account](https://app.notificationapi.com) and design a magic link email notification in the dashboard.
+
+Make sure to include the `{{url}}` parameter in the email design. This `{{url}}` tag will be dynamically replaced with the real URL.
+
+### 2. Auth.js Configuration
+
+Set up environment variables using the values from NotificationAPI's environments page:
+
+```sh
+NOTIFICATIONAPI_API_KEY=...
+```
+
+If you name your environment variable like the above, the provider will pick it up automatically.
+
+<Code>
+<Code.Next>
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import NotificationAPI from "next-auth/providers/notificationapi"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  adapter: ..., // you need an adapter for magic link auth flows
+  providers: [
+    NotificationAPI({
+      // The ID of the notification you designed in the NotificationAPI dashboard:
+      notificationId: "auth_magic_link"
+    }),
+  ],
+})
+```
+
+</Code.Next>
+<Code.Qwik>
+
+```ts filename="/src/routes/[email protected]"
+import { QwikAuth$ } from "@auth/qwik"
+import NotificationAPI from "@auth/qwik/providers/notificationapi"
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+  () => ({
+    adapter: ..., // you need an adapter for magic link auth flows
+    providers: [
+      NotificationAPI({
+        // The ID of the notification you designed in the NotificationAPI dashboard:
+        notificationId: "auth_magic_link"
+      }),
+    ],
+
+})
+)
+
+````
+
+</Code.Qwik>
+<Code.Svelte>
+
+```ts filename="./src/auth.ts"
+import { SvelteKitAuth } from "@auth/sveltekit"
+import NotificationAPI from "@auth/sveltekit/providers/notificationapi"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+  adapter: ..., // you need an adapter for magic link auth flows
+  providers: [
+    NotificationAPI({
+      // The ID of the notification you designed in the NotificationAPI dashboard:
+      notificationId: "auth_magic_link"
+    }),
+  ],
+})
+````
+
+</Code.Svelte>
+</Code>

packages/core/scripts/generate-providers.js

@@ -11,6 +11,7 @@ const emailProvidersFile = [
   "forwardemail",
   "mailgun",
   "nodemailer",
+  "notificationapi",
   "passkey",
   "postmark",
   "resend",