[SOLVED] trpc giving error when trying to test with postman

I'm using nextjs app router, trpc, prisma, zod.

Trying to test my trpc endpoint:

http://localhost:3000/api/trpc/user.login
using Body- AW-JSON
{
    "username": "admin",
    "password": "CodingDojo2022!"
}

But I'm getting this error:

 POST /api/trpc/user.login 400 in 15ms
❌ tRPC failed on user.login: [
  {
    "code": "invalid_type",
    "expected": "object",
    "received": "undefined",
    "path": [],
    "message": "Required"
  }
]

{
    "error": {
        "json": {
            "message": "[\n  {\n    \"code\": \"invalid_type\",\n    \"expected\": \"object\",\n    \"received\": \"undefined\",\n    \"path\": [],\n    \"message\": \"Required\"\n  }\n]",
            "code": -32600,
            "data": {
                "code": "BAD_REQUEST",
                "httpStatus": 400,
                "stack": "TRPCError: [\n  {\n    \"code\": \"invalid_type\",\n    \"expected\": \"object\",\n    \"received\": \"undefined\",\n    \"path\": [],\n    \"message\": \"Required\"\n  }\n]\n    at inputValidatorMiddleware (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/unstable-core-do-not-import/middleware.mjs:56:19)\n    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n    at async callRecursive (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/unstable-core-do-not-import/procedureBuilder.mjs:160:32)\n    at async procedure (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/unstable-core-do-not-import/procedureBuilder.mjs:190:24)\n    at async eval (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/unstable-core-do-not-import/http/resolveResponse.mjs:207:30)\n    at async resolveResponse (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/unstable-core-do-not-import/http/resolveResponse.mjs:236:35)\n    at async fetchRequestHandler (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/adapters/fetch/fetchRequestHandler.mjs:39:12)\n    at async /Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:55038\n    at async ek.execute (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:45808)\n    at async ek.handle (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:56292)\n    at async doRender (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/base-server.js:1377:42)\n    at async cacheEntry.responseCache.get.routeKind (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/base-server.js:1587:40)\n    at async DevServer.renderToResponseWithComponentsImpl (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/base-server.js:1507:28)\n    at async DevServer.renderPageComponent (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/base-server.js:1931:24)\n    at async DevServer.renderToResponseImpl (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/base-server.js:1969:32)\n    at async DevServer.pipeImpl (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/base-server.js:920:25)\n    at async NextNodeServer.handleCatchallRenderRequest (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/next-server.js:272:17)\n    at async DevServer.handleRequestImpl (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/base-server.js:816:17)\n    at async /Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/dev/next-dev-server.js:339:20\n    at async Span.traceAsyncFn (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/trace/trace.js:154:20)\n    at async DevServer.handleRequest (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/dev/next-dev-server.js:336:24)\n    at async invokeRender (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/lib/router-server.js:174:21)\n    at async handleRequest (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/lib/router-server.js:353:24)\n    at async requestHandlerImpl (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/lib/router-server.js:377:13)\n    at async Server.requestListener (/Users/coding-workspace/Projects/Project440/onlinestore/node_modules/next/dist/server/lib/start-server.js:141:13)",
                "path": "user.login",
                "zodError": {
                    "formErrors": [
                        "Required"
                    ],
                    "fieldErrors": {}
                }
            }
        }
    }
}

Meaning that the input is not correct type, but everything looks correct to me.

Here is my code:

login: publicProcedure
    .input(
      z.object({
        username: z.string(),
        password: z.string(),
      })
    )
    .mutation(async ({ input, ctx }) => {
      const { username, password } = input;
      const user = await db.user.findUnique({ where: { username } });

      if (!user || !(await verifyPassword(password, user.password))) {
        throw new TRPCError({
          code: "UNAUTHORIZED",
          message: "Invalid username or password",
        });
      }
..
.
.
.

My input in postman is raw JSON, with username and password, and in the login endpoint the input is ZOD object of username and password both being strings.

In my postman, I have set up a content type application/JSON in the headers and still not working.

trpc giving error when trying to test with postman

FROM:

TO THIS: