Add users with roles and finish role-based page authorization

docs/schemas/v1/definitions.json

@@ -75,6 +75,31 @@
                     ]
                   },
                   "description": "Available roles for this application. These can be assigned to users."
+                },
+                "users": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "email": {
+                        "type": "string",
+                        "description": "The email address of the user."
+                      },
+                      "roles": {
+                        "type": "array",
+                        "items": {
+                          "type": "string"
+                        },
+                        "description": "Names of the roles assigned to the user."
+                      }
+                    },
+                    "required": [
+                      "email",
+                      "roles"
+                    ],
+                    "additionalProperties": false
+                  },
+                  "description": "User roles for this application."
                 }
               },
               "additionalProperties": false,

packages/toolpad-app/src/appDom/index.ts

@@ -65,6 +65,10 @@ export interface AppNode extends AppDomNodeBase {
         readonly name: string;
         readonly description?: string;
       }[];
+      readonly users?: {
+        readonly email: string;
+        readonly roles: string[];
+      }[];
     };
   };
 }
@@ -1083,6 +1087,9 @@ export function createDefaultDom(): AppDom {
     attributes: {
       title: 'Page 1',
       display: 'shell',
+      authorization: {
+        allowAll: true,
+      },
     },
   });
 

packages/toolpad-app/src/runtime/AppLayout.tsx

