How to secure specific pages using NextAuth and Middleware after authentication

[twilit burrow]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[solemn trail]

https://github.com/nextauthjs/next-auth-example/blob/main/middleware.ts

Try using the middleware this way:

[onyx rain]

Something like that: ```js
import { withAuth } from 'next-auth/middleware';

export default withAuth(
{
callbacks: {
authorized: ({ req, token }) => {
if (req.nextUrl.pathname === "/dashboard") {
return token?.role=== "ADMIN"
}
if (req.nextUrl.pathname === "/booking") {
return token?.role=== "USER"
}
return !!token;
},
},
}
);

export const config = {
matcher: ["/dashboard/:path*", "/booking/:path*", "/settings/:path*"]
};

[solemn trail]

If i remember correctly, the Authorized callback is supposed to return a boolean. If its true you continue, if its not true the user ends up going to the sign up page.

[onyx rain]

After the changes: if the user has a role of "USER" and is logged in and the user tries to access /dashboard then he is sent to callbackUrl "the sign in page"

[solemn trail]

Are you returning true?

In the condition?

Just console log to check if you are even getting the userRole passed correctly

Cause its gonna return false otherwise

[onyx rain]

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

export default withAuth(
    {
      callbacks: {
        authorized: ({ req, token }) => {
          if (req.nextUrl.pathname === "/dashboard" && token?.role !== "ADMIN") {
            console.log("req.nextUrl.pathname", req.nextUrl.pathname);
            console.log("token?.role", token?.role);
            //return to /booking if the role is not admin
            //return true will give access to /dashboard
            //return false will not give access to /dashboard nd send to callbackUrl "signin"
          }
          if (req.nextUrl.pathname === "/booking" && token?.role !== "USER") {
            console.log("req.nextUrl.pathname", req.nextUrl.pathname);
            console.log("token?.role", token?.role);
            //return to /dashboard if the role is not user
            //return true will give access to /booking
            //return false will not give access to /booking and send to callbackUrl "signin"
  
          }
          return !!token;
        },
      },
    }
  );
  
  export const config = {
    matcher: ["/dashboard/:path*", "/booking/:path*", "/settings/:path*"]
  };
``` I am getting the pathname and role in console: req.nextUrl.pathname /dashboard
token?.role USER

[solemn trail]

Wasnt it supposed to be token.userRole???

Thats why i am saying do console.log to check if you are receiving the token and its properties correctly

[onyx rain]

No. it is role I made a typo

According to the documentation: "The middleware function will only be invoked if the authorized callback returns true."

#next-auth Any one who can help?