+ NotificationAPI
+ 
+
+
+
+```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",
+ }),
+ ],
+})
+```
+
+
+
+
+```ts filename="/src/routes/plugin@auth.ts"
+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",
+ }),
+ ],
+ })
+)
+```
+
+
+
+
+```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"
+```
+
+
+
+
+### 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.
+
+
+
+
+```tsx filename="./components/sign-in.tsx"
+import { signIn } from "../../auth.ts"
+
+export function SignIn() {
+ return (
+
+ )
+}
+```
+
+
+
+
+```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 (
+
+ )
+}
+```
+
+
+
+
+```ts filename="./components/sign-in.tsx"
+import { component$ } from "@builder.io/qwik"
+import { useSignIn } from "./plugin@auth"
+
+export default component$(() => {
+ const signInSig = useSignIn()
+
+ return (
+
+ )
+})
+```
+
+
+
+
+```html filename="src/routes/+page.svelte"
+
+
+
+
+
+```
+
+
+
+
+### 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.
+
+
+
+
+```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"
+ }),
+ ],
+})
+```
+
+
+
+
+```ts filename="/src/routes/plugin@auth.ts"
+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"
+ }),
+ ],
+
+})
+)
+
+````
+
+
+
+
+```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"
+ }),
+ ],
+})
+````
+
+
+
diff --git a/docs/public/img/providers/notificationapi.svg b/docs/public/img/providers/notificationapi.svg
new file mode 100644
index 0000000000..4d1ad2848b
--- /dev/null
+++ b/docs/public/img/providers/notificationapi.svg
@@ -0,0 +1,39 @@
+
diff --git a/packages/core/scripts/generate-providers.js b/packages/core/scripts/generate-providers.js
index ff74012730..ccb5da97fa 100644
--- a/packages/core/scripts/generate-providers.js
+++ b/packages/core/scripts/generate-providers.js
@@ -11,6 +11,7 @@ const emailProvidersFile = [
"forwardemail",
"mailgun",
"nodemailer",
+ "notificationapi",
"passkey",
"postmark",
"resend",
diff --git a/packages/core/src/providers/notificationapi.ts b/packages/core/src/providers/notificationapi.ts
new file mode 100644
index 0000000000..8ace255402
--- /dev/null
+++ b/packages/core/src/providers/notificationapi.ts
@@ -0,0 +1,121 @@
+/**
+ * 
+ *
+ *