Add RBAC with Azure AD authentication provider

docs/schemas/v1/definitions.json

@@ -29,7 +29,8 @@
                         "type": "string",
                         "enum": [
                           "github",
-                          "google"
+                          "google",
+                          "azure-ad"
                         ],
                         "description": "Unique identifier for this authentication provider."
                       }
@@ -82,6 +83,26 @@
                     ]
                   },
                   "description": "Available roles for this application. These can be assigned to users."
+                },
+                "roleMappings": {
+                  "type": "object",
+                  "additionalProperties": {
+                    "type": "object",
+                    "additionalProperties": {
+                      "type": "array",
+                      "items": {
+                        "type": "string"
+                      }
+                    }
+                  },
+                  "propertyNames": {
+                    "enum": [
+                      "github",
+                      "google",
+                      "azure-ad"
+                    ]
+                  },
+                  "description": "Role mapping definitions from authentication provider roles to Toolpad roles."
                 }
               },
               "additionalProperties": false,

package.json

@@ -98,7 +98,7 @@
   "engines": {
     "npm": "please-use-yarn",
     "node": ">=18",
-    "pnpm": "8.7.0"
+    "pnpm": ">=8.7.0"
   },
   "resolutions": {
     "google-auth-library": "*"

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

@@ -13,7 +13,7 @@ import invariant from 'invariant';
 import { BoxProps, ThemeOptions as MuiThemeOptions } from '@mui/material';
 import { guessTitle, pascalCase, removeDiacritics, uncapitalize } from '@mui/toolpad-utils/strings';
 import { mapProperties, mapValues, hasOwnProperty } from '@mui/toolpad-utils/collections';
-import { AuthProviderConfig, ConnectionStatus } from '../types';
+import { AuthProvider, AuthProviderConfig, ConnectionStatus } from '../types';
 import { omit, update, updateOrCreate } from '../utils/immutability';
 import { ExactEntriesOf, Maybe } from '../utils/types';
 import { envBindingSchema } from '../server/schema';
@@ -66,6 +66,7 @@ export interface AppNode extends AppDomNodeBase {
         readonly name: string;
         readonly description?: string;
       }[];
+      readonly roleMappings?: Partial<Record<AuthProvider, Record<string, string[]>>>;
     };
   };
 }
@@ -1084,6 +1085,9 @@ export function createDefaultDom(): AppDom {
     attributes: {
       title: 'Page 1',
       display: 'shell',
+      authorization: {
+        allowAll: true,
+      },
     },
   });
 

packages/toolpad-app/src/components/icons/AzureIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface AzureIconProps {
+  size?: number;
+  color?: string;
+}
+
+export default function AzureIcon({ size = 18, color = 'currentColor' }: AzureIconProps) {
+  return (
+    <svg viewBox="0 0 59.242 47.271" width={size} height={size} xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m32.368 0-17.468 15.145-14.9 26.75h13.437zm2.323 3.543-7.454 21.008 14.291 17.956-27.728 4.764h45.442z"
+        fill={color}
+      />
+    </svg>
+  );
+}

packages/toolpad-app/src/constants.ts

@@ -21,4 +21,4 @@ export const VERSION_CHECK_INTERVAL = 1000 * 60 * 10;
 // TODO: Remove once global functions UI is ready
 export const FEATURE_FLAG_GLOBAL_FUNCTIONS = false;
 
-export const FEATURE_FLAG_AUTHORIZATION = false;
+export const FEATURE_FLAG_AUTHORIZATION = 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/SignInPage.tsx

@@ -65,51 +65,80 @@ export default function SignInPage() {
         <Typography variant="subtitle1" mb={1}>
           You must be authenticated to use this app.
         </Typography>
-        {authProviders.includes('github') ? (
-          <LoadingButton
-            variant="contained"
-            onClick={handleSignIn('github')}
-            startIcon={<GitHubIcon />}
-            loading={isSigningIn && latestSelectedProvider === 'github'}
-            disabled={isSigningIn}
-            loadingPosition="start"
-            size="large"
-            sx={{
-              backgroundColor: '#24292F',
-            }}
-          >
-            Sign in with GitHub
-          </LoadingButton>
-        ) : null}
-        {authProviders.includes('google') ? (
-          <LoadingButton
-            variant="contained"
-            onClick={handleSignIn('google')}
-            startIcon={
-              <img
-                alt="Google logo"
-                loading="lazy"
-                height="18"
-                width="18"
-                src="https://authjs.dev/img/providers/google.svg"
-                style={{ marginLeft: '2px', marginRight: '2px' }}
-              />
-            }
-            loading={isSigningIn && latestSelectedProvider === 'google'}
-            disabled={isSigningIn}
-            loadingPosition="start"
-            size="large"
-            sx={{
-              backgroundColor: '#fff',
-              color: '#000',
-              '&:hover': {
-                color: theme.palette.primary.contrastText,
-              },
-            }}
-          >
-            Sign in with Google
-          </LoadingButton>
-        ) : null}
+        <Stack sx={{ width: 300 }} gap={2}>
+          {authProviders.includes('github') ? (
+            <LoadingButton
+              variant="contained"
+              onClick={handleSignIn('github')}
+              startIcon={<GitHubIcon />}
+              loading={isSigningIn && latestSelectedProvider === 'github'}
+              disabled={isSigningIn}
+              loadingPosition="start"
+              size="large"
+              fullWidth
+              sx={{
+                backgroundColor: '#24292F',
+              }}
+            >
+              Sign in with GitHub
+            </LoadingButton>
+          ) : null}
+          {authProviders.includes('google') ? (
+            <LoadingButton
+              variant="contained"
+              onClick={handleSignIn('google')}
+              startIcon={
+                <img
+                  alt="Google logo"
+                  loading="lazy"
+                  height="18"
+                  width="18"
+                  src="https://authjs.dev/img/providers/google.svg"
+                  style={{ marginLeft: '2px', marginRight: '2px' }}
+                />
+              }
+              loading={isSigningIn && latestSelectedProvider === 'google'}
+              disabled={isSigningIn}
+              loadingPosition="start"
+              size="large"
+              fullWidth
+              sx={{
+                backgroundColor: '#fff',
+                color: '#000',
+                '&:hover': {
+                  color: theme.palette.primary.contrastText,
+                },
+              }}
+            >
+              Sign in with Google
+            </LoadingButton>
+          ) : null}
+          {authProviders.includes('azure-ad') ? (
+            <LoadingButton
+              variant="contained"
+              onClick={handleSignIn('azure-ad')}
+              startIcon={
+                <img
+                  alt="Microsoft Azure logo"
+                  loading="lazy"
+                  height="18"
+                  width="18"
+                  src="https://authjs.dev/img/providers/azure.svg"
+                />
+              }
+              loading={isSigningIn && latestSelectedProvider === 'azure-ad'}
+              disabled={isSigningIn}
+              loadingPosition="start"
+              size="large"
+              fullWidth
+              sx={{
+                backgroundColor: '##0072c6',
+              }}
+            >
+              Sign in with Azure AD
+            </LoadingButton>
+          ) : null}
+        </Stack>
       </Stack>
       <Snackbar
         open={!!errorSnackbarMessage}

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

@@ -1503,7 +1503,8 @@ function RenderedPages({ pages, hasAuthentication = false, basename }: RenderedP
         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}
@@ -1563,19 +1564,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 (
@@ -1585,6 +1594,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.