Skip to main content


You can add RBAC in NextShield by adding 2 properties:

  • RBAC: Object literal where you define the existing roles and the routes, you must add the accessRoute on each role.
  • userRole: String prop, must match with the defined roles in RBAC.


import { useRouter } from 'next/router'import { NextShield, NextShieldProps } from 'next-shield'
export function Shield({ children }: Props) {  const router = useRouter()
  const shieldConfig: NextShieldProps<    ['/private', '/control-panel', '/dashboard'],    ['/', '/login']  > = {    router,    isAuth: true,    isLoading: false,    LoadingComponent: <p>Loading...</p>,    privateRoutes: ['/private', '/control-panel', '/dashboard'],    publicRoutes: ['/', '/login'],    loginRoute: '/login',    RBAC: {      ADMIN: {        grantedRoutes: ['/dashboard', '/control-panel'],        accessRoute: '/dashboard',      },      EMPLOYEE: {        grantedRoutes: ['/private', '/dashboard'],        accessRoute: '/private',      },    },    userRole: 'ADMIN' | 'EMPLOYEE',  }
  return <NextShield {...shieldConfig}>{children}</NextShield>}