Custom Sign in Page not working properly

[brennanbutler01]

I am unable to get the sign in page working properly.... I have looked at all of the examples that I can find online as well as the stack overflow examples, but it is still not working. When I navigate to the /api/auth/signin endpoint with a custom page, it goes into an endless loop and never renders the signin page.

My signin file is

import { getProviders, signIn } from "next-auth/react";

export default function SignIn({ providers }) {
  return (
    <>
      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button onClick={() => signIn(provider.id)}>
            Sign in with {provider.name}
          </button>
        </div>
      ))}
    </>
  );
}

// This is the recommended way for Next.js 9.3 or newer
export async function getServerSideProps(context) {
  const providers = await getProviders();
  return {
    props: { providers },
  };
}

and the /pages/api/auth/[...nextAuth].ts file is

import NextAuth from "next-auth";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import prisma from "@/prisma/prisma";
import GoogleProvider from "next-auth/providers/google";
import EmailProvider from "next-auth/providers/email";
import { Prisma, Roles } from "@prisma/client";
import { NextApiRequest, NextApiResponse } from "next";

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === "HEAD") {
    console.log("this is a head request", req);
    return res.status(200);
  } else {
    return await NextAuth(req, res, {
      // Configure one or more authentication providers
      adapter: PrismaAdapter(prisma),
      providers: [
        GoogleProvider({
          clientId: process.env.GOOGLE_CLIENT_ID as string,
          clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
        }),
        EmailProvider({
          server: {
            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,
            },
          },
          from: process.env.EMAIL_FROM,
        }),
      ],
      secret: process.env.NEXTAUTH_SECRET,
      pages: {
        signOut: "/auth/signout",
        signIn: "/auth/signin",
      },
      theme: {
        colorScheme: "dark",
        brandColor: "#52e3c2",
        logo: "./public/logo-500x300.png",
      },
      callbacks: {
        async jwt({ token, user }) {
          console.log(user);
          if (user?.role) {
            token.role = user.role;
          }

          return token;
        },
        async session({ session, user }) {
          if (session?.user) {
            session.user.role = user.role as Roles;
            session.user.userId = user.id;
          }
          return session;
        },
      },
      events:{ ....}
      },
    });
  }
}

The sign out functionality works just fine.... but I cannot get sign in to work regardless of what I do....

Any ideas? using 4.3.1.

[brennanbutler01]

Ahh - I had an issue with my _app.tsx file and some middleware that I had setup to handle authenticating Pages
when I removed that code, the signIn functions as anticipated!