+ Mailersend
+ 
+
+
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import Mailersend from "next-auth/providers/mailersend"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers: [Mailersend],
+})
+```
+
+
+
+
+```ts filename="/src/routes/plugin@auth.ts"
+import { QwikAuth$ } from "@auth/qwik"
+import Mailersend from "@auth/qwik/providers/mailersend"
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+ () => ({
+ providers: [Mailersend],
+ })
+)
+```
+
+
+
+
+```ts filename="./src/auth.ts"
+import SvelteKitAuth from "@auth/sveltekit"
+import Mailersend from "@auth/sveltekit/providers/mailersend"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+ providers: [Mailersend],
+})
+```
+
+```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 mailersendAction = (formData: FormData) => {
+ signIn("mailersend", 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.
+
+
+
+# Mailersend Provider
+
+## Overview
+
+The Mailersend provider uses email to send "magic links" that contain URLs with verification tokens can be used to sign in.
+
+Adding support for signing in via email in addition to one or more OAuth services provides a way for users to sign in if they lose access to their OAuth account (e.g. if it is locked or deleted).
+
+The Mailersend provider can be used in conjunction with (or instead of) one or more OAuth providers.
+
+### How it works
+
+On initial sign in, a **Verification Token** is sent to the email address provided. By default this token is valid for 24 hours. If the Verification Token is used within that time (i.e. by clicking on the link in the email) an account is created for the user and they are signed in.
+
+If someone provides the email address of an _existing account_ when signing in, an email is sent and they are signed into the account associated with that email address when they follow the link in the email.
+
+
+
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import Mailersend from "next-auth/providers/mailersend"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ adapter: ...,
+ providers: [
+ Mailersend({
+ // If your environment variable is named differently than default
+ apiKey: MAILERSEND_MAGIC_LINKS_TOKEN,
+ from: "no-reply@company.com"
+ }),
+ ],
+})
+```
+
+
+
+
+```ts filename="/src/routes/plugin@auth.ts"
+import { QwikAuth$ } from "@auth/qwik"
+import Mailersend from "@auth/qwik/providers/mailersend"
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+ () => ({
+ providers: [
+ Mailersend({
+ // If your environment variable is named differently than default
+ apiKey: import.meta.env.MAILERSEND_MAGIC_LINKS_TOKEN,
+ from: "no-reply@company.com",
+ }),
+ ],
+ })
+)
+```
+
+
+
+
+```ts filename="./src/auth.ts"
+import { SvelteKitAuth } from "@auth/sveltekit"
+import Mailersend from "@auth/sveltekit/providers/mailersend"
+import { env } from "$env/dynamic/prviate"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+ adapter: ...,
+ providers: [
+ Mailersend({
+ // If your environment variable is named differently than default
+ apiKey: env.MAILERSEND_MAGIC_LINKS_TOKEN,
+ from: "no-reply@company.com",
+ }),
+ ],
+})
+```
+
+
+
+
+4. Do not forget to setup one of the [database adapters](https://authjs.dev/getting-started/database) for storing the Email verification token.
+
+5. You can now start the sign-in process with an email address at `/api/auth/signin`.
+
+A user account (i.e. an entry in the `Users` table) will not be created for the user until the first time they verify their email address. If an email address is already associated with an account, the user will be signed in to that account when they click the link in magic link email and use up the verification token.
+
+## Customization
+
+### Email Body
+
+You can fully customize the sign in email that is sent by passing a custom function as the `sendVerificationRequest` option to `Mailersend()`.
+
+```js {7} filename="./auth.ts"
+import NextAuth from "next-auth"
+import Mailersend from "next-auth/providers/mailersend"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers: [
+ Mailersend({
+ server: process.env.EMAIL_SERVER,
+ from: process.env.EMAIL_FROM,
+ sendVerificationRequest({
+ identifier: email,
+ url,
+ provider: { server, from },
+ }) {
+ // your function
+ },
+ }),
+ ],
+})
+```
+
+As an example, the following shows the source for our built-in `sendVerificationRequest()` method. Notice that we're rendering the HTML (`html()`) and making the network call (`fetch()`) to Mailersend to actually do the sending here in this method.
+
+```ts {4, 14} filename="./lib/authSendRequest.ts"
+export async function sendVerificationRequest(params) {
+ const { identifier: to, provider, url, theme } = params
+ const { host } = new URL(url)
+ const res = await fetch("https://api.mailersend.com/v1/email", {
+ method: "POST",
+ headers: {
+ Authorization: `Bearer ${provider.apiKey}`,
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ from: { email: provider.from },
+ to: [{ email: to }],
+ subject: `Sign in to ${host}`,
+ html: html({ url, host, theme }),
+ text: text({ url, host }),
+ }),
+ })
+
+ if (!res.ok) throw new Error("Mailersend error: " + (await res.text()))
+}
+
+function html(params: { url: string; host: string; theme: Theme }) {
+ const { url, host, theme } = params
+
+ const escapedHost = host.replace(/\./g, ".")
+
+ const brandColor = theme.brandColor || "#346df1"
+ const color = {
+ background: "#f9f9f9",
+ text: "#444",
+ mainBackground: "#fff",
+ buttonBackground: brandColor,
+ buttonBorder: brandColor,
+ buttonText: theme.buttonText || "#fff",
+ }
+
+ return `
+
+ | + Sign in to ${escapedHost} + | +|
+
|
+ |
| + If you did not request this email you can safely ignore it. + | +