Client Side Authorization with Credentials Provider

[jastardev]

Hey Team, I'm a bit confused about how to add roles in order to consume them on the client side (or server side for that matter). This started out as how to make it so only an admin can see a certain button.

In the code below, I've set up my own authorize logic(very rudimentary just for the purpose of figuring out roles), and return the user's email and roles, but that doesn't seem to actually seem to be reflected anywhere when I look at the session info on client. All I see is the user's email. So my next thought was place to the roles in the JWT callback. Being its tamper proof and gets sent to the server, it can be used for server side validation as well, but as it's encrypted, I wasn't sure how to consume it on the client. I ended up using the session callback, and in there, I grab the user's email from the session, look them up in the DB and then add their roles to the session before returning the session. This seems rather clunky though, essentially two database calls for each login/session creation. So is this where that logic should be placed? or am I missing something? This is currently just a just small project to test the waters for a larger project at work, I really love how easy next-auth makes it to authenticate, but the larger project will actually be pulling from Active Directory and likely be heavily role based, so I'm looking for the most efficient way to add/consume the roles. Thanks!

export default NextAuth({
    jwt:{
        secret: "***********************************************************"
    },
    callbacks:{
      async session({token, session, user}){

          const client = await connectToDatabase();
          const usersCollection = client.db().collection('users');
          const userEmail = session.user.email;
          const userInDb = await usersCollection.findOne({email: userEmail})
          session.user.roles = userInDb.roles;
          client.close();


          return session;
      }
    },
    providers: [
        Credentials({
            async authorize(credentials,req) {
                const client = await connectToDatabase();

                const usersCollection = client.db().collection('users');

                const user = await usersCollection.findOne({email: credentials.email})

                if(!user){
                    client.close();
                    console.log("Invalid Login, no user");
                    throw new Error("Invalid Login");
                }

                const isValid = await verifyPassword(credentials.password, user.password);
                if(!isValid){
                    throw new Error("Invalid Login");
                }
                client.close();

                return {
                    email: user.email,
                    roles: user.roles
                };

            }
        })
    ]
});

EDIT: I just wanted to add that the idea to place it in the JWT and then session came from a reddit reply from about 8 months ago where iaincollins provided this code:

callbacks: {
   async jwt(token, user, account, profile, isNewUser) {
    if (user) { // User object only passed on initial JWT creation
      const administrators = [ '[email protected]' ]
      token.isAdmin = administrators.includes(user?.email)
    }
    return token
  }
}

I think this code is basically equivalent to how I'm querying the db in the callback. the admins are just hardcoded in his example.