feat: introduce authentication page (#1241)

* feat: introduce authentication page

* feat: update page width

* fix(saml): cover non-existing role mapping on onboarding

---------

Co-authored-by: Ali BARIN <ali.barin53@gmail.com>

packages/backend/src/graphql/schema.graphql

@@ -330,6 +330,7 @@ type SamlAuthProvider {
   emailAttributeName: String
   roleAttributeName: String
   active: Boolean
+  defaultRoleId: String
 }
 
 type SamlAuthProvidersRoleMapping {

packages/backend/src/helpers/find-or-create-user-by-saml-identity.ee.ts

@@ -48,7 +48,7 @@ const findOrCreateUserBySamlIdentity = async (
           .join(' '),
         email: mappedUser.email as string,
         roleId:
-          samlAuthProviderRoleMapping.roleId || samlAuthProvider.defaultRoleId,
+          samlAuthProviderRoleMapping?.roleId || samlAuthProvider.defaultRoleId,
         identities: [
           {
             remoteId: mappedUser.id as string,

packages/types/index.d.ts

@@ -119,8 +119,8 @@ export interface IPermission {
 
 export interface IPermissionCatalog {
   actions: { label: string; key: string; subjects: string[] }[];
-  subjects: { label: string; key: string; }[];
+  subjects: { label: string; key: string }[];
-  conditions: { label: string; key: string; }[];
+  conditions: { label: string; key: string }[];
 }
 
 export interface IFieldDropdown {
@@ -418,7 +418,7 @@ type TSamlAuthProvider = {
   id: string;
   name: string;
   certificate: string;
-  signatureAlgorithm: "sha1" | "sha256" | "sha512";
+  signatureAlgorithm: 'sha1' | 'sha256' | 'sha512';
   issuer: string;
   entryPoint: string;
   firstnameAttributeName: string;
@@ -426,7 +426,8 @@ type TSamlAuthProvider = {
   emailAttributeName: string;
   roleAttributeName: string;
   defaultRoleId: string;
-}
+  active: boolean;
+};
 
 type AppConfig = {
   id: string;

packages/web/src/adminSettingsRoutes.tsx

@@ -6,6 +6,7 @@ import CreateUser from 'pages/CreateUser';
 import Roles from 'pages/Roles/index.ee';
 import CreateRole from 'pages/CreateRole/index.ee';
 import EditRole from 'pages/EditRole/index.ee';
+import Authentication from 'pages/Authentication';
 import UserInterface from 'pages/UserInterface';
 
 import * as URLS from 'config/urls';
@@ -91,6 +92,21 @@ export default (
       }
     />
 
+    <Route
+      path={URLS.AUTHENTICATION}
+      element={
+        <Can I="read" a="SamlAuthProvider">
+          <Can I="update" a="SamlAuthProvider">
+            <Can I="create" a="SamlAuthProvider">
+              <AdminSettingsLayout>
+                <Authentication />
+              </AdminSettingsLayout>
+            </Can>
+          </Can>
+        </Can>
+      }
+    />
+
     <Route
       path={URLS.ADMIN_SETTINGS}
       element={<Navigate to={URLS.USERS} replace />}

packages/web/src/components/AdminSettingsLayout/index.tsx

@@ -1,6 +1,7 @@
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import GroupIcon from '@mui/icons-material/Group';
 import GroupsIcon from '@mui/icons-material/Groups';
+import LockIcon from '@mui/icons-material/LockPerson';
 import BrushIcon from '@mui/icons-material/Brush';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -28,10 +29,12 @@ function createDrawerLinks({
   canReadRole,
   canReadUser,
   canUpdateConfig,
+  canManageSamlAuthProvider,
 }: {
   canReadRole: boolean;
   canReadUser: boolean;
   canUpdateConfig: boolean;
+  canManageSamlAuthProvider: boolean;
 }) {
   const items = [
     canReadUser
@@ -55,6 +58,13 @@ function createDrawerLinks({
           to: URLS.USER_INTERFACE,
         }
       : null,
+    canManageSamlAuthProvider
+      ? {
+          Icon: LockIcon,
+          primary: 'adminSettingsDrawer.authentication',
+          to: URLS.AUTHENTICATION,
+        }
+      : null,
   ].filter(Boolean) as DrawerLink[];
 
   return items;
@@ -82,6 +92,10 @@ export default function SettingsLayout({
     canReadUser: currentUserAbility.can('read', 'User'),
     canReadRole: currentUserAbility.can('read', 'Role'),
     canUpdateConfig: currentUserAbility.can('update', 'Config'),
+    canManageSamlAuthProvider:
+      currentUserAbility.can('read', 'SamlAuthProvider') &&
+      currentUserAbility.can('update', 'SamlAuthProvider') &&
+      currentUserAbility.can('create', 'SamlAuthProvider'),
   });
 
   return (

packages/web/src/components/SsoProviders/index.ee.tsx

@@ -28,7 +28,7 @@ function SsoProviders() {
               variant="outlined"
             >
               {formatMessage('ssoProviders.loginWithProvider', {
-                providerName: provider.name
+                providerName: provider.name,
               })}
             </Button>
           ))}

packages/web/src/components/Switch/index.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import FormControlLabel, {
+  FormControlLabelProps,
+} from '@mui/material/FormControlLabel';
+import MuiSwitch, { SwitchProps as MuiSwitchProps } from '@mui/material/Switch';
+
+type SwitchProps = {
+  name: string;
+  label: string;
+  shouldUnregister?: boolean;
+  FormControlLabelProps?: Partial<FormControlLabelProps>;
+} & MuiSwitchProps;
+
+export default function Switch(props: SwitchProps): React.ReactElement {
+  const { control } = useFormContext();
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const {
+    required,
+    name,
+    defaultChecked = false,
+    shouldUnregister = false,
+    disabled = false,
+    onBlur,
+    onChange,
+    label,
+    FormControlLabelProps,
+    ...switchProps
+  } = props;
+
+  return (
+    <Controller
+      rules={{ required }}
+      name={name}
+      defaultValue={defaultChecked}
+      control={control}
+      shouldUnregister={shouldUnregister}
+      render={({
+        field: {
+          ref,
+          onChange: controllerOnChange,
+          onBlur: controllerOnBlur,
+          value,
+          ...field
+        },
+      }) => (
+        <FormControlLabel
+          {...FormControlLabelProps}
+          control={
+            <MuiSwitch
+              {...switchProps}
+              {...field}
+              checked={value}
+              disabled={disabled}
+              onChange={(...args) => {
+                controllerOnChange(...args);
+                onChange?.(...args);
+              }}
+              onBlur={(...args) => {
+                controllerOnBlur();
+                onBlur?.(...args);
+              }}
+              inputRef={(element) => {
+                inputRef.current = element;
+                ref(element);
+              }}
+            />
+          }
+          label={label}
+        />
+      )}
+    />
+  );
+}

packages/web/src/components/TextField/index.tsx

@@ -67,6 +67,7 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
         <MuiTextField
           {...textFieldProps}
           {...field}
+          required={required}
           disabled={disabled}
           onChange={(...args) => {
             controllerOnChange(...args);

packages/web/src/config/urls.ts

@@ -98,6 +98,7 @@ export const ROLE = (roleId: string) => `${ROLES}/${roleId}`;
 export const ROLE_PATTERN = `${ROLES}/:roleId`;
 export const CREATE_ROLE = `${ROLES}/create`;
 export const USER_INTERFACE = `${ADMIN_SETTINGS}/user-interface`;
+export const AUTHENTICATION = `${ADMIN_SETTINGS}/authentication`;
 
 export const DASHBOARD = FLOWS;
 

packages/web/src/graphql/mutations/upsert-saml-auth-provider.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const UPSERT_SAML_AUTH_PROVIDER = gql`
+  mutation UpsertSamlAuthProvider($input: UpsertSamlAuthProviderInput) {
+    upsertSamlAuthProvider(input: $input) {
+      id
+    }
+  }
+`;

packages/web/src/graphql/queries/get-saml-auth-provider.ts

@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client';
+
+export const GET_SAML_AUTH_PROVIDER = gql`
+  query GetSamlAuthProvider {
+    getSamlAuthProvider {
+      name
+      certificate
+      signatureAlgorithm
+      issuer
+      entryPoint
+      firstnameAttributeName
+      surnameAttributeName
+      emailAttributeName
+      roleAttributeName
+      active
+      defaultRoleId
+    }
+  }
+`;

packages/web/src/hooks/useSamlAuthProvider.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@apollo/client';
+
+import { TSamlAuthProvider } from '@automatisch/types';
+import { GET_SAML_AUTH_PROVIDER } from 'graphql/queries/get-saml-auth-provider';
+
+type UseSamlAuthProviderReturn = {
+  provider: TSamlAuthProvider;
+  loading: boolean;
+};
+
+export default function useSamlAuthProvider(): UseSamlAuthProviderReturn {
+  const { data, loading } = useQuery(GET_SAML_AUTH_PROVIDER, {
+    context: { autoSnackbar: false },
+  });
+
+  return {
+    provider: data?.getSamlAuthProvider,
+    loading,
+  };
+}

packages/web/src/locales/en.json

@@ -15,6 +15,7 @@
   "settingsDrawer.billingAndUsage": "Billing and usage",
   "adminSettingsDrawer.users": "Users",
   "adminSettingsDrawer.roles": "Roles",
+  "adminSettingsDrawer.authentication": "Authentication",
   "adminSettingsDrawer.userInterface": "User Interface",
   "adminSettingsDrawer.goBack": "Go to the dashboard",
   "app.connectionCount": "{count} connections",
@@ -223,5 +224,19 @@
   "userInterfacePage.darkColor": "Primary dark color",
   "userInterfacePage.lightColor": "Primary light color",
   "userInterfacePage.svgData": "Logo SVG code",
-  "userInterfacePage.submit": "Update"
+  "userInterfacePage.submit": "Update",
+  "authenticationPage.title": "Single Sign-On with SAML",
+  "authenticationForm.active": "Active",
+  "authenticationForm.name": "Name",
+  "authenticationForm.certificate": "Certificate",
+  "authenticationForm.signatureAlgorithm": "Signature algorithm",
+  "authenticationForm.issuer": "Issuer",
+  "authenticationForm.entryPoint": "Entry point",
+  "authenticationForm.firstnameAttributeName": "Firstname attribute name",
+  "authenticationForm.surnameAttributeName": "Surname attribute name",
+  "authenticationForm.emailAttributeName": "Email attribute name",
+  "authenticationForm.roleAttributeName": "Role attribute name",
+  "authenticationForm.defaultRole": "Default role",
+  "authenticationForm.successfullySaved": "The provider has been saved.",
+  "authenticationForm.save": "Save"
 }

packages/web/src/pages/Authentication/index.tsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import MuiTextField from '@mui/material/TextField';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { IRole } from '@automatisch/types';
+import { useSnackbar } from 'notistack';
+import { TSamlAuthProvider } from '@automatisch/types';
+import { useMutation } from '@apollo/client';
+
+import PageTitle from 'components/PageTitle';
+import Container from 'components/Container';
+import Form from 'components/Form';
+import TextField from 'components/TextField';
+import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import Switch from 'components/Switch';
+
+import { UPSERT_SAML_AUTH_PROVIDER } from 'graphql/mutations/upsert-saml-auth-provider';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useRoles from 'hooks/useRoles.ee';
+import useSamlAuthProvider from 'hooks/useSamlAuthProvider';
+
+const defaultValues = {
+  active: false,
+  name: '',
+  certificate: '',
+  signatureAlgorithm: 'sha1',
+  issuer: '',
+  entryPoint: '',
+  firstnameAttributeName: '',
+  surnameAttributeName: '',
+  emailAttributeName: '',
+  roleAttributeName: '',
+  defaultRoleId: '',
+};
+
+function generateRoleOptions(roles: IRole[]) {
+  return roles?.map(({ name: label, id: value }) => ({ label, value }));
+}
+
+function AuthenticationPage() {
+  const formatMessage = useFormatMessage();
+  const { roles, loading: rolesLoading } = useRoles();
+  const { provider, loading: providerLoading } = useSamlAuthProvider();
+  const { enqueueSnackbar } = useSnackbar();
+  const [upsertSamlAuthProvider, { loading }] = useMutation(
+    UPSERT_SAML_AUTH_PROVIDER
+  );
+
+  const handleProviderUpdate = async (
+    providerDataToUpdate: Partial<TSamlAuthProvider>
+  ) => {
+    try {
+      const {
+        name,
+        certificate,
+        signatureAlgorithm,
+        issuer,
+        entryPoint,
+        firstnameAttributeName,
+        surnameAttributeName,
+        emailAttributeName,
+        roleAttributeName,
+        active,
+        defaultRoleId,
+      } = providerDataToUpdate;
+
+      await upsertSamlAuthProvider({
+        variables: {
+          input: {
+            name,
+            certificate,
+            signatureAlgorithm,
+            issuer,
+            entryPoint,
+            firstnameAttributeName,
+            surnameAttributeName,
+            emailAttributeName,
+            roleAttributeName,
+            active,
+            defaultRoleId,
+          },
+        },
+      });
+
+      enqueueSnackbar(formatMessage('authenticationForm.successfullySaved'), {
+        variant: 'success',
+      });
+    } catch (error) {
+      throw new Error('Failed while saving!');
+    }
+  };
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={10} md={9}>
+        <Grid container item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('authenticationPage.title')}</PageTitle>
+        </Grid>
+        <Grid item xs={12} sx={{ pt: 5, pb: 5 }}>
+          {!providerLoading && (
+            <Form
+              defaultValues={provider || defaultValues}
+              onSubmit={handleProviderUpdate}
+            >
+              <Stack direction="column" gap={2}>
+                <Switch
+                  name="active"
+                  label={formatMessage('authenticationForm.active')}
+                />
+                <TextField
+                  required={true}
+                  name="name"
+                  label={formatMessage('authenticationForm.name')}
+                  fullWidth
+                />
+                <TextField
+                  required={true}
+                  name="certificate"
+                  label={formatMessage('authenticationForm.certificate')}
+                  fullWidth
+                  multiline
+                />
+                <ControlledAutocomplete
+                  name="signatureAlgorithm"
+                  fullWidth
+                  disablePortal
+                  disableClearable={true}
+                  options={[
+                    { label: 'SHA1', value: 'sha1' },
+                    { label: 'SHA256', value: 'sha256' },
+                    { label: 'SHA512', value: 'sha512' },
+                  ]}
+                  renderInput={(params) => (
+                    <MuiTextField
+                      {...params}
+                      label={formatMessage(
+                        'authenticationForm.signatureAlgorithm'
+                      )}
+                    />
+                  )}
+                />
+                <TextField
+                  required={true}
+                  name="issuer"
+                  label={formatMessage('authenticationForm.issuer')}
+                  fullWidth
+                />
+                <TextField
+                  required={true}
+                  name="entryPoint"
+                  label={formatMessage('authenticationForm.entryPoint')}
+                  fullWidth
+                />
+                <TextField
+                  required={true}
+                  name="firstnameAttributeName"
+                  label={formatMessage(
+                    'authenticationForm.firstnameAttributeName'
+                  )}
+                  fullWidth
+                />
+                <TextField
+                  required={true}
+                  name="surnameAttributeName"
+                  label={formatMessage(
+                    'authenticationForm.surnameAttributeName'
+                  )}
+                  fullWidth
+                />
+                <TextField
+                  required={true}
+                  name="emailAttributeName"
+                  label={formatMessage('authenticationForm.emailAttributeName')}
+                  fullWidth
+                />
+                <TextField
+                  required={true}
+                  name="roleAttributeName"
+                  label={formatMessage('authenticationForm.roleAttributeName')}
+                  fullWidth
+                />
+                <ControlledAutocomplete
+                  name="defaultRoleId"
+                  fullWidth
+                  disablePortal
+                  disableClearable={true}
+                  options={generateRoleOptions(roles)}
+                  renderInput={(params) => (
+                    <MuiTextField
+                      {...params}
+                      label={formatMessage('authenticationForm.defaultRole')}
+                    />
+                  )}
+                  loading={rolesLoading}
+                />
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  sx={{ boxShadow: 2 }}
+                  loading={loading}
+                >
+                  {formatMessage('authenticationForm.save')}
+                </LoadingButton>
+              </Stack>
+            </Form>
+          )}
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default AuthenticationPage;