Authentication/authorization tests

docs/schemas/v1/definitions.json

@@ -27,7 +27,7 @@
                     "properties": {
                       "provider": {
                         "type": "string",
-                        "enum": ["github", "google", "azure-ad"],
+                        "enum": ["github", "google", "azure-ad", "credentials"],
                         "description": "Unique identifier for this authentication provider."
                       },
                       "roles": {

packages/toolpad-app/package.json

@@ -41,7 +41,7 @@
     }
   },
   "dependencies": {
-    "@auth/core": "0.24.0",
+    "@auth/core": "0.20.0",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.3",
     "@emotion/server": "11.11.0",

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

@@ -1,35 +1,72 @@
 import * as React from 'react';
-import { Alert, Snackbar, Stack, Typography, useTheme } from '@mui/material';
+import {
+  Alert,
+  Button,
+  Divider,
+  Snackbar,
+  Stack,
+  TextField,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import GitHubIcon from '@mui/icons-material/GitHub';
+import PasswordIcon from '@mui/icons-material/Password';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { LoadingButton } from '@mui/lab';
 import { useSearchParams } from 'react-router-dom';
+import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 import { AuthProvider, AuthContext } from './useAuth';
 import productIconDark from '../../public/product-icon-dark.svg';
 import productIconLight from '../../public/product-icon-light.svg';
 
 const AUTH_ERROR_URL_PARAM = 'error';
 
+type CredentialsFormInputs = {
+  username: string;
+  password: string;
+};
+
+const azureIconSvg = (
+  <svg viewBox="0 0 59.242 47.271" width={18} height={18} 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="currentColor"
+    />
+  </svg>
+);
+
 export default function SignInPage() {
   const theme = useTheme();
   const [urlParams] = useSearchParams();
 
   const { signIn, isSigningIn } = React.useContext(AuthContext);
 
-  const [errorSnackbarMessage, setErrorSnackbarMessage] = React.useState<string>('');
+  const [errorSnackbarMessage, setErrorSnackbarMessage] = React.useState<React.ReactNode>('');
   const [latestSelectedProvider, setLatestSelectedProvider] = React.useState<AuthProvider | null>(
     null,
   );
 
+  const [isCredentialsSignIn, setIsCredentialsSignIn] = React.useState(false);
+
   const { authProviders } = React.useContext(AuthContext);
 
   const handleSignIn = React.useCallback(
-    (provider: AuthProvider) => () => {
-      setLatestSelectedProvider(provider);
-      signIn(provider);
-    },
+    (provider: AuthProvider, payload?: Record<string, unknown>, isLocalProvider?: boolean) =>
+      () => {
+        setLatestSelectedProvider(provider);
+        signIn(provider, payload, isLocalProvider);
+      },
     [signIn],
   );
 
+  const handleCredentialsSignIn = React.useCallback(() => {
+    setIsCredentialsSignIn(true);
+  }, []);
+
+  const handleCredentialsBack = React.useCallback(() => {
+    setIsCredentialsSignIn(false);
+  }, []);
+
   React.useEffect(() => {
     const authError = urlParams.get(AUTH_ERROR_URL_PARAM);
 
@@ -39,6 +76,8 @@ export default function SignInPage() {
       setErrorSnackbarMessage(
         'There was an error with your authentication provider configuration.',
       );
+    } else if (authError === 'MissingSecretError') {
+      setErrorSnackbarMessage('Missing secret for authentication. Please provide a secret.');
     } else if (authError) {
       setErrorSnackbarMessage('An authentication error occurred.');
     }
@@ -48,6 +87,21 @@ export default function SignInPage() {
     setErrorSnackbarMessage('');
   }, []);
 
+  const { handleSubmit: handleCredentialsSubmit, control: credentialsFormControl } =
+    useForm<CredentialsFormInputs>({
+      defaultValues: {
+        username: '',
+        password: '',
+      },
+    });
+
+  const onCredentialsSubmit: SubmitHandler<CredentialsFormInputs> = React.useCallback(
+    (data) => {
+      handleSignIn('credentials', data, true)();
+    },
+    [handleSignIn],
+  );
+
   const productIcon = theme.palette.mode === 'dark' ? productIconDark : productIconLight;
 
   return (
@@ -66,78 +120,153 @@ export default function SignInPage() {
           You must be authenticated to use this app.
         </Typography>
         <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}
+          {isCredentialsSignIn ? (
+            <React.Fragment>
+              <Stack direction="row" alignItems="center">
+                <Button onClick={handleCredentialsBack}>
+                  <ArrowBackIcon />
+                  <Typography variant="button" sx={{ ml: 1 }}>
+                    Back
+                  </Typography>
+                </Button>
+              </Stack>
+              <form onSubmit={handleCredentialsSubmit(onCredentialsSubmit)}>
+                <Stack direction="column" gap={2}>
+                  <Controller
+                    name="username"
+                    rules={{ required: 'Username is required' }}
+                    control={credentialsFormControl}
+                    render={({ field: { onChange, value }, fieldState: { error } }) => (
+                      <TextField
+                        helperText={error ? error.message : null}
+                        error={!!error}
+                        onChange={onChange}
+                        value={value}
+                        fullWidth
+                        label="Username"
+                        variant="outlined"
+                      />
+                    )}
+                  />
+                  <Controller
+                    name="password"
+                    rules={{ required: 'Password is required' }}
+                    control={credentialsFormControl}
+                    render={({ field: { onChange, value }, fieldState: { error } }) => (
+                      <TextField
+                        type="password"
+                        helperText={error ? error.message : null}
+                        error={!!error}
+                        onChange={onChange}
+                        value={value}
+                        fullWidth
+                        label="Password"
+                        variant="outlined"
+                      />
+                    )}
+                  />
+                  <LoadingButton
+                    variant="contained"
+                    type="submit"
+                    loading={isSigningIn && latestSelectedProvider === 'credentials'}
+                    disabled={isSigningIn}
+                    size="large"
+                    fullWidth
+                  >
+                    Sign in
+                  </LoadingButton>
+                </Stack>
+              </form>
+            </React.Fragment>
+          ) : (
+            <React.Fragment>
+              {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={azureIconSvg}
+                  loading={isSigningIn && latestSelectedProvider === 'azure-ad'}
+                  disabled={isSigningIn}
+                  loadingPosition="start"
+                  size="large"
+                  fullWidth
+                  sx={{
+                    backgroundColor: '#0072c6',
+                  }}
+                >
+                  Sign in with Azure AD
+                </LoadingButton>
+              ) : null}
+              {authProviders.includes('credentials') ? (
+                <React.Fragment>
+                  {authProviders.length > 1 ? (
+                    <Divider>
+                      <Typography variant="caption">OR</Typography>
+                    </Divider>
+                  ) : null}
+                  <LoadingButton
+                    variant="contained"
+                    onClick={handleCredentialsSignIn}
+                    startIcon={<PasswordIcon />}
+                    loading={isSigningIn && latestSelectedProvider === 'credentials'}
+                    disabled={isSigningIn}
+                    loadingPosition="start"
+                    size="large"
+                    fullWidth
+                  >
+                    Sign in with credentials
+                  </LoadingButton>
+                </React.Fragment>
+              ) : null}
+            </React.Fragment>
+          )}
         </Stack>
       </Stack>
       <Snackbar

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

@@ -1477,10 +1477,9 @@ function PageNotFound() {
 interface RenderedPagesProps {
   pages: appDom.PageNode[];
   defaultPage: appDom.PageNode;
-  hasAuthentication?: boolean;
 }
 
-function RenderedPages({ pages, defaultPage, hasAuthentication = false }: RenderedPagesProps) {
+function RenderedPages({ pages, defaultPage }: RenderedPagesProps) {
   const { search } = useLocation();
 
   const defaultPageNavigation = <Navigate to={`/pages/${defaultPage.name}${search}`} replace />;
@@ -1497,7 +1496,7 @@ function RenderedPages({ pages, defaultPage, hasAuthentication = false }: Render
           />
         );
 
-        if (!IS_RENDERED_IN_CANVAS && hasAuthentication) {
+        if (!IS_RENDERED_IN_CANVAS) {
           pageContent = (
             <RequireAuthorization
               allowAll={page.attributes.authorization?.allowAll ?? true}
@@ -1597,11 +1596,7 @@ function ToolpadAppLayout({ dom, basename, clipped }: ToolpadAppLayoutProps) {
       clipped={clipped}
       basename={basename}
     >
-      <RenderedPages
-        pages={pages}
-        defaultPage={authFilteredPages[0] ?? pages[0]}
-        hasAuthentication={hasAuthentication}
-      />
+      <RenderedPages pages={pages} defaultPage={authFilteredPages[0] ?? pages[0]} />
     </AppLayout>
   );
 }
@@ -1632,7 +1627,7 @@ export default function ToolpadApp({ rootRef, basename, state }: ToolpadAppProps
     (window as any).toggleDevtools = () => toggleDevtools();
   }, [toggleDevtools]);
 
-  const authContext = useAuth({ dom, basename });
+  const authContext = useAuth({ dom, basename, isRenderedInCanvas: IS_RENDERED_IN_CANVAS });
 
   const appHost = useNonNullableContext(AppHostContext);
   const showPreviewHeader: boolean = !!appHost?.isPreview && !IS_RENDERED_IN_CANVAS;