Error while setting up the middle - withAuth / getToken

[dawidseipold]

Environment

System:
OS: Windows 10 10.0.22000
CPU: (4) x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
Memory: 17.66 GB / 31.91 GB
Binaries:
Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0)
Internet Explorer: 11.0.22000.120
npmPackages:
next: latest => 12.2.3
next-auth: ^4.10.3 => 4.10.3
react: 18.1.0 => 18.1.0

Reproduction URL

https://github.com/dawidseipold/melsea

Describe the issue

Hi! I have a problem with setting up the middleware for the next-auth.

No matter what I put inside of the withAuth function, I get the same error whenever I go to a configured matching route.

Server error
There is a problem with the server configuration.
Check the server logs for more information.

GET http://localhost:3000/api/auth/error?error=Configuration 500 (Internal Server Error)

import { withAuth } from 'next-auth/middleware';

export default withAuth({
  callbacks: {
    authorized: async ({ req, token }) => {
      const pathname = req.nextUrl.pathname;

      if (token) return true;

      return false;
    },
  },
  pages: {
    signIn: '/login',
  },
});

export const config = {
  matcher: ['/'],
};

The code above is just an example of what I've tried, but the same error occurs even if I do it like this:

export { default } from "next-auth/middleware"

Throughout the whole app I retrieve the token with a getSession function, which cannot be used in the middleware. From what I read you can use getToken function as an alternative, however that also doesn't work for me, as I get the same error as described here, when I use this code:

import { getToken } from 'next-auth/jwt';
import { NextResponse } from 'next/server';

export default async function middleware(req) {
  const token = await getToken({ req, secret: process.env.JWT_SECRET });
  const { pathname, origin } = req.nextUrl;

  if (pathname.includes('api/auth') || token) {
    return NextResponse.next();
  }

  if (!token && pathname !== '/login') {
    return NextResponse.redirect(`${origin}/login`);
  }
}

All of that makes me believe that I might've setup something wrong inside of the [...nextauth].ts file, but can't really point it out myself. My guess is that I', probably juggling around between jwt and database session strategy, which would explain the lack of the token (I might be wrong though).

[...nextauth].ts

import NextAuth, { Session, User } from 'next-auth';
import SpotifyProvider from 'next-auth/providers/spotify';
import { SPOTIFY_LOGIN_URL } from '../../../lib/spotify';

export default NextAuth({
  providers: [
    SpotifyProvider({
      clientId: process.env.SPOTIFY_CLIENT_ID as string,
      clientSecret: process.env.SPOTIFY_CLIENT_SECRET as string,
      authorization: SPOTIFY_LOGIN_URL,
    }),
  ],
  secret: process.env.JWT_SECRET,
  session: { strategy: 'jwt' },
  pages: {
    signIn: '/login',
  },
  callbacks: {
    async jwt({ token, account, user }) {
      if (account && user) {
        token.accessToken = account.refresh_token;
      }
      return token;
    },

    async session(session, user) {
      session.user = user;
      return session;
    },
  },
});

How to reproduce

1. Set up the [...nextauth].ts as above
2. Set up middleware.ts as above

Expected behavior

If the user is not authorized by Spotify they should be redirected by middleware into '/login' route. If they are however, they should be able to use the other routes.

[ThangHuuVu]

Duplicated of #5105