Add multiple user roles

[imjulianeral]

Your question
Hi, I was wondering If can I use this amazing library to perform role-based authentication.

What are you trying to do
What I'm trying to do is a web app where anyone can create an account but also an administrator can add other admins and other users with different roles manually.
My first try was adding a hacky way to accomplish this:

pages: {
    signIn: '/auth/add-user' || '/auth/signin',
    verifyRequest: '/auth/user-added',
  },

As you can see I have 2 routes, and it actually works because I can see my custom form in both routes but when a sign in, it only works for the add-user route.

Feedback

• Found the documentation helpful
• Found documentation but was incomplete
• [ *] Could not find relevant documentation
• Found the example project helpful
• [* ] Did not find the example project helpful

[spsaucier-bakkt]

I had assumed this was par for the course, but it seems that no one has role-based authentication working in next-auth...

[jasonreiche]

I have roles working.

models/index.js

import User, { UserSchema } from "./User"

export default {
  User: {
    model: User,
    schema: UserSchema
  }
}

models/User.js

import Adapters from "next-auth/adapters"

// Extend the built-in models using class inheritance
export default class User extends Adapters.TypeORM.Models.User.model {
  constructor(name, email, image, emailVerified, roles) {
    super(name, email, image, emailVerified)
    if (roles) { this.roles = roles}
  }
}

export const UserSchema = {
  name: "User",
  target: User,
  columns: {
    ...Adapters.TypeORM.Models.User.schema.columns,
    roles: {
      type: "varchar",
      nullable: true
    },
  },
}

pages/api/auth/[...nextauth].js

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import Adapters from 'next-auth/adapters'

import Models from '../../../models'

export default NextAuth({
  // @link https://next-auth.js.org/configuration/providers
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    })
  ],
  // @link https://next-auth.js.org/tutorials/typeorm-custom-models
  adapter: Adapters.TypeORM.Adapter(
    process.env.DATABASE_URL,
    {
      models: {
        User: Models.User
      }
    }
  ),
  session: { jwt: true },
  callbacks: {
    async jwt(token, user, account, profile, isNewUser) {
      if (account?.accessToken) {
        token.accessToken = account.accessToken
      }
      if (user?.roles) {
        token.roles = user.roles
      }
      return token
    },
    async session(session, token) {
      if(token?.accessToken) {
        session.accessToken = token.accessToken
      }
      if (token?.roles) {
        session.user.roles = token.roles
      }
      return session
    }
  }
});

Usage - in JSX

{session.user.roles && session.user.roles.includes("Admin") && <>
<button id="doSomething">Admin Only</button>
</>}

[IzaanAnwar]

But how to assign role, I am using google provider and I want some users to have a seller role.. how do I do it?

[GlennStreetman]

But how to assign role, I am using google provider and I want some users to have a seller role.. how do I do it?

See this guide: https://next-auth.js.org/tutorials/role-based-login-strategy

How you create your role update feature is up to you. Write your own API, do it manually in your database, it's up to you.

[nedelyux]

What happens if you update the user's role in the database?
It turns out that he will still have the old role in the token

[rockingrohit9639]

@GlennStreetman the link you provided does not work. Can you provide some other url?

[xcaeser]

try this: #9352 (comment)

[jasonreiche]

That does seem a bit odd. Does the DATABASE_URL have a protocol at the beginning of the connection string, like mongodb://? TypeORM would need the protocol prefix to identify which driver to use. You could hand a connection string without a protocol to most DB drivers. That would align with the pattern you are describing.

…

On Tue, Mar 30, 2021, 8:24 PM michaelcmelton ***@***.***> wrote: Looking at the code you submitted, everything seems in order. My first guess based on the symptoms would be an issue with the value of *process.env.DATABASE_URL*. That’s the odd part. When I pass in that value through the database property, and comment out the adapters property, I can connect to the db. It doesn’t work here for some reason. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#805 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGGYIEGUYCACRYC4M5UMRSLTGKIYNANCNFSM4V4VTRAA> .

[michaelcmelton]

It has the protocol for MySQL in front of it.

[jasonreiche]

Seems like the problem is happening in TypeORM somewhere. I'd try enabling TypeORM logging by adding (?|&)logging=true to the end of the connection string as described in How to use a Database.

I don't have an instance spun up I could try this in, so it's just a guess.

