Why the email and password input field are not showing up in the live server?

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
export const authOptions = {
    secret: process.env.NEXT_AUTH_PUBLIC_KEY,
    session: {
        strategy: 'jwt',
    },
    providers: [
        CredentialsProvider({
            Credentials: {
                email: {
                    label: 'Email',
                    type: 'email',
                    placeholder: 'Enter Email'
                },
                password: {
                    label: 'Password',
                    type: 'password',
                    placeholder: 'Enter Password'
                }
            },
            async authorize(credentials) {
                if (!credentials) {
                    return null;
                }
                return true;
            }
        })
    ]
};
const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

I was trying to integrate 'login with Email' through NextAuth. Although providing credentials the input fields are not showing up in the live server. Even there is no error message in the console. Can anybody please tell me what the exact issue is here?

Here goes my written code image. Here goes the live server image.

I watched a lecture and followed it. Moreover, I searched for NextAuth documentation. I did not find any clue. I was expecting to fix the issue of the input field. And I want to know whether I'm doing right or not, whether the method is right, or it needs to be followed by another method!

I copied code from the Credentials docs and modified it to your question. I notice that in your code, authorize returns boolean, while it should return the user object.

I tested the below code in my NextJS-app.

• next: 15.0.2
• next-auth: 4.24.10

Code

import NextAuth, {NextAuthOptions} from "next-auth"
import "next-auth/jwt"
import CredentialsProvider from "next-auth/providers/credentials";

const credsProvider = CredentialsProvider({
    // The name to display on the sign in form (e.g. "Sign in with...")
    name: "Credentials",
    // `credentials` is used to generate a form on the sign in page.
    // You can specify which fields should be submitted, by adding keys to the `credentials` object.
    // e.g. domain, username, password, 2FA token, etc.
    // You can pass any HTML attribute to the <input> tag through the object.
    credentials: {
        username: {label: "Email", type: "email", placeholder: "Enter Email"},
        password: {label: "Password", type: "password", placeholder: "Enter Password"}
    },
    async authorize(credentials) {
        // Add logic here to look up the user from the credentials supplied
        const user = {
            id: "1",
            name: "J Smith",
            email: "jsmith@example.com",
            password: "P4ssword"
        }

        if (credentials?.username === user.email && credentials?.password === user.password) {
            const {password, ...userWithoutPassword} = user
            return userWithoutPassword
        }

        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
    }
})

const authOptions = {
    providers: [credsProvider],
    session: {
        strategy: "jwt"
    }
} satisfies NextAuthOptions

const handler = NextAuth(authOptions)

export {handler as GET, handler as POST}