How to display Credentials Sign-in Error on Custom Sing-in page when Invalid email or password Authjs 5

[nsajeevan89]

I am using Authjs v5, and Nextjs 15.
When user try to login with wrong email or password, or validation error. the error message should display to user like "Sign in failed. Check the details you provided are correct." I have set auth.ts file as per the document. So, Can someone help me to display the error message in the Sign-in form. Also can you give me how to do CSRF token, and which should be server-side and client-side. What is the best practice?

Auth.ts:

import NextAuth from "next-auth";
import Credentials from "next-auth/providers/credentials";
import { signInSchema } from "@/lib/zod";
import { ZodError } from "zod";
import Google from "next-auth/providers/google";

const users = [
  { id: "1", email: "[email protected]", password: "admin123", role: "admin" },
  { id: "2", email: "[email protected]", password: "user123", role: "user" },
];

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      authorize: async (credentials) => {
        try {
          const { email, password } = await signInSchema.parseAsync(credentials);

          const user = users.find((u) => u.email === email && u.password === password);

          if (!user) {
            throw new Error("Invalid email or password");
          }

          return { id: user.id, email: user.email, role: user.role };
        } catch (error) {
          if (error instanceof ZodError) {
            return null
          }
          throw new Error("Invalid email or password");
        }
      },
    }),
    Google
  ],
  pages: {
    signIn: "/signin",
  },

});

Sign-in custom page:

<form
       action={async (formData) => {
         "use server"
         try {
           await signIn("credentials", formData)
         } catch (error) {
           if (error instanceof AuthError) {
             return redirect(`${SIGNIN_ERROR_URL}?error=${error.type}`)
           }
           throw error
         }
       }}
     >
{Erro message here}
       <label htmlFor="email">
         Email
         <input name="email" id="email" />
       </label>
       <label htmlFor="password">
         Password
         <input name="password" id="password" />
       </label>
       <input type="submit" value="Sign In" />
     </form>