Email Provider

This login mechanism starts by the user providing their email address at the login form. Then a Verification Token is sent to the provided email address. The user then has 24 hours to click the link in the email body to “consume” that token and register their account, otherwise the verification token will expire and they will have to request a new one.

💡

An Email Provider can be used with both JSON Web Tokens and database session, whichever you choose, you must still configure a database so that Auth.js can save the verification tokens and look them up when the user attempts to login. It is not possible to enable an email provider without using a database.

Resend Setup

Database Adapter

Please make sure you’ve setup a database adapter, 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 if needed, but then you’ll need to pass them to the provider manually.

.env

AUTH_RESEND_KEY=abc123

Setup Provider

Let’s enable Resend as a sign in option in our Auth.js configuration. You’ll have to import the Resend provider from the package and pass it to the providers array we setup earlier in the Auth.js config file:

./auth.ts

import NextAuth from "next-auth"
import Resend from "next-auth/providers/resend"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [Resend],
})

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.

./components/sign-in.tsx

import { signIn } from "../../auth.ts"
 
export function SignIn() {
  return (
    <form
      action={async (formData) => {
        "use server"
        await signIn("resend", formData)
      }}
    >
      <input type="text" name="email" placeholder="Email" />
      <button type="submit">Signin with Resend</button>
    </form>
  )
}

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.

Check our Customising magic links emails to learn how to change the look and feel of the emails the user receives to sign in.

For more information on this provider go to the Resend docs page.

OAuth Credentials