[WillTheVideoMan]

To reduce the number of database queries needed to get role-based authentication working, I have used a combo of JWTs and a so-called Gate which checks against the most up-to-date user's roles only when a server-side action must be authorised.

With this, you have the benefit of not needing to retrieve a session and subsequently a user from a database on every session-requiring request (saves two queries), whilst also having no worries about authorising against stale roles in JWTs. The Gate uses only one query to retrieve the current-most user roles, and even better, only makes that query when absolutely needed - no Gate on a session-requiring route = no database action at all.

Personally, I use the roles in the JWT for things like aesthetic client-side rendering, and rely on the Gate for real server-side transactions.

I am working with Fauna and a copy of the Fauna adapter. The example implementation below can be adapted to your own needs.

Example Implementation

Gate

The gate accepts a user ID and Fauna DB client, and returns some neat methods to determine if a person can do a thing.

import { query as q } from 'faunadb';

/**
 * Gate - returns a promised object containing methods to determine
 * if a given user is authorised against a give role(s)
 *
 * The gate fetches a copy of the user from a server-side store, rather than
 * relying on a session object directly. Since it is not easy to invalidate JWTs,
 * the local session's associated roles could become stale. Checking with the
 * server-side store every time, whilst introducing a read operations,
 * more robustly enforces permissions as it relies a single source of truth.
 *
 * @param {string} userId - the ID of the user to gate against.
 * @param {object} faunaClient - an instance of a Fauna DB client.
 * @returns {Promise}
 */
const Gate = async (userId, faunaClient) => {
    try {
        /**
         * Retrieve the user and their given roles from the server-side store.
         * If no user is returned, set an empty roles array to ensure all
         * gate methods return false, denying authorisation for any gated action.
         */
        const FQL = q.Get(q.Ref(q.Collection('users'), userId));
        const { data: user } = (await faunaClient.query(FQL)) || { data: { roles: [] } };

        /**
         * Determines if a user is assigned a given role.
         * @param {string} role - the roles to check against.
         * @returns {boolean}
         */
        const allows = (role) => user.roles.includes(role);

        /**
         * Determines if a user is assigned all given roles.
         * @param {[string]} roles - the roles to check against.
         * @returns {boolean}
         */
        const all = (roles) =>
            roles
                .map((role) => user.roles.includes(role))
                .reduce((allIncludes, includes) => (includes ? allIncludes : false), true);

        /**
         * Determines if a user is assigned at least one of the given roles.
         * @param {[string]} roles - the roles to check against.
         * @returns {boolean}
         */
        const any = (roles) =>
            roles
                .map((role) => user.roles.includes(role))
                .reduce((allIncludes, includes) => (includes ? true : allIncludes), false);

        /**
         * Determines which given roles are missing from the user's roles.
         * @param {[string]} roles - the roles to check against.
         * @returns {[string]}
         */
        const missing = (roles) => roles.filter((role) => !user.roles.includes(role));

        return { allows, all, any, missing };
    } catch {
        return Promise.reject(new Error('gate_error_fetching_user'));
    }
};

export default Gate;

Fauna Adapter Changes

All the roles field to any new users, which unfortunately involves modifying the Fauna adapter.
For non-Fauna folk, this is as easy as extending the user model.

---
function createUser(profile) {
    logger.debug('create_user', profile);

    const FQL = q.Create(q.Collection(collections.User), {
        data: {
            name: profile.name,
            email: profile.email,
            image: profile.image,
            emailVerified: profile.emailVerified
                ? q.Time(profile.emailVerified.toISOString())
                : null,
            username: profile.username,
            createdAt: q.Now(),
            updatedAt: q.Now(),
            roles: ['user'] // Add roles definiton
        }
    });
---

next-auth Callbacks

Use the callbacks to add the user ID and roles to the session object.
The unique fixed user ID is used later to tell the Gate which user to authorise against.

Note: The roles in our token can happily become stale, but our Gate knows the truth... Adding roles to the session object here is a convenience, and allows for easier client-side rendering logic.

    callbacks: {
        async jwt(token, user) {
            if (user?.id) token.id = user.id;
            if (user?.roles) token.roles = user.roles;
            return token;
        },
        async session(session, token) {
            if (token?.id) session.user.id = token.id;
            if (token?.roles) session.user.roles = token.roles;
            return session;
        }
    }

Usage

A full example implementation of a fully gated API route.
The same logic can be applied to SSR pages.

import Gate from '../../../../auth/fauna-gate';
import client from '../db/fauna-client';
import { getSession } from 'next-auth/client';

export default async (req, res) => {
    const session = await getSession({ req });

    if (session) {
        const gate = await Gate(session.user.id, client);

        // Check if user
        console.log(gate.allows('user'));
        // Check if user, dude and admin
        console.log(gate.all(['user', 'dude', 'admin']));
        // Check if user, dude or admin
        console.log(gate.any(['user', 'dude', 'admin']));
        // Find out what roles our user is missing from our user
        console.log(gate.missing(['user', 'dude', 'admin']));

        if (gate.all(['user', 'dude', 'admin'])) {
            // Signed in and correct roles
            res.status(200).json(session);
        } else {
            // Signed in but with missing roles
            res.status(403).json({
                message: 'forbidden',
                missing: gate.missing(['user', 'dude', 'admin'])
            });
        }
    } else {
        // Not Signed in
        res.status(401).json({ message: 'unauthorized' });
    }
    res.end();
};

If you wanted to transform this for use with database sessions, you could use the session callback to fetch the user roles on each session validation and add them to the returned session object. Then pass the user roles directly from the session object to the gate rather than passing a user ID. Personally, this feels a little clunky with database queries flinging off left, right and centre.

Disclaimer: Be sure to verify the logic before using this in your own code. Jus' sayin'.

[myhendry]

@WillTheVideoMan it would be excellent if there would be an example for such an implementation using MongoDB Adapters haha. i'm still trying to wrap my head as to how to do role based authentication with mongodb and next-auth

[nhnasem]

@myhendry Were you able to implement the role-based authentication using MongoDB and next-auth yet?

[myhendry]

nope. I shelf the project until there's more documentation on it

…

On Mon, Feb 21, 2022 at 2:47 AM Pelps12 ***@***.***> wrote: @myhendry <https://github.com/myhendry> Were you able to get it to work with the new mongoDB adapter? — Reply to this email directly, view it on GitHub <#805 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE5PYGZ52AFZG6JGB2EXPM3U4EZKJANCNFSM4V4VTRAA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[Pelps12]

I got it to work

[myhendry]

if you like, you might want to share how you got it to work so other developers can reference it

[Pelps12]

[GlennStreetman]

Using a database provider strategy:

First modify the 'user' table to include a "roll" row.

I'm using the Prisma ORM so i changed the 'user' table to include row as shown below:

//schema.prisma
model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  roll          String?  //<-- I ADDED THIS COLUMN
  accounts      Account[]
  sessions      Session[]
}

I modified the session callback in the [...nextauth].js file as shown below

//[...nextauth].js
callbacks: {
async session({ session, token, user }) {
	console.log("--Session CALLED--", session, "--user--", user, "--token--", token);
	session.user.roll = user.roll; //ADD THIS LINE SO THAT ROLL IS INCLUDED AS PART OF SESSION INFO.
	return session;
},

Now with both frontend and backend API get session hooks i can:

//API ROUTE OR FRONT END
const session = await getSession({ req });

if (session && session.user.roll === "admin") {
	//DO THINGS HERE IF USER IS admin
} else {
	//Sorry duder, you are not an admin
}

How you roll your own update API, for setting users as admin, is up to you. You might create a users.super column that can only be updated with direct database access.

[arturs706]

I really hope this is secured for a production, using Google, Twitter and Github providers.
Thank you

[DiegoGonzalezCruz]

I have followed the same approach, but found something annoying: the users need to log out and then log in to get corresponding role.

[DiegoGonzalezCruz]

Hi everyone,

I'm currently facing an issue with my admin panel. Although the database and roles have been updated successfully, I'm having trouble with the token not being updated accordingly.

As a result, I would like to know how to invalidate another user's session, so that they are prompted to sign in again after their role has been changed.

Thank you in advance for your assistance.

Best regards 🚀

[GymnastiarAlmaGhifari]

i make multiple role base access and i used the t3stack setup
https://github.com/E41211478/t3stack_credential_jwt_roles
maybe can help u gaes

[harshtalati2410]

I am using a Google provider + JWT strategy and want to assign different roles. What do u suggest?