@@ -42,22 +42,22 @@ interface AppPagesNavigationProps {
   pages: NavigationEntry[];
   clipped?: boolean;
   search?: string;
+  basename: string;
 }
 
 function AppPagesNavigation({
   activePageSlug,
   pages,
   clipped = false,
   search,
+  basename,
 }: AppPagesNavigationProps) {
   const navListSubheaderId = React.useId();
 
   const theme = useTheme();
 
   const productIcon = theme.palette.mode === 'dark' ? productIconDark : productIconLight;
 
-  const initialPageSlug = pages[0].slug;
-
   return (
     <Drawer
       variant="permanent"
@@ -77,7 +77,7 @@ function AppPagesNavigation({
       <MuiLink
         color="inherit"
         aria-label="Go to home page"
-        href={initialPageSlug}
+        href={basename}
         underline="none"
         sx={{
           ml: 3,
@@ -139,6 +139,7 @@ export interface ToolpadAppLayoutProps {
   hasHeader?: boolean;
   children?: React.ReactNode;
   clipped?: boolean;
+  basename: string;
 }
 
 export function AppLayout({
@@ -148,6 +149,7 @@ export function AppLayout({
   hasHeader = false,
   children,
   clipped,
+  basename,
 }: ToolpadAppLayoutProps) {
   const theme = useTheme();
 
@@ -194,6 +196,7 @@ export function AppLayout({
           pages={pages}
           clipped={clipped}
           search={retainedSearch}
+          basename={basename}
         />
       ) : null}
       <Box sx={{ minWidth: 0, flex: 1, position: 'relative', flexDirection: 'column' }}>

packages/toolpad-app/src/runtime/ToolpadApp.tsx

@@ -1485,10 +1485,11 @@ function RenderedPages({ pages, hasAuthentication = false, basename }: RenderedP
           />
         );
 
-        if (!IS_RENDERED_IN_CANVAS && hasAuthentication && page.attributes.authorization) {
+        if (!IS_RENDERED_IN_CANVAS && hasAuthentication) {
           pageContent = (
             <RequireAuthorization
-              allowedRole={page.attributes.authorization.allowedRoles}
+              allowAll={page.attributes.authorization?.allowAll ?? true}
+              allowedRoles={page.attributes.authorization?.allowedRoles ?? []}
               basename={basename}
             >
               {pageContent}
@@ -1548,19 +1549,27 @@ function ToolpadAppLayout({ dom, basename }: ToolpadAppLayoutProps) {
   const root = appDom.getApp(dom);
   const { pages = [] } = appDom.getChildNodes(dom, root);
 
-  const { hasAuthentication } = React.useContext(AuthContext);
+  const { session, hasAuthentication } = React.useContext(AuthContext);
 
   const pageMatch = useMatch('/pages/:slug');
   const activePageSlug = pageMatch?.params.slug;
 
+  const authFilteredPages = React.useMemo(() => {
+    const userRoles = session?.user?.roles ?? [];
+    return pages.filter((page) => {
+      const { allowAll = true, allowedRoles = [] } = page.attributes.authorization ?? {};
+      return allowAll || userRoles.some((role) => allowedRoles.includes(role));
+    });
+  }, [pages, session?.user?.roles]);
+
   const navEntries = React.useMemo(
     () =>
-      pages.map((page) => ({
+      authFilteredPages.map((page) => ({
         slug: page.name,
         displayName: appDom.getPageDisplayName(page),
         hasShell: page?.attributes.display !== 'standalone',
       })),
-    [pages],
+    [authFilteredPages],
   );
 
   return (
@@ -1570,6 +1579,7 @@ function ToolpadAppLayout({ dom, basename }: ToolpadAppLayoutProps) {
       hasNavigation={!IS_RENDERED_IN_CANVAS}
       hasHeader={hasAuthentication && !IS_RENDERED_IN_CANVAS}
       clipped={SHOW_PREVIEW_HEADER}
+      basename={basename}
     >
       <RenderedPages pages={pages} hasAuthentication={hasAuthentication} basename={basename} />
     </AppLayout>

packages/toolpad-app/src/runtime/auth.tsx

@@ -5,21 +5,23 @@ import { AUTH_SIGNIN_PATH, AuthContext } from './useAuth';
 
 export interface RequireAuthorizationProps {
   children?: React.ReactNode;
-  allowedRole?: string | string[];
+  allowAll?: boolean;
+  allowedRoles?: string[];
   basename: string;
 }
 
 export function RequireAuthorization({
   children,
-  allowedRole,
+  allowAll,
+  allowedRoles,
   basename,
 }: RequireAuthorizationProps) {
   const { session, isSigningIn } = React.useContext(AuthContext);
   const user = session?.user ?? null;
 
   const allowedRolesSet = React.useMemo<Set<string>>(
-    () => new Set(asArray(allowedRole ?? [])),
-    [allowedRole],
+    () => new Set(asArray(allowedRoles ?? [])),
+    [allowedRoles],
   );
 
   React.useEffect(() => {
@@ -45,11 +47,8 @@ export function RequireAuthorization({
   }
 
   let reason = null;
-  if (!user.roles || user.roles.length <= 0) {
-    reason = 'User has no roles defined.';
-  } else if (!user.roles.some((role) => allowedRolesSet.has(role))) {
-    const rolesList = user?.roles?.map((role) => JSON.stringify(role)).join(', ');
-    reason = `User with role(s) ${rolesList} is not allowed access to this resource.`;
+  if (!allowAll && !user.roles.some((role) => allowedRolesSet.has(role))) {
+    reason = `User does not have the roles to access this page.`;
   }
 
   // @TODO: Once we have roles we can add back this check.

packages/toolpad-app/src/server/auth.ts

@@ -4,11 +4,28 @@ import GithubProvider from '@auth/core/providers/github';
 import GoogleProvider from '@auth/core/providers/google';
 import { getToken } from '@auth/core/jwt';
 import { asyncHandler } from '../utils/express';
-import { adaptRequestFromExpressToFetch } from './httpApiAdapters';
-import { ToolpadProject } from './localMode';
 import * as appDom from '../appDom';
+import { ToolpadProject } from './localMode';
+import { adaptRequestFromExpressToFetch } from './httpApiAdapters';
+
+async function getProfileRoles(email: string, project: ToolpadProject) {
+  const dom = await project.loadDom();
+
+  const app = appDom.getApp(dom);
+
+  let roles: string[] = [];
+  if (email) {
+    const authUser = app.attributes.authorization?.users?.find((user) => user.email === email);
+    roles = authUser?.roles ?? [];
+  }
+
+  return roles;
+}
+
+export function createAuthHandler(project: ToolpadProject): Router {
+  const { options } = project;
+  const { base } = options;
 
-export function createAuthHandler(base: string): Router {
   const router = express.Router();
 
   router.use(
@@ -27,6 +44,18 @@ export function createAuthHandler(base: string): Router {
           GithubProvider({
             clientId: process.env.TOOLPAD_GITHUB_ID,
             clientSecret: process.env.TOOLPAD_GITHUB_SECRET,
+            async profile(profile) {
+              const roles = await getProfileRoles(profile.email ?? '', project);
+
+              return {
+                ...profile,
+                id: profile.email ?? String(profile.id),
+                name: profile.name,
+                email: profile.email,
+                image: profile.avatar_url,
+                roles,
+              };
+            },
           }),
           GoogleProvider({
             clientId: process.env.TOOLPAD_GOOGLE_CLIENT_ID,
@@ -38,6 +67,17 @@ export function createAuthHandler(base: string): Router {
                 response_type: 'code',
               },
             },
+            async profile(profile) {
+              const roles = await getProfileRoles(profile.email, project);
+
+              return {
+                id: profile.email,
+                name: profile.name,
+                email: profile.email,
+                image: profile.picture,
+                roles,
+              };
+            },
           }),
         ],
         secret: process.env.TOOLPAD_AUTH_SECRET,
@@ -57,6 +97,22 @@ export function createAuthHandler(base: string): Router {
           async redirect({ baseUrl }) {
             return `${baseUrl}${base}`;
           },
+          jwt({ token, user }) {
+            if (user) {
+              token.roles = user.roles ?? [];
+            }
+            return token;
+          },
+          // @TODO: Types for session callback are broken as it says token does not exist but it does
+          // Github issue: https://github.com/nextauthjs/next-auth/issues/9437
+          // @ts-ignore
+          session({ session, token }) {
+            if (session.user) {
+              session.user.roles = token.roles ?? [];
+            }
+
+            return session;
+          },
         },
       })) as Response;
 
@@ -91,6 +147,7 @@ export async function createAuthPagesMiddleware(project: ToolpadProject) {
 
     const signInPath = `${base}/signin`;
 
+    let isRedirect = false;
     if (
       hasAuthentication &&
       req.get('sec-fetch-dest') === 'document' &&
@@ -111,11 +168,13 @@ export async function createAuthPagesMiddleware(project: ToolpadProject) {
       }
 
       if (!token) {
-        res.redirect(signInPath);
-        res.end();
-      } else {
-        next();
+        isRedirect = true;
       }
+    }
+
+    if (isRedirect) {
+      res.redirect(signInPath);
+      res.end();
     } else {
       next();
     }

packages/toolpad-app/src/server/index.ts

@@ -125,7 +125,7 @@ async function createDevHandler(project: ToolpadProject) {
   handler.use('/api/runtime-rpc', createRpcHandler(runtimeRpcServer));
 
   if (process.env.TOOLPAD_AUTH_SECRET) {
-    const authHandler = createAuthHandler(project.options.base);
+    const authHandler = createAuthHandler(project);
     handler.use('/api/auth', express.urlencoded({ extended: true }), authHandler);
   }
 

packages/toolpad-app/src/server/schema.ts

@@ -288,6 +288,15 @@ export const applicationSchema = toolpadObjectSchema(
           )
           .optional()
           .describe('Available roles for this application. These can be assigned to users.'),
+        users: z
+          .array(
+            z.object({
+              email: z.string().describe('The email address of the user.'),
+              roles: z.array(z.string()).describe('Names of the roles assigned to the user.'),
+            }),
+          )
+          .optional()
+          .describe('User roles for this application.'),
       })
       .optional()
       .describe('Authorization configuration for this application.'),

packages/toolpad-app/src/server/toolpadAppServer.ts

@@ -69,7 +69,7 @@ export async function createProdHandler(project: ToolpadProject) {
   handler.use('/api/runtime-rpc', createRpcHandler(runtimeRpcServer));
 
   if (process.env.TOOLPAD_AUTH_SECRET) {
-    const authHandler = createAuthHandler(project.options.base);
+    const authHandler = createAuthHandler(project);
     handler.use('/api/auth', express.urlencoded({ extended: true }), authHandler);
   }