chore(docs): cleanup credentials provider docs and add custom error example

Author: ndom91

docs/pages/getting-started/providers/credentials.mdx

@@ -7,24 +7,9 @@ The Credentials provider allows you to handle signing in with arbitrary credenti
 
 It is intended to support use cases where you have an existing system you need to authenticate users against, and therefore users authenticated in this manner are not persisted in the database.
 
-<Callout type="warning">
-OAuth providers spend significant amounts of money, time, and engineering effort to build:
-
-- abuse detection (bot-protection, rate-limiting)
-- password management (password reset, credential stuffing, rotation)
-- data security (encryption/salting, strength validation)
+## Resources
 
-and much more for authentication solutions. It is likely that your application would benefit from leveraging these battle-tested solutions rather than try to rebuild them from scratch.
-
-If you'd still like to build password-based authentication for your application despite these risks, Auth.js gives you full control to do so.
-
-</Callout>
-
-<Callout type="warning">
-  There is no validation on the user inputs by default. We recommend validating
-  user input at runtime using a library like [Zod](https://zod.dev) or
-  [Valibot](https://github.com/fabian-hiller/valibot).
-</Callout>
+- [Client-side Input Validation Example](/getting-started/authentication/credentials#verifying-data-with-zod)
 
 ## Configuration
 
@@ -103,15 +88,44 @@ app.use("/auth/*", ExpressAuth({
   </Code.Express>
 </Code>
 
-See the [callbacks documentation](/reference/core#authconfig#callbacks) for more information on how to interact with the token. For example, you can add additional information to the token by returning an object from the `jwt()` callback:
+### Custom Error Messages
+
+You can throw a custom error in the `authorize` function to return a custom error message to the user.
+
+```ts filename="@/auth.ts" /InvalidLoginError/
+import NextAuth, { CredentialsSignin } from "next-auth"
+import Credentials from "next-auth/providers/credentials"
 
-```js
-callbacks: {
-  async jwt({ token, user, account, profile, isNewUser }) {
-    if (user) {
-      token.id = user.id
-    }
-    return token
-  }
+class InvalidLoginError extends CredentialsSignin {
+  code = "Invalid identifier or password"
 }
+
+export const { handlers, auth } = NextAuth({
+  providers: [
+    Credentials({
+      credentials: {
+        username: { label: "Username" },
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials) {
+        throw new InvalidLoginError()
+      },
+    }),
+  ],
+})
 ```
+
+You will then receive that custom error code in the query parameters of the signin page your user returns to after a failed login attempt, for example `https://app.company.com/auth/signin?error=CredentialsSignin&code=Invalid+identifier+or+password`.
+
+<Callout type="warning">
+OAuth providers spend significant amounts of money, time, and engineering effort to build:
+
+- abuse detection (bot-protection, rate-limiting)
+- password management (password reset, credential stuffing, rotation)
+- data security (encryption/salting, strength validation)
+
+and much more for authentication solutions. It is likely that your application would benefit from leveraging these battle-tested solutions rather than try to rebuild them from scratch.
+
+If you'd still like to build password-based authentication for your application despite these risks, Auth.js gives you full control to do so.
+
+</Callout>