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/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

@@ -1477,15 +1477,13 @@ function PageNotFound() {
 
 interface RenderedPagesProps {
   pages: appDom.PageNode[];
+  defaultPage: appDom.PageNode;
   hasAuthentication?: boolean;
-  basename: string;
 }
 
-function RenderedPages({ pages, hasAuthentication = false, basename }: RenderedPagesProps) {
+function RenderedPages({ pages, defaultPage, hasAuthentication = false }: RenderedPagesProps) {
   const { search } = useLocation();
 
-  const defaultPage = pages[0];
-
   const defaultPageNavigation = <Navigate to={`/pages/${defaultPage.name}${search}`} replace />;
 
   return (
@@ -1503,8 +1501,8 @@ function RenderedPages({ pages, hasAuthentication = false, basename }: RenderedP
         if (!IS_RENDERED_IN_CANVAS && hasAuthentication) {
           pageContent = (
             <RequireAuthorization
-              allowedRole={page.attributes.authorization?.allowedRoles ?? []}
-              basename={basename}
+              allowAll={page.attributes.authorization?.allowAll ?? true}
+              allowedRoles={page.attributes.authorization?.allowedRoles ?? []}
             >
               {pageContent}
             </RequireAuthorization>
@@ -1563,30 +1561,47 @@ 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],
   );
 
+  if (!IS_RENDERED_IN_CANVAS && !session?.user && hasAuthentication) {
+    return <AppLoading />;
+  }
+
   return (
     <AppLayout
       activePageSlug={activePageSlug}
       pages={navEntries}
       hasNavigation={!IS_RENDERED_IN_CANVAS}
       hasHeader={hasAuthentication && !IS_RENDERED_IN_CANVAS}
       clipped={SHOW_PREVIEW_HEADER}
+      basename={basename}
     >
-      <RenderedPages pages={pages} hasAuthentication={hasAuthentication} basename={basename} />
+      <RenderedPages
+        pages={pages}
+        defaultPage={authFilteredPages[0] ?? pages[0]}
+        hasAuthentication={hasAuthentication}
+      />
     </AppLayout>
   );
 }