z4nr34l / next-easy-middlewares

Missing polyfill for multiple next.js middlewares
https://next-easy-middlewares.vercel.app/
MIT License
87 stars 4 forks source link

typing issues with nextauth middleware #16

Closed adambirds closed 4 months ago

adambirds commented 4 months ago

Do you have any idea why I'm getting these type errors:

import { createMiddleware } from "next-easy-middlewares";
import {withAuth} from "next-auth/middleware";

const customWithAuth = withAuth({
    pages: {
        signIn: "/login",
        error: "/not-found",
    },
});

const middlewares = {
    '/dashboard:path*': customWithAuth,
    '/ebay-callback': customWithAuth,
    '/ebay-auth': customWithAuth,

};

export default createMiddleware(middlewares);

I am getting the below errors:

Argument of type '{ '/dashboard:path*': NextMiddlewareWithAuth; '/ebay-callback': NextMiddlewareWithAuth; '/ebay-auth': NextMiddlewareWithAuth; }' is not assignable to parameter of type 'MiddlewareConfig'.
  Property ''/dashboard:path*'' is incompatible with index signature.
    Type 'NextMiddlewareWithAuth' is not assignable to type 'MiddlewareFunction | MiddlewareFunction[]'.
      Type 'NextMiddlewareWithAuth' is not assignable to type 'MiddlewareFunction'.
        Target signature provides too few arguments. Expected 2 or more, but got 1.

I am trying to use the NextAuth middleware.

linear[bot] commented 4 months ago

SUP-53 typing issues with nextauth middleware

z4nr34l commented 4 months ago

Hi, good catch!

I will look into this in next few days.

Thanks for reporting :D

Could you share with me which next-auth version did you used?

P.S. If you want you can make an PR :> haha

adambirds commented 4 months ago

@z4nr34l I'm not quite sure the best way to resolve in your package without depending on next-auth, but i temp resolved it for me by overriding the types with this:

// next-easy-middlewares.d.ts
import "next-easy-middlewares";
import {NextMiddlewareWithAuth} from "next-auth/middleware";

declare module "next-easy-middlewares" {
    interface MidddlewareConfig {
        [path: string]:
            | MiddlewareFunction
            | MiddlewareFunction[]
            | NextMiddlewareWithAuth;
    }

    declare function createMiddleware(
        pathMiddlewareMap: MiddlewareConfig,
        globalMiddleware?: Record<string, MiddlewareFunction>,
    ): MiddlewareFunction;
}

So it may be just a case you add this to the docs for those using NextAuth. I ended up chinning NextAuth off anyway yesterday due to an issue with it during build so not a massive issue for me anyway now. Great work on the package though, its working great with my other custom middlewares.

z4nr34l commented 4 months ago

@adambirds thanks for kind words and such great workaround!

I will look further to improve package types instead of generating workarounds :D

Happy coding!

z4nr34l commented 4 months ago

I will fix that when #13 is merged (there will be an example of usage with next-auth also available)

z4nr34l commented 4 months ago

Hi @adambirds!

Hope everything currently works for you, but I had improved typings in package, so there is a much easier way to use other packages middlewares without depending on them inside package.

Here you will find example with next-auth:

https://github.com/z4nr34l/next-easy-middlewares/blob/main/examples/next-auth/src/middleware.ts

Remember to upgrade your package to latest version!

npm install next-easy-middlewres@latest pnpm add next-easy-middlewres@latest bun add next-easy-middlewres@latest yarn add next-easy-middlewres@latest

If you will run into trouble with that again feel free to reopen this issue.

Happy coding!