fix: update Middleware

[balazsorban44]

Following: https://nextjs.org/docs/messages/middleware-upgrade-guide#how-to-upgrade

☕️ Reasoning

What changes are being made? What feature/bug is being fixed here?

🧢 Checklist

• Documentation
• Tests
• Ready to be merged

🎫 Affected issues

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

Fixes: INSERT_ISSUE_LINK_HERE

📌 Resources

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

[vercel]

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

1 Ignored Deployment

Name	Status	Preview	Updated
next-auth	⬜️ Ignored (Inspect)		Jun 23, 2022 at 1:09PM (UTC)

[github-actions]

🎉 Experimental release published on npm!

npm i next-auth@0.0.0-pr.4757.5ac99859

yarn add next-auth@0.0.0-pr.4757.5ac99859

[ndom91]

LGTM 👍

[Juneezee]

@balazsorban44 I'm getting null for token in the example. Before this PR (using the old _middleware.ts), the token is returned correctly

[balazsorban44]

Note the content of this PR has not been released yet, besides #4757 (comment)

I tested this locally just now, and it works. Hard to tell more without a reproduction, but I would suggest opening an issue instead.

[Juneezee]

@balazsorban44 The only files I have changed are [...nextauth].ts and middleware.ts. Installed node_modules using yarn --ignore-engines. I'm using a CredentialsProvider that always return a dummy user object.

diff --git a/middleware.ts b/middleware.ts
index 2339882..5d8057c 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -3,9 +3,16 @@ import { withAuth } from "next-auth/middleware"
 // More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
 export default withAuth({
   callbacks: {
-    authorized: ({ req, token }) =>
+    authorized: ({ req, token }) => {
+      console.log("============ MIDDLEWARE =============")
+      console.log("req: ", req)
+      console.log("cookies: ", req.cookies)
+      console.log("headers: ", req.headers)
+      console.log("token: ", token)
+      console.log("============ MIDDLEWARE =============")
       // /admin requires admin role, but /me only requires the user to be logged in.
-      req.nextUrl.pathname !== "/admin" || token?.userRole === "admin",
+      return req.nextUrl.pathname !== "/admin" || token?.userRole === "admin"
+    },
   },
 })

--- a/pages/api/auth/[...nextauth].ts
+++ b/pages/api/auth/[...nextauth].ts
@@ -4,6 +4,7 @@ import FacebookProvider from "next-auth/providers/facebook"
 import GithubProvider from "next-auth/providers/github"
 import TwitterProvider from "next-auth/providers/twitter"
 import Auth0Provider from "next-auth/providers/auth0"
+import CredentialsProvider from "next-auth/providers/credentials"
 // import AppleProvider from "next-auth/providers/apple"
 // import EmailProvider from "next-auth/providers/email"
 
@@ -50,6 +51,22 @@ export const authOptions: NextAuthOptions = {
       clientSecret: process.env.AUTH0_SECRET,
       issuer: process.env.AUTH0_ISSUER,
     }),
+    CredentialsProvider({
+      // The name to display on the sign in form (e.g. 'Sign in with...')
+      name: "Credentials",
+      credentials: {
+        username: { label: "Username", type: "text", placeholder: "jsmith" },
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials, req) {
+        return {
+          name: "test",
+          email: "test@email.com",
+          image: "test.jpg",
+          id: "testabc123",
+        }
+      },
+    }),
   ],
   theme: {
     colorScheme: "light",

It seems req.cookies and req.headers have changed in Next.js 12.1.7-canary.45. Using getToken({ req }) returns null as well
EDIT: Cookies API are revamped https://nextjs.org/docs/messages/middleware-upgrade-guide#cookies-api-revamped

[balazsorban44]

Correct, this PR was opened to address these changes as linked in the description above. Once the Middleware changes go live in the next Next.js release, the recommendation will be to use the stable API anyway. Remember, Middleware has been in beta for a while, so this isn't breaking semver either.