feat(providers): Add Mailersend Email Provider and Documentation

.github/ISSUE_TEMPLATE/2_bug_provider.yml

@@ -68,6 +68,7 @@ body:
         - "Logto"
         - "Loops"
         - "Mailchimp"
+        - "MailerSend"
         - "Mail.ru"
         - "Mastodon"
         - "Medium"

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

@@ -89,6 +89,14 @@ This login mechanism starts by the user providing their email address at the log
         <img className="size-16" src={`/img/providers/mailgun.svg`} />
         <div className="text-sm text-center">Mailgun</div>
       </RichTabs.Trigger>
+      <RichTabs.Trigger
+        value="mailersend"
+        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" src={`/img/providers/mailersend.svg`} />
+        <div className="text-sm text-center">Mailersend</div>
+      </RichTabs.Trigger>
     </RichTabs.List>
   <RichTabs.Content
     orientation="vertical"
@@ -1231,7 +1239,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
 
 </Code.Next>
 <Code.Qwik>
-  
+
 ```ts filename="/src/routes/plugin@auth.ts"
 import { QwikAuth$ } from "@auth/qwik"
 import Mailgun from "@auth/qwik/providers/mailgun"
@@ -1340,6 +1348,183 @@ Start your application, once the user enters their Email and clicks on the signi
 
 For more information on this provider go to the [Mailgun docs page](/getting-started/providers/mailgun).
 
+</RichTabs.Content>
+<RichTabs.Content
+  orientation="vertical"
+  value="mailersend"
+  className="h-full !border-0 !w-full"
+  tabIndex={-1}
+>
+
+### Mailersend 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 above.
+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"
+AUTH_MAILERSEND_KEY=mlsn.123
+```
+
+### Setup Provider
+
+Let's enable `Mailersend` as a sign in option in our Auth.js configuration. You'll have to import the `Mailersend` provider from the package and pass it to the providers array we setup earlier in the Auth.js config file:
+
+<Code>
+<Code.Next>
+
+```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],
+})
+```
+
+</Code.Next>
+<Code.Qwik>
+
+```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],
+  })
+)
+```
+
+</Code.Qwik>
+<Code.Svelte>
+
+```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"
+```
+
+</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("mailersend", formData)
+      }}
+    >
+      <input type="text" name="email" placeholder="Email" />
+      <button type="submit">Signin with Mailersend</button>
+    </form>
+  )
+}
+```
+
+</Code.Next>
+<Code.NextClient>
+
+```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 (
+    <form action={mailersendAction}>
+      <label htmlFor="email-mailersend">
+        Email
+        <input type="email" id="email-mailersend" name="email" />
+      </label>
+      <input type="submit" value="Signin with Mailersend" />
+    </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="mailersend" />
+  </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">
+  Check our [Customising magic links
+  emails](/getting-started/providers/mailersend#customization) to learn how to
+  change the look and feel of the emails the user receives to sign in.
+</Callout>
+
+For more information on this provider go to the [Mailersend docs page](/getting-started/providers/mailersend).
+
 </RichTabs.Content>
 </RichTabs>
 </div>