自定义登录表单错误：使用 CredentialsProvider 重定向到 https://localhost:3000/api/auth/signin?csrf=true

Question

DESCRIPTION: I'm facing while implementing custom login form in my nextjs site using next-auth. It keeps on redirecting to "https://localhost:3000/api/auth/signin?csrf=true"

SERVER SIDE CODE WRITTEN IN "[...nextauth.js]" FILE INSIDE "pages/api/auth/" folder.

    import NextAuth from 'next-auth';
    import CredentialsProvider from 'next-auth/providers/credentials';
    
    const providers = [
        CredentialsProvider({
            id: 'credentials',
            name: 'credentials',
            authorize: async (credentials) => {
                console.log("AUTHORIZING...",credentials,req);
                const res = await fetch(process.env.apiURL+"api/users/authenticate", {
                    method: 'POST',
                    body: JSON.stringify(credentials),
                    headers: { "Content-Type": "application/json" }
                });
                const user = await res.json();
                if (res.ok && user) {
                    return user;
                }
                return null;
            }
        }),
    ];
    
    const callbacks = {
        async signIn({ user, account, profile, email, credentials }) {
            console.log("IN CALLBACK HERE!!!");
            const isAllowedToSignIn = true
            if (isAllowedToSignIn) {
              return true
            } else {
              return false
            }
        },
        async redirect({ url, baseUrl }) {
            return baseUrl;
        },
        async session(session, token) {
          console.log("IN THE CALLBACK SESSION NOW");
          session.accessToken = token.accessToken
          return session
        }
    }
    
    const options = {
        providers,
        callbacks,
        secret: process.env.JWT_SECRET,
        pages: {
            signIn: '/my-account',
            signUp: '/signup',
            error: '/my-account'
        },
        debug: true
    }

export default (req, res) => NextAuth(req, res, options);

MY CUSTOM LOGIN FORM'S SUBMIT BUTTON ACTION:

const res = await signIn('credentials', { redirect: false, username: user.username, passw: user.passw, callbackUrl: `${window.location.origin}` });
            console.log(res);
            if (res?.error) {
                console.error(res.error);
            }
            if (res.url) router.push(res.url);

ENVIRONMENT VARIABLES

NEXTAUTH_URL=https://localhost:3000/api/auth
NEXTAUTH_SECRET=PETSFINEST

ERROR IS the Authorize function of Credentials Provider is not at all being called.. as soon as I press SIGNIN button from my custom login form, it simply redirects to "https://localhost:3000/api/auth/signin?csrf=true" URL and thats it.

Please help guys.. what am I doing wrong here? There's no other details available anywhere, and I've followed the documentation provided on next-auth site.

Answer 1

Hey try changing to http on the NEXTAUTH_URL env variable So change this:

    NEXTAUTH_URL=https://localhost:3000/api/auth

into

    NEXTAUTH_URL=http://localhost:3000/api/auth

Answer 2

Open the browser inspect tools and check the network tab. Pay attention to the payload on the submit. You should have csrfToken showing a value. Check that email, password and csrf are present in the payload. This helped me solve my issue similar to this when implementing passwordless email form. Here is my custom signin...

import React from 'react'
import {getProviders, signIn} from 'next-auth/react'
import { getCsrfToken } from "next-auth/react"
import styles from '../../styles/signin.module.css'
import Logo from '../../components/Logo'
import Link from 'next/link'
import { GoogleLogin } from '../../components/GoogleLogin'

export default function SignIn ({ csrfToken, providers }) {
  console.log(providers.google.signinUrl);
  return (
    <div className={styles.content}>
      <div className={styles.cardWrapper}>
        <Logo className={styles.logo}/>
        <div className={styles.cardContent}>
          <form method="post" action="/api/auth/signin/email">
            <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
            <input type="email" id="email" name="email" placeholder='Email..' />
            <button className={styles.primaryBtn} type="submit">Sign in with Email</button>
          </form>
          <p className={styles.seperator}> Or  </p>
          <form method="post" action="/api/auth/signin/google">
            <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
            <button className={styles.primaryBtn} type="submit">Sign in with Google</button>
          </form>
        </div>
      </div>
    </div>
  )
}
export async function getServerSideProps(context) {
  const csrfToken = await getCsrfToken(context)
  const providers = await getProviders(context)
  return {
    props: { csrfToken, providers },
  }
}

I think you can do something similar for credentials as long as you have set it up correctly as per docs in [...nextauth].js.

The code above can be put into seperate components to "Reactify" the code.

Hope this helps.

Answer 3

I ran into this same issue. After banging my head against the wall for ages, it ends up https was being used because I was running it with Vercel...

So rather than using vercel dev I switched it to npx next dev and it resolved the issue for me.

Answer 4

I've been having the same exact issue and banging my head against the wall for a few hours trying to debug this. The problem for me was that my SMTP server string was still using the 'smtp.example.com' from the docs instead of (in my case) 'smtp.sendgrid.net'.

EMAIL_SERVER="smtp://<user>:<password>@smtp.example.com:587"