fix(ts): add overloads to withAuth middleware

[rexfordessilfie]

☕️ Reasoning

The withAuth middleware returns different values depending on provided arguments. In the current implementation it returns a union such as:NextMiddlewareWithAuth | NextMiddlewareResult | ....

This union is type is not narrow enough for use in scenarios where we expect a callable NextMiddlewareWithAuth that we can invoke later after getting some outside context from the middleware request object.

In summary, when we want to do something like this:

export default middleware(req: Request, event: NextFetchEvent){
   // ...do something with Request
   const response = withAuth({...})(req, event)
   // ...do something with Response?
  return response
}

// Side note: This PR also resolves type issues that would arise from doing this instead 
// (for the reason that Request does not extend `NextRequestWithAuth`:
// const response = withAuth(req, {...})

Solution: This PR adds type overloads such that the types narrow down as expected depending on the arguments supplied to withAuth. This lets us do the above without any type issues.

🧢 Checklist

• Documentation (N/A)
• Tests (N/A)
• Ready to be merged

🎫 Affected issues

Please scout and link issues that might be solved by this PR.

Fixes: #7997

📌 Resources

• Security guidelines
• Contributing guidelines
• Code of conduct
• Contributing to Open Source

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-auth-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 12, 2023 3:36am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
auth-docs	⬜️ Ignored (Inspect)	Visit Preview		Jul 12, 2023 3:36am

[vercel]

@rexfordessilfie is attempting to deploy a commit to the authjs Team on Vercel.

A member of the Team first needs to authorize it.

[balazsorban44]

Thanks, could you open this against the v4 branch? 🙏

[rexfordessilfie]

Thanks! Will do.

[rexfordessilfie]

Done, @balazsorban44 ✅. Let me know if I did everything right!

[ThangHuuVu]

Thanks for the detailed bug report and the PR, @rexfordessilfie 🙏 I left a comment, let me know what you think!

[ThangHuuVu]

I feel like this type is NextMiddlewareWithAuth with a different request type
How do you think if we do it like this:

export function withAuth(): ReturnType<NextMiddlewareWithAuth>

export function withAuth(
  req: NextRequestWithAuth
): ReturnType<NextMiddlewareWithAuth>

export function withAuth(
  req: NextRequestWithAuth,
  event: NextFetchEvent
): ReturnType<NextMiddlewareWithAuth>

export function withAuth(
  req: NextRequestWithAuth,
  options: NextAuthMiddlewareOptions
): ReturnType<NextMiddlewareWithAuth>

export function withAuth(
  middleware: NextMiddlewareWithAuth,
  options: NextAuthMiddlewareOptions
): NextMiddlewareWithAuth

export function withAuth(
  middleware: NextMiddlewareWithAuth
): NextMiddlewareWithAuth

export function withAuth(
  options: NextAuthMiddlewareOptions
): NextMiddlewareWithAuth

Doing this way, we will keep the params consistent with the return type: ReturnType<NextMiddlewareWithAuth> | NextMiddlewareWithAuth.

In the app code, it will be like this:

import { NextRequestWithAuth, withAuth } from "next-auth/middleware"
import { NextFetchEvent } from "next/server";

export default async function middleware(req: NextRequestWithAuth, event: NextFetchEvent) {
  const localeStr = req.headers.get("Accept-Language");
  const locale = localeStr?.split(";")[0].split(",")[0];

  const withAuthMiddleware = withAuth({
    callbacks: {},
    pages: {
      signIn: `/?locale=${locale}`,
    },
  });

  return await withAuthMiddleware(req, event);
}

One different is how we type the req object - we can use NextRequestWithAuth for it.

[rexfordessilfie]

Thanks for the feedback! Yes, you are right. It was a copy directly from NextMiddlewareWithAuth.

I did not consider using req: NextRequestWithAuth directly. I noticed I was getting type errors when it was req: Request and so I made a generic version of NextMiddlewareWithAuth to fix the type errors!

I will switch to this and request a re-review!

[ThangHuuVu]

LGTM!

[masterkain]

#13 38.29 Failed to compile.
#13 38.29 
#13 38.29 ./app/api/auth/[...nextauth]/route.ts:4:17
#13 38.29 Type error: This expression is not callable.
#13 38.29   Type 'typeof import("/app/node_modules/next-auth/next")' has no call signatures.
#13 38.29 
#13 38.29   2 | import NextAuth from 'next-auth';
#13 38.29   3 | 
#13 38.29 > 4 | const handler = NextAuth(authOptions);
#13 38.29     |                 ^
#13 38.29   5 | 
#13 38.29   6 | export { handler as GET, handler as POST };
#13 38.29   7 | 
#13 ERROR: process "/bin/sh -c yarn build" did not complete successfully: exit code: 1

my build is failing, app/api/auth/[...nextauth]/route.ts:

import { authOptions } from '@/lib/auth';
import NextAuth from 'next-auth';

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };