Kinde•11mo ago

Kinde TypeScript type in Next.js middleware

Hi, With Next.js 14 and TypeScript, may I know how can I specify the type for req so that it recognizes req.kindeAuth,

export default withAuth(async function middleware(req) {
  console.log("look at me", req.kindeAuth);
});

export default withAuth(async function middleware(req) {
  console.log("look at me", req.kindeAuth);
});

Is there a type provided by Kinde?

1 Reply

Oli - Kinde•11mo ago

Hi @TJ, In the Kinde Next.js SDK, the req object is an instance of the Next.js NextApiRequest type, which is extended with a kindeAuth property. To specify the type for req in TypeScript, you can create a new type that extends NextApiRequest and includes kindeAuth. Here's an example:

import { NextApiRequest } from "next";
import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";

interface KindeRequest extends NextApiRequest {
  kindeAuth: any; // Replace 'any' with the actual type of kindeAuth if known
}

export default withAuth(async function middleware(req: KindeRequest) {
  console.log("look at me", req.kindeAuth);
});

import { NextApiRequest } from "next";
import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";

interface KindeRequest extends NextApiRequest {
  kindeAuth: any; // Replace 'any' with the actual type of kindeAuth if known
}

export default withAuth(async function middleware(req: KindeRequest) {
  console.log("look at me", req.kindeAuth);
});

In this example, KindeRequest is a new type that includes all properties of NextApiRequest and an additional kindeAuth property. You can replace any with the actual type of kindeAuth if it's known. Please note that the type of kindeAuth isn't explicitly defined in the Kinde SDK, so you might need to adjust the type based on your application's needs. We will add in proper types to the NextJS SDK very soon. Hope this helps! Let me know if you have any other questions.

Gaming

Programming

Kinde TypeScript type in Next.js middleware