Next Auth Custom Pages flow.

[georgecodedit]

I am using next-auth@beta for a new project and I've created a custom signIn component. I have a condition where I don't want to allow Gmail users to receive magic links, so I've set it up to deny these users. However, when I implement this from a custom page, I encounter a runtime error. If I perform the login from the default NextAuth page, I do not encounter this error and it redirects to the error page as expected. I'm wondering if this issue is due to a limitation that is not yet supported, or if I am implementing it incorrectly. My code is below. Everything works fine unless I have the signing done by the following form.

//Custom Component 
import { auth, signIn, signOut } from "@/auth";
import React from "react";

async function SignIn() {
  const session = await auth();

  console.log(session);
  return (
    <>
      <div>{session?.user?.email}</div>
      <form
        action={async (formData) => {
     
          "use server";
          await signIn("nodemailer",formData);
        }}
      >
        <input type="email" id="email" name="email" required />
      
        <button type="submit">Sign In</button>
      </form>
     
    </>
  );
}
export default SignIn;

//Auth.ts
import NextAuth from "next-auth";
import Nodemailer from "next-auth/providers/nodemailer";
import { PrismaClient } from "@prisma/client";
import { PrismaAdapter } from "@auth/prisma-adapter";
import nodemailer from "nodemailer";
const prisma = new PrismaClient();

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    Nodemailer({
      maxAge: 15 * 60, //link is valid for 15 minutes
      server: {
        //server info
      },
      from: process.env.EMAIL_FROM,
      sendVerificationRequest: ({ identifier: email, url, provider }) => {
        return new Promise((resolve, reject) => {
          const { server, from } = provider;
          const transport = nodemailer.createTransport(server);

          const emailBody = `
            <div style="background-color: #f0f0f0; padding: 20px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
        
                <a href="${url}" style="background-color: #007bff; color: #ffffff; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-size: 16px; font-weight: bold;">Verify Email</a>
          
          </div>
            `;
          const mailOptions = {
            to: email,
            from,
            subject: `[Subject]`,
            html: emailBody,
          };

          transport.sendMail(
            mailOptions,
            (err: Error | null, info: nodemailer.SentMessageInfo) => {
              if (err) {
                reject(err);
              } else {
                resolve();
              }
            }
          );
        });
      },
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      if (user.email.endsWith("@gmail.com")) {
        return false; // Deny signIn for Gmail users
      }

      return true;
    },
  },
  pages: {
    signIn: "/signInPage",
    error: "/error",
  },
});