Custom sign in page doesn't route to custom verify request page when using email provider

[ggrantrowberry]

I'm not sure if this is a bug or I'm just doing something wrong but I can't get my custom sign in page to route to my custom verify request page when using the email provider. It just refreshes the signin page but now with a callbackURL http://localhost:3000/auth/signin?callbackUrl=%2Fauth%2Fverify-request

I'm using
[email protected]
[email protected]
[email protected]
node v18.12.0

Does anyone have any idea of what I could be doing wrong?

This is from my signin.tsx

 <Formik
          initialValues={{
            email: "",
          }}
    
          onSubmit={async (values) => {
            await signIn("email", { email: values.email });
          }}
        >
          <Form className={cx(["w-full"])}>
            <FormInput name={"email"} placeholder="Email" type="email" />
            <button
              className={cx([
                "px-5",
                "py-2",
                "rounded-md",
                "text-lg",
                "w-full",
                "bg-blue-500",
                "mt-5",
              ])}
            >
              Sign In With Email
            </button>
          </Form>
        </Formik>

This is my middleware.ts

import { withAuth } from "next-auth/middleware";
import { NextResponse } from "next/server";
import { ROLE } from "./shared/roles";

export default withAuth(
  function middleware(req) {
    const url = req.nextUrl.clone();

    if (req.nextauth.token && req.nextauth.token.role === ROLE.CONSUMER) {
      if (
        !url.pathname.startsWith("/consumer") &&
        !url.pathname.startsWith("/api")
      ) {
        url.pathname = "/consumer";
        return NextResponse.redirect(url);
      }
    }
    if (url.pathname === "/" && req.nextauth.token) {
      url.pathname = `/${req.nextauth.token.id}/dashboard`;
      return NextResponse.redirect(url);
    }
    return NextResponse.next();
  },
  {
    callbacks: {
      authorized: ({ token }) => !!token,
    },
    pages: {
      signIn: "/auth/signin",
      verifyRequest: "/auth/verify-request",
    },
  }
);

This is from auth.ts

export const authOptions: NextAuthOptions = {
...
 pages: {
      signIn: "/auth/signin",
      verifyRequest: "/auth/verify-request",
    },
...
}

Thanks for any help!

[spidertwin2]

I have the same error, unable to route to custom verification and error pages.

auth.ts

pages: {
        signOut: "/",
        error: "/login/error",
        verifyRequest: "/login/verify-request",
        newUser: "/dashboard",
}

After signIn("email", options) instead of going to http://localhost:3000/login/verify-request, user gets redirected to http://localhost:3000/api/auth/verify-request?provider=email&type=email

Log in error takes user to http://localhost:3000/api/auth/error?error=Verification instead of http://localhost:3000/login/error

Someone please help 🙏

[spidertwin2]

I realised the error was incorrectly placing pages inside EmailProvider

export const config = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
       pages:{....}
    })
 ]
}

it should be child of config object

export const config = {
  adapter: PrismaAdapter(prisma),
  pages: {....},
  providers: [
    EmailProvider({...})
 ]
}

Works now! 🌴

[tconroy]

I am encountering this same issue, albeit with Resend provider and magic links. It routes me to /api/auth/verify-request?... instead of the provided /verify-request. Did you end up finding a fix? I am using auth.js and pages are defined in the right spot.

[cernockyd]

@tconroy hello, did you overcome the problem of routing magic link auth user to a provided page?

[benevbright]

God... the same issue. what's going on?