NotificationAPI Provider

Overview

The NotificationAPI 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

User inputs their email.
Auth.js generates a verification token - valid for 24 hours by default - and stores it using the database adapter.
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.

⚠️

The magic link auth flow requires a database adapter to work. The database is used to store the verification tokens, to be matched later against what the user provides.

Setup

1. NotificationAPI Account

Create a NotificationAPI account 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:

NOTIFICATIONAPI_API_KEY=...

If you name your environment variable like the above, the provider will pick it up automatically.

./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"
    }),
  ],
})

/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"
      }),
    ],
 
})
)

./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"
    }),
  ],
})

Nodemailer Notion

NotificationAPI Provider

Overview

Flow

Setup

1. NotificationAPI Account

2. Auth.js Configuration

About Auth.js

Download

Acknowledgements