Magic Link works locally and throws Error: EmailSignin in prod

[kevinggrimm]

Question 💬

I have logic in the signIn callback that is supposed to only send emails to the whitelisted email addresses. This works totally fine in a local environment but throws an Error: EmailSignin non-local.

This is deployed on AWS, and I have a NEXTAUTH_URL defined within my .env file.

Adding relevant code for [...nextauth].js and the sign-in page below.

How to reproduce ☕️

// pages/auth/signin.js
import { signIn } from 'next-auth/react';
// ... more code
  const handleSignIn = async e => {
    e.preventDefault();
    try {
      const { error, ok, url, status } = await signIn("email", {
        email,
        redirect: false,
        callbackUrl: `https://MySiteURL/auth/confirm-request`,
      });
      if (error) {
        throw new Error(error);
      }
      setError(null);
      setShowModal(true);
    } catch (error) {
      console.log('Unable to sign-in: ', error)
      setError(error);
    }
  }

// [...nextauth].js
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';
import nodemailer from 'nodemailer';
import Handlebars from 'handlebars';

import { DynamoDB } from '@aws-sdk/client-dynamodb';
import { DynamoDBDocument } from "@aws-sdk/lib-dynamodb";
import { DynamoDBAdapter } from "@next-auth/dynamodb-adapter";

import { readFileSync } from 'fs';
import path from 'path';

const transporter = nodemailer.createTransport({
  host: process.env.EMAIL_SERVER_HOST,
  port: process.env.EMAIL_SERVER_PORT,
  auth: {
    user: process.env.EMAIL_SERVER_USER,
    pass: process.env.EMAIL_SERVER_PASSWORD,
  },
  tls: {
    ciphers: 'SSLv3'
  }
});

const emailsDir = path.resolve(process.cwd(), 'src', 'emails');
const sendVerificationRequest = ({ 
  identifier,
  url 
}) => {
  console.log('Sending verification request....')
  const emailFile = readFileSync(path.join(emailsDir, 'confirm-email.html'), {
    encoding: 'utf-8',
  });
  const emailTemplate = Handlebars.compile(emailFile);
  try {
    console.log('Sending email...')
    transporter.sendMail({
      from: `${process.env.EMAIL_FROM}`,
      to: identifier,
      subject: 'Your sign-in link',
      html: emailTemplate({
        signin_url: url,
        email: identifier,
      }),
    });
  } catch (error) {
    console.log('Could not send email: ', error)
  }
};

const config = {
  credentials: {
    accessKeyId: process.env.NEXTAUTH_AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.NEXTAUTH_AWS_SECRET_ACCESS_KEY,
  },
  region: process.env.NEXTAUTH_AWS_REGION,
};

const client = DynamoDBDocument.from(new DynamoDB(config), {
  marshallOptions: {
    convertEmptyValues: true,
    removeUndefinedValues: true,
    convertClassInstanceToMap: true,
  },
})

const dynamoDbAdapter = DynamoDBAdapter(client, {
  tableName: "my-table-name",
});

export const authOptions = {
  providers: [
    EmailProvider({
      maxAge: 15*60,
      sendVerificationRequest,
    }),
  ],
  session: {
    strategy: "database",
    maxAge: 30*60*60*24,
    updateAge: 10*60*60*24
  },
  secret: "mySuperSecretSecret",
  adapter: dynamoDbAdapter,
  pages: {
    signIn: '/auth/signin',
    signOut: '/',
  },
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      const verificationRequest = email.verificationRequest;
      if (verificationRequest) {
        const EMAIL_WHITELIST = ["whitelisted_email.hotmail.com"];
        const { email: emailAddress } = user;
        if (!EMAIL_WHITELIST.includes(emailAddress)) {
          console.log("Invalid email address - not allowed to sign in");
          return false;
        }
      }
      return true;
    },
  },
  debug: true,
}

export default NextAuth({...authOptions})

This is my first time using NextAuth, so I am going to air on the side of caution and predict that I'm overlooking something.

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[ThangHuuVu]

Hi 👋, does this email get sent at all?
There are three possible reasons for error?error=EmailSignin:

• Empty identifier
• normalizeIdentifier throws an error -> not in your case as I see
• Email Provider: provider.sendVerificationRequest or adapter.createVerificationToken fails
  Could you provide more info about the error? 🤔

[kevinggrimm]

Hi, sorry for the holdup here. Still running into this though I do have a few leads:

1. undefined NEXTAUTH_URL. I did set this in my .env, though it doesn't appear to have passed through. Retrying this now.
2. Two references to error var. I'm just noticing this one on my login page, which throws Unable to sign-in: TypeError: Cannot read properties of undefined (reading 'error')

export default function AuthLogin() {
  
  const [error, setError] = useState(null)
  const [success, setSuccess] = useState(null)
  const [email, setEmail] = useState('')

  const handleSignIn = async e => {
    e.preventDefault();
    try {
      console.log("SIGNING THE USER IN");
      console.log(`Email: `, email)
      console.log(`NEXT AUTH URL: ${process.env.NEXTAUTH_URL}`) // undefined
      const { error, ok, url, status } = await signIn("email", {
        email,
        redirect: false,
      });
      if (error) {
        throw new Error(error);
      }
      console.log(`OK: `, ok);
      console.log(`URL: `, url);
      setError(null);
      setSuccess(true);
    } catch (error) {
      console.log('Unable to sign-in: ', error)
      setError(error);
    }
  }  
 // return (...)

I'm forwarded to a stock 503 ERROR page, which I expect I'll be able to update once that's incorporated into the App.

Expect this will take a few redeploys to staging to flesh out - I'll add more updates here as they come in.

[kevinggrimm]

I think it's somehow related to the NEXTAUTH_URL being undefined. I'm seeing the following after updating the error variables:

react_devtools_backend.js:4012 [next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON {error: {…}, url: '/api/auth/providers', message: `Unexpected token '<', "<!DOCTYPE "... is not valid JSON`}

Unable to sign-in:  TypeError: Cannot read properties of undefined (reading 'error')
    at /_next/static/chunks/pages/auth/login-c3255685aa3907c6.js:1:3343
    at /_next/static/chunks/main-c95cc25c34d71568.js:1:103240
    at Object.next (/_next/static/chunks/main-c95cc25c34d71568.js:1:103345)
    at n (/_next/static/chunks/pages/_app-3668876f49ab4886.js:1:137365)
    at u (/_next/static/chunks/pages/_app-3668876f49ab4886.js:1:137568)

I'm going to review issues related to the above, looks like there are a few.

[kevinggrimm]

Unfortunately, I'm still struggling quite a bit with this, and I'm starting to lack confidence that it's due to a misconfiguration on my end (although that certainly wouldn't be the first time). I ended up gutting my original setup and took heavy inspiration from this repository to setup the email provider, as it was referenced in this related issue (based on my choice of provider/adapter)

After making those adjustments to my [...nexauth] page and deploying, I'm still running into an error on the login page, albeit a different on than was originally flagged in this issue:

POST https://d3lgcd7bvrxjfj.cloudfront.net/api/auth/signin/email? 503
onSubmit @ signin-bf42909914bdebc3.js:1
signin-bf42909914bdebc3.js:1 Unable to sign-in:  SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

I prepared a repository to recreate the error here.

From my review of other Next Auth issues, it seems there were several conversations related to bugs from past versions of either next-auth and/or Next.js that were leading to auth errors. It's unclear to me whether this issue is connected, though I will continue to investigate on my end when I have time.

Please let me know if I can clarify anything in the referenced repository and the errors that I've encountered. Auth is the final blocker for one of my side projects, so I'm quite eager to get this resolved. Thanks!

[nvegater]

I am having this exact same issue. Any suggestion for fixing this ? Thanks :)

[nhuethmayr]

In my case it was that I forgot to provide an email address to the signIn method.

await signIn('email', { email: inputField.email, callbackUrl: callbackUrl })

[efim23]

From the documentation:
EmailSignin: Sending the e-mail with the verification token failed Sign-in page Errors

That was exactly my case, I forgot to specify the SMTP server for my production.

[hjhaooo]

From discussion above, we can see that it's mostly because of these two environment viriables: NEXTAUTH_URL, EMAIL_SERVER.
In my case it was EMAIL_SERVER. I'm using aws Amplify instead of Vercel, (which is a lot more inconvenient compared to Vercel, I decided to switch back to Vercel later). In Amplify you have to write your own build file to let the server side get those environment viriables. And in my case, when copy and paste the text, a "$" was missed.

[a-ww2-er]

i fixed mine by reconfiguring my SMTP variables, the port ,email and so on , the variables i used initially were not correct and the email and password weren't accepted