Can't get credentials verification POST through to API at /api/auth/signin/credentials?

[CrabBucket]

Error Code is "Error: This action with HTTP POST is not supported by NextAuth.js"

Hello I am trying to implement my own login page using NextJS and Next-Auth for auth I haven't even gotten to checking the credentials in the database yet but I can't figure out how to format my POST request properly for the server to try to acknowledge the request,

Here is the code for the JS Fetch that gets called from a forms onSubmit:

        const username = event.target[0].value;
        const plaintext = event.target[1].value;
        const rememberCheck = event.target[2].value;
        const credentialPayload = { csrfToken:props.csrfToken,username:username, password:plaintext, rememberCheck:rememberCheck}
        const tempArr = [];
        for (const key in credentialPayload){
            tempArr.push(encodeURIComponent(key)+'='+encodeURIComponent(credentialPayload[key]))
        }
        const content = tempArr.join('&');
        console.log(content)
        const res = fetch('/api/auth/login/credentials', {
                method: 'POST',
                body: content,
                headers: {'Content-Type': 'application/x-www-form-urlencoded',
                          'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
                        //   'Cache-Control': 'max-age=0',
                        //   'Sec-Fetch-Dest': 'document',
                        //   'Sec-Fetch-Mode': 'navigate',
                        //   'Sec-Fetch-User': '?1',
                        //   'Upgrade-Insecure-Requests': '1',        
                        } 
                });

And here are the two payload strings from the requests accepted payload: "csrfToken=872a8e45099f8fa07b0c528137162b3864070972150e0d863bcca6c6f169d708&username=&password=&rememberCheck=on"
Not accepted payload: "csrfToken=907497b8f6ab7c46b1dbdc7d6fe3172d7916777c5283b3e61e672ee587e5ac64&username=test&password=test&rememberCheck=test"

(rememberCheck is a text field in the default signin form)

Are csrfTokens going be unique across redirects? If I go to api/auth/signin and submit the post request that way I get a valid response back and it redirects me to the login page (callBack I believe) with a good response and at that login page if use my POST I get a 400 error in the console and the preview says "Error: This action with HTTP POST is not supported by NextAuth.js"

Any help would be great, I originally thought it was malformed stringfied JSON (I wasn't url encoding it) but now my payload look exactly the same so I think it must be some configuration issue on my end or something that I'm just not aware of.

Here is my API endpoint but I don't think any code inside this block of is being ran so I think it's some config check that's failing or potentially something with csrf.

const authHandler: NextApiHandler = (req, res) => NextAuth(req, res, options);
export default authHandler;

const options = {
  providers: [
    EmailProvider({
      server: {
        host: process.env.SMTP_HOST,
        port: Number(process.env.SMTP_PORT),
        auth: {
          user: process.env.SMTP_USER,
          pass: process.env.SMTP_PASSWORD,
        },
      },
      from: process.env.SMTP_FROM,
    }),
    CredentialsProvider({
      // The name to display on the sign in form (e.g. "Sign in with...")
      name: "Username and Password",
      // The credentials is used to generate a suitable form on the sign in page.
      // You can specify whatever fields you are expecting to be submitted.
      // e.g. domain, username, password, 2FA token, etc.
      // You can pass any HTML attribute to the <input> tag through the object.
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: {  label: "Password", type: "password" },
        rememberCheck: { label: "Remember Me", type: "boolean"}
      },
      async authorize(credentials, req) {
        // Add logic here to look up the user from the credentials supplied
        const user = { id: 1, name: "J Smith", email: "[email protected]" }
        console.log(credentials)
        if (user) {
          // Any object returned will be saved in `user` property of the JWT
          return user
        } else {
          // If you return null then an error will be displayed advising the user to check their details.
          return null
  
          // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
        }
      }
    })
  ],
  adapter: PrismaAdapter(prisma),
  secret: process.env.SECRET,
  // pages: {
  //   signIn: '/auth/signin',
  //   signOut: '/auth/signout',
  //   error: '/auth/error', // Error code passed in query string as ?error=
  //   verifyRequest: '/auth/verify-request', // (used for check email message)
  //   newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out if not of interest)
  // },
};

Here is my .env.local

DEVHOST=http://localhost:3000
PRODHOST=https://test.com
NEXTAUTH_URL=http://localhost:3000

[CrabBucket]

Also if anyone could direct me to the source code for how Next-Auth generates the default signin page I could probably just copy how you guys did it in there?

I searched for this a bit already and looked around in the repo but I'm pretty new to TypeScript

[CrabBucket]

I found the JS that creates the signin page but it's in pure javascript and it's a bit over my head "\node_modules\next-auth\core\pages\signin.js" It appears it is just using standard javascript but I don't really understand where it sets headers or anything I believe this is the relevant code snippet for how they submit to to the API:

), (0, _preact.h)("button", { type: "submit" }, "Sign in with ", provider.name)), provider.type === "credentials" && (0, _preact.h)("form", { action: provider.callbackUrl, method: "POST" }

[CrabBucket]

            // const res = await fetch('/api/auth/login/credentials', {
            //     method: 'POST',
            //     body: content,
            //     headers: {
            //             //   'Content-Type': 'application/x-www-form-urlencoded',
            //             //   'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
            //             //   'Cache-Control': 'max-age=0',
            //             //   'Sec-Fetch-Dest': 'document',
            //             //   'Sec-Fetch-Mode': 'navigate',
            //             //   'Sec-Fetch-User': '?1',
            //             //   'Upgrade-Insecure-Requests': '1',        
            //             } 
            //     });
            const res = await signIn('credentials',credentialsPayload)
            return res;
        } catch (err) {
            console.log(err);
        }

Refactoring to use signin fixed it for me but I still don't understand why I can't get the csrfToken from the api and submit my own POST.