Middleware withAuth token is null using Auth0 Provider?

[devinfrench]

Update: The below code works with "next": "12.2.0", but currently not the latest version.

I am following the Advanced usage configuration for wrapping middleware and keep getting null for the token when printing in the callbacks and the middleware function isn't called at all.
I can use useSession without issue in my components and console logs in the callbacks in [...nextauth].ts correctly output.

Additionally I tried using getToken which returned the token if I used raw: true, but null otherwise.
const session = await getToken({ req, secret: process.env.SECRET, raw: true })

My goal is to be able to use middleware to restrict access to all pages (eventually specific pages).

"next": "^12.2.4",
"next-auth": "^4.10.3",

middleware.ts

import withAuth from "next-auth/middleware"

export default withAuth(
    // `withAuth` augments your `Request` with the user's token.
    function middleware(req) {
        console.log("middleware", req.nextauth.token)
    },
    {
        callbacks: {
            authorized: ({ token }) => {
                console.log("callbacks", token);
                return token?.role === "admin";
            }
        },
    }
)

[...nextauth].ts

import NextAuth from "next-auth"
import Auth0Provider from "next-auth/providers/auth0"

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export default NextAuth({
    providers: [
        Auth0Provider({
            id: "auth0",
            clientId: process.env.AUTH0_CLIENT_ID,
            clientSecret: process.env.AUTH0_CLIENT_SECRET,
            issuer: process.env.AUTH0_ISSUER,
            // @ts-ignore
            domain: process.env.AUTH0_REDIRECT_DOMAIN,
            authorization: {
                params: {
                    scope: "openid email profile",
                    audience: "https://mywebsite.com/api"
                }
            }
        }),
    ],
    pages: {
        // signIn: '/auth/signin',  // Displays signin buttons
        // signOut: '/auth/signout', // Displays form with sign out button
        // error: '/auth/error', // Error code passed in query string as ?error=
        // verifyRequest: '/auth/verify-request', // Used for check email page
        // newUser: null // If set, new users will be directed here on first sign in
    },
    callbacks: {
        // async signIn({ user, account, profile, email, credentials }) { return true },
        // async redirect({ url, baseUrl }) { return baseUrl },
        async session({ session, token, user }) {
            console.log("SESSION EVENT!!!!!!!")
            if (token.profile['https://auth.mywebsite.org/role']) {
                session.role = token.profile['https://auth.mywebsite.org/role']
            }
            return session
        },
        async jwt({ token, user, account, profile, isNewUser }) {
            console.log("JWT EVENT!!!!!!!")
            console.log(token)
            console.log(user)
            console.log(account)
            console.log(profile)
            //console.log(user.email)
            if (profile) {
                token.profile = profile;
            }
            return token
        }
    },
    events: {},
    debug: false,
})

[devinfrench]

Fix was to downgrade Next.js to 12.2.0

[rikinshah86]

I am having similar issue on Next.js version 12.1.0. I upgraded to version 12.2.0 but token is still null in authorized callback. Any other suggestions?