feat(auth): support preventing users from updating their profile

test: add simple webhook flow test

packages/backend/src/db/migrations/20240822111546_add_prevent_users_from_updating_their_profiles_user_management_in_config.js

@@ -0,0 +1,12 @@
+export async function up(knex) {
+  await knex('config').insert({
+    key: 'userManagement.preventUsersFromUpdatingTheirProfile',
+    value: {
+      data: false
+    }
+  });
+};
+
+export async function down(knex) {
+  await knex('config').where({ key: 'userManagement.preventUsersFromUpdatingTheirProfile' }).delete();
+};

packages/backend/src/helpers/compute-parameters.js

@@ -2,67 +2,137 @@ import get from 'lodash.get';
 
 const variableRegExp = /({{step\.[\da-zA-Z-]+(?:\.[^.}{]+)+}})/g;
 
-export default function computeParameters(parameters, executionSteps) {
-  const entries = Object.entries(parameters);
-  return entries.reduce((result, [key, value]) => {
-    if (typeof value === 'string') {
-      const parts = value.split(variableRegExp);
+function getParameterEntries(parameters) {
+  return Object.entries(parameters);
+}
 
-      const computedValue = parts
-        .map((part) => {
-          const isVariable = part.match(variableRegExp);
-
-          if (isVariable) {
-            const stepIdAndKeyPath = part.replace(/{{step.|}}/g, '');
-            const [stepId, ...keyPaths] = stepIdAndKeyPath.split('.');
-            const keyPath = keyPaths.join('.');
-            const executionStep = executionSteps.find((executionStep) => {
-              return executionStep.stepId === stepId;
-            });
-            const data = executionStep?.dataOut;
-            const dataValue = get(data, keyPath);
-
-            // Covers both arrays and objects
-            if (typeof dataValue === 'object') {
-              return JSON.stringify(dataValue);
-            }
-
-            return dataValue;
-          }
-
-          return part;
-        }).join('');
-
-      // challenge the input to see if it is stringifies object or array
-      try {
-        const parsedValue = JSON.parse(computedValue);
-
-        if (typeof parsedValue === 'number') {
-          throw new Error('Use original unparsed value.');
-        }
-
-        return {
-          ...result,
-          [key]: parsedValue,
-        };
-      } catch (error) {
-        return {
-          ...result,
-          [key]: computedValue,
-        };
-      }
-    }
-
-    if (Array.isArray(value)) {
-      return {
-        ...result,
-        [key]: value.map((item) => computeParameters(item, executionSteps)),
-      };
-    }
+function computeParameterEntries(parameterEntries, executionSteps) {
+  const defaultComputedParameters = {};
+  return parameterEntries.reduce((result, [key, value]) => {
+    const parameterComputedValue = computeParameter(value, executionSteps);
 
     return {
       ...result,
-      [key]: value,
-    };
-  }, {});
+      [key]: parameterComputedValue,
+    }
+  }, defaultComputedParameters);
+}
+
+function computeParameter(value, executionSteps) {
+  if (typeof value === 'string') {
+    const computedStringParameter = computeStringParameter(value, executionSteps);
+    return computedStringParameter;
+  }
+
+  if (Array.isArray(value)) {
+    const computedArrayParameter = computeArrayParameter(value, executionSteps);
+    return computedArrayParameter;
+  }
+
+  return value;
+}
+
+function splitByVariable(stringValue) {
+  const parts = stringValue.split(variableRegExp);
+
+  return parts;
+}
+
+function isVariable(stringValue) {
+  return stringValue.match(variableRegExp);
+}
+
+function splitVariableByStepIdAndKeyPath(variableValue) {
+  const stepIdAndKeyPath = variableValue.replace(/{{step.|}}/g, '');
+  const [stepId, ...keyPaths] = stepIdAndKeyPath.split('.');
+  const keyPath = keyPaths.join('.');
+
+  return {
+    stepId,
+    keyPath
+  }
+}
+
+function getVariableStepId(variableValue) {
+  const { stepId } = splitVariableByStepIdAndKeyPath(variableValue);
+
+  return stepId;
+}
+
+function getVariableKeyPath(variableValue) {
+  const { keyPath } = splitVariableByStepIdAndKeyPath(variableValue);
+
+  return keyPath
+}
+
+function getVariableExecutionStep(variableValue, executionSteps) {
+  const stepId = getVariableStepId(variableValue);
+
+  const executionStep = executionSteps.find((executionStep) => {
+    return executionStep.stepId === stepId;
+  });
+
+  return executionStep;
+}
+
+function computeVariable(variable, executionSteps) {
+  const keyPath = getVariableKeyPath(variable);
+  const executionStep = getVariableExecutionStep(variable, executionSteps);
+  const data = executionStep?.dataOut;
+  const computedVariable = get(data, keyPath);
+
+  /**
+   * Inline both arrays and objects. Otherwise, variables resolving to
+   * them would be resolved as `[object Object]` or lose their shape.
+   */
+  if (typeof computedVariable === 'object') {
+    return JSON.stringify(computedVariable);
+  }
+
+  return computedVariable;
+}
+
+function autoParseComputedVariable(computedVariable) {
+  // challenge the input to see if it is stringified object or array
+  try {
+    const parsedValue = JSON.parse(computedVariable);
+
+    if (typeof parsedValue === 'number') {
+      throw new Error('Use original unparsed value.');
+    }
+
+    return parsedValue;
+  } catch (error) {
+    return computedVariable;
+  }
+}
+
+function computeStringParameter(stringValue, executionSteps) {
+  const parts = splitByVariable(stringValue);
+
+  const computedValue = parts
+    .map((part) => {
+      const variable = isVariable(part);
+
+      if (variable) {
+        return computeVariable(part, executionSteps);
+      }
+
+      return part;
+    })
+    .join('');
+
+  const autoParsedValue = autoParseComputedVariable(computedValue);
+
+  return autoParsedValue;
+}
+
+function computeArrayParameter(arrayValue, executionSteps) {
+  return arrayValue.map((item) => computeParameters(item, executionSteps));
+}
+
+export default function computeParameters(parameters, executionSteps) {
+  const parameterEntries = getParameterEntries(parameters);
+
+  return computeParameterEntries(parameterEntries, executionSteps);
 }

packages/e2e-tests/fixtures/flow-editor-page.js

@@ -1,4 +1,6 @@
 const { AuthenticatedPage } = require('./authenticated-page');
+const { expect } = require('@playwright/test');
+const axios = require('axios');
 
 export class FlowEditorPage extends AuthenticatedPage {
   screenshotPath = '/flow-editor';
@@ -9,17 +11,74 @@ export class FlowEditorPage extends AuthenticatedPage {
   constructor(page) {
     super(page);
 
+    this.page = page;
     this.appAutocomplete = this.page.getByTestId('choose-app-autocomplete');
     this.eventAutocomplete = this.page.getByTestId('choose-event-autocomplete');
     this.continueButton = this.page.getByTestId('flow-substep-continue-button');
+    this.testAndContinueButton = this.page.getByText('Test & Continue');
     this.connectionAutocomplete = this.page.getByTestId(
       'choose-connection-autocomplete'
     );
-    this.testOuput = this.page.getByTestId('flow-test-substep-output');
+    this.testOutput = this.page.getByTestId('flow-test-substep-output');
+    this.hasNoOutput = this.page.getByTestId('flow-test-substep-no-output');
     this.unpublishFlowButton = this.page.getByTestId('unpublish-flow-button');
     this.publishFlowButton = this.page.getByTestId('publish-flow-button');
     this.infoSnackbar = this.page.getByTestId('flow-cannot-edit-info-snackbar');
     this.trigger = this.page.getByLabel('Trigger on weekends?');
     this.stepCircularLoader = this.page.getByTestId('step-circular-loader');
+    this.flowName = this.page.getByTestId('editableTypography');
+    this.flowNameInput = this.page
+      .getByTestId('editableTypographyInput')
+      .locator('input');
+  }
+
+  async createWebhookTrigger(workSynchronously) {
+    await this.appAutocomplete.click();
+    await this.page.getByRole('option', { name: 'Webhook' }).click();
+
+    await expect(this.eventAutocomplete).toBeVisible();
+    await this.eventAutocomplete.click();
+    await this.page.getByRole('option', { name: 'Catch raw webhook' }).click();
+    await this.continueButton.click();
+    await this.page
+      .getByTestId('parameters.workSynchronously-autocomplete')
+      .click();
+    await this.page
+      .getByRole('option', { name: workSynchronously ? 'Yes' : 'No' })
+      .click();
+    await this.continueButton.click();
+
+    const webhookUrl = this.page.locator('input[name="webhookUrl"]');
+    if (workSynchronously) {
+      await expect(webhookUrl).toHaveValue(/sync/);
+    } else {
+      await expect(webhookUrl).not.toHaveValue(/sync/);
+    }
+
+    const triggerResponse = await axios.get(await webhookUrl.inputValue());
+    await expect(triggerResponse.status).toBe(204);
+
+    await expect(this.testOutput).not.toBeVisible();
+    await this.testAndContinueButton.click();
+    await expect(this.testOutput).toBeVisible();
+    await expect(this.hasNoOutput).not.toBeVisible();
+    await this.continueButton.click();
+
+    return await webhookUrl.inputValue();
+  }
+
+  async chooseAppAndEvent(appName, eventName) {
+    await this.appAutocomplete.click();
+    await this.page.getByRole('option', { name: appName }).click();
+    await expect(this.eventAutocomplete).toBeVisible();
+    await this.eventAutocomplete.click();
+    await this.page.getByRole('option', { name: eventName }).click();
+    await this.continueButton.click();
+  }
+
+  async testAndContinue() {
+    await this.continueButton.last().click();
+    await expect(this.testOutput).toBeVisible();
+    await this.continueButton.click();
   }
 }

packages/e2e-tests/tests/app-integrations/webhook.spec.js

@@ -0,0 +1,82 @@
+const { test, expect } = require('../../fixtures/index');
+const axios = require('axios');
+
+test.describe('Webhook flow', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.getByTestId('create-flow-button').click();
+    await page.waitForURL(
+      /\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
+    );
+    await expect(page.getByTestId('flow-step')).toHaveCount(2);
+  });
+
+  test('Create a new flow with a sync Webhook step then a Webhook step', async ({
+    flowEditorPage,
+    page,
+  }) => {
+    await flowEditorPage.flowName.click();
+    await flowEditorPage.flowNameInput.fill('syncWebhook');
+    const syncWebhookUrl = await flowEditorPage.createWebhookTrigger(true);
+
+    await flowEditorPage.chooseAppAndEvent('Webhook', 'Respond with');
+
+    await expect(flowEditorPage.continueButton.last()).not.toBeEnabled();
+
+    await page
+      .getByTestId('parameters.statusCode-power-input')
+      .locator('[contenteditable]')
+      .fill('200');
+    await flowEditorPage.clickAway();
+    await expect(flowEditorPage.continueButton.last()).not.toBeEnabled();
+
+    await page
+      .getByTestId('parameters.body-power-input')
+      .locator('[contenteditable]')
+      .fill('response from webhook');
+    await flowEditorPage.clickAway();
+    await expect(flowEditorPage.continueButton).toBeEnabled();
+    await flowEditorPage.continueButton.click();
+
+    await flowEditorPage.testAndContinue();
+    await flowEditorPage.publishFlowButton.click();
+
+    const response = await axios.get(syncWebhookUrl);
+    await expect(response.status).toBe(200);
+    await expect(response.data).toBe('response from webhook');
+  });
+
+  test('Create a new flow with an async Webhook step then a Webhook step', async ({
+    flowEditorPage,
+    page,
+  }) => {
+    await flowEditorPage.flowName.click();
+    await flowEditorPage.flowNameInput.fill('asyncWebhook');
+    const asyncWebhookUrl = await flowEditorPage.createWebhookTrigger(false);
+
+    await flowEditorPage.chooseAppAndEvent('Webhook', 'Respond with');
+
+    await expect(flowEditorPage.continueButton.last()).not.toBeEnabled();
+
+    await page
+      .getByTestId('parameters.statusCode-power-input')
+      .locator('[contenteditable]')
+      .fill('200');
+    await flowEditorPage.clickAway();
+    await expect(flowEditorPage.continueButton.last()).not.toBeEnabled();
+
+    await page
+      .getByTestId('parameters.body-power-input')
+      .locator('[contenteditable]')
+      .fill('response from webhook');
+    await flowEditorPage.clickAway();
+    await expect(flowEditorPage.continueButton).toBeEnabled();
+    await flowEditorPage.continueButton.click();
+
+    await flowEditorPage.testAndContinue();
+    await flowEditorPage.publishFlowButton.click();
+
+    const response = await axios.get(asyncWebhookUrl);
+    await expect(response.status).toBe(204);
+    await expect(response.data).toBe('');
+  });
+});

packages/e2e-tests/tests/flow-editor/create-flow.spec.js

@@ -2,7 +2,6 @@ const { test, expect } = require('../../fixtures/index');
 
 test('Ensure creating a new flow works', async ({ page }) => {
   await page.getByTestId('create-flow-button').click();
-  await expect(page).toHaveURL(/\/editor\/create/);
   await expect(page).toHaveURL(
     /\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
   );
@@ -69,9 +68,9 @@ test(
 
       await test.step('test trigger', async () => {
         await test.step('show sample output', async () => {
-          await expect(flowEditorPage.testOuput).not.toBeVisible();
+          await expect(flowEditorPage.testOutput).not.toBeVisible();
           await flowEditorPage.continueButton.click();
-          await expect(flowEditorPage.testOuput).toBeVisible();
+          await expect(flowEditorPage.testOutput).toBeVisible();
           await flowEditorPage.screenshot({
             path: 'Scheduler trigger test output.png',
           });
@@ -143,12 +142,12 @@ test(
     
       await test.step('test trigger substep', async () => {
         await test.step('show sample output', async () => {
-          await expect(flowEditorPage.testOuput).not.toBeVisible();
+          await expect(flowEditorPage.testOutput).not.toBeVisible();
           await page
             .getByTestId('flow-substep-continue-button')
             .first()
             .click();
-          await expect(flowEditorPage.testOuput).toBeVisible();
+          await expect(flowEditorPage.testOutput).toBeVisible();
           await flowEditorPage.screenshot({
             path: 'Ntfy action test output.png',
           });

packages/web/src/components/AddAppConnection/index.jsx

@@ -7,6 +7,7 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import * as React from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { AppPropType } from 'propTypes/propTypes';
 import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
@@ -17,7 +18,6 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import { generateExternalLink } from 'helpers/translationValues';
 import { Form } from './style';
 import useAppAuth from 'hooks/useAppAuth';
-import { useQueryClient } from '@tanstack/react-query';
 
 function AddAppConnection(props) {
   const { application, connectionId, onClose } = props;

packages/web/src/components/EditableTypography/index.jsx

@@ -41,6 +41,7 @@ function EditableTypography(props) {
   if (editing) {
     component = (
       <TextField
+        data-test="editableTypographyInput"
         onClick={handleTextFieldClick}
         onKeyDown={handleTextFieldKeyDown}
         onBlur={handleTextFieldBlur}

packages/web/src/components/EditorLayout/index.jsx

@@ -101,6 +101,7 @@ export default function EditorLayout() {
 
           {!isFlowLoading && (
             <EditableTypography
+              data-test="editableTypography"
               variant="body1"
               onConfirm={onFlowNameUpdate}
               noWrap

packages/web/src/components/LoginForm/index.jsx

@@ -12,6 +12,7 @@ import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCreateAccessToken from 'hooks/useCreateAccessToken';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import usePreventUsersFromUpdatingTheirProfile from 'hooks/usePreventUsersFromUpdatingTheirProfile';
 
 function LoginForm() {
   const isCloud = useCloud();
@@ -19,6 +20,7 @@ function LoginForm() {
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
   const authentication = useAuthentication();
+  const preventUsersFromUpdatingTheirProfile = usePreventUsersFromUpdatingTheirProfile();
   const { mutateAsync: createAccessToken, isPending: loading } =
     useCreateAccessToken();
 
@@ -84,7 +86,7 @@ function LoginForm() {
           sx={{ mb: 1 }}
         />
 
-        {isCloud && (
+        {isCloud && !preventUsersFromUpdatingTheirProfile && (
           <Link
             component={RouterLink}
             to={URLS.FORGOT_PASSWORD}

packages/web/src/components/PowerInput/data.js

@@ -25,25 +25,40 @@ const process = ({ data, parentKey, index, parentLabel = '' }) => {
         sampleValue: JSON.stringify(sampleValue),
       };
 
-      const arrayItems =  sampleValue.flatMap((item, index) =>
-        process({
+      const arrayItems = sampleValue.flatMap((item, index) => {
+        const itemItself = {
+          label: `${label}.${index}`,
+          value: `${value}.${index}`,
+          sampleValue: JSON.stringify(item),
+        };
+
+        const itemEntries = process({
           data: item,
           parentKey: value,
           index,
           parentLabel: label,
-        }),
-      );
+        });
 
-      // TODO: remove spreading
-      return [arrayItself, ...arrayItems];
+        return [itemItself].concat(itemEntries);
+      });
+
+      return [arrayItself].concat(arrayItems);
     }
 
     if (typeof sampleValue === 'object' && sampleValue !== null) {
-      return process({
+      const objectItself = {
+        label,
+        value,
+        sampleValue: JSON.stringify(sampleValue),
+      };
+
+      const objectEntries = process({
         data: sampleValue,
         parentKey: value,
         parentLabel: label,
       });
+
+      return [objectItself].concat(objectEntries);
     }
 
     return [

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

@@ -40,6 +40,10 @@ function Switch(props) {
         <FormControlLabel
           className={className}
           {...FormControlLabelProps}
+          componentsProps={{
+            typography: {
+              display: 'flex',
+          }}}
           control={
             <MuiSwitch
               {...switchProps}

packages/web/src/components/TestSubstep/index.jsx

@@ -118,7 +118,7 @@ function TestSubstep(props) {
           )}
 
           {hasNoOutput && (
-            <Alert severity="warning" sx={{ mb: 1, width: '100%' }}>
+            <Alert data-test="flow-test-substep-no-output" severity="warning" sx={{ mb: 1, width: '100%' }}>
               <AlertTitle sx={{ fontWeight: 700 }}>
                 {formatMessage('flowEditor.noTestDataTitle')}
               </AlertTitle>

packages/web/src/hooks/usePreventUsersFromUpdatingTheirProfile.js

@@ -0,0 +1,13 @@
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
+
+export default function usePreventUsersFromUpdatingTheirProfile() {
+  const { data, isSuccess } =
+    useAutomatischConfig();
+  const automatischConfig = data?.data;
+
+  const preventUsersFromUpdatingTheirProfile = isSuccess ? automatischConfig['userManagement.preventUsersFromUpdatingTheirProfile'] : false;
+
+  console.log('preventUsersFromUpdatingTheirProfile', preventUsersFromUpdatingTheirProfile, automatischConfig)
+
+  return preventUsersFromUpdatingTheirProfile;
+}

packages/web/src/locales/en.json

@@ -259,20 +259,26 @@
   "userInterfacePage.primaryLightColorFieldLabel": "Primary light color",
   "userInterfacePage.svgDataFieldLabel": "Logo SVG code",
   "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",
+  "authenticationPage.title": "Authentication",
+  "authenticationConfig.title": "User management",
+  "authenticationConfig.userManagementPreventUsersFromUpdatingTheirProfile": "Prevent users from updating their profile",
+  "authenticationConfig.userManagementPreventUsersFromUpdatingTheirProfileTooltip": "This will prevent users from updating their full name, email and password. This is useful when you want to manage users from your own identity provider.",
+  "authenticationConfig.save": "Save",
+  "authenticationConfig.successfullySaved": "The configuration has been saved.",
+  "samlAuthenticationPage.title": "Single Sign-On with SAML",
+  "samlAuthenticationForm.active": "Active",
+  "samlAuthenticationForm.name": "Name",
+  "samlAuthenticationForm.certificate": "Certificate",
+  "samlAuthenticationForm.signatureAlgorithm": "Signature algorithm",
+  "samlAuthenticationForm.issuer": "Issuer",
+  "samlAuthenticationForm.entryPoint": "Entry point",
+  "samlAuthenticationForm.firstnameAttributeName": "Firstname attribute name",
+  "samlAuthenticationForm.surnameAttributeName": "Surname attribute name",
+  "samlAuthenticationForm.emailAttributeName": "Email attribute name",
+  "samlAuthenticationForm.roleAttributeName": "Role attribute name",
+  "samlAuthenticationForm.defaultRole": "Default role",
+  "samlAuthenticationForm.successfullySaved": "The provider has been saved.",
+  "samlAuthenticationForm.save": "Save",
   "roleMappingsForm.title": "Role mappings",
   "roleMappingsForm.remoteRoleName": "Remote role name",
   "roleMappingsForm.role": "Role",

packages/web/src/pages/Authentication/AuthenticationConfig.jsx

@@ -0,0 +1,98 @@
+import { useMutation } from '@apollo/client';
+import LoadingButton from '@mui/lab/LoadingButton';
+import Stack from '@mui/material/Stack';
+import Switch from 'components/Switch';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+
+import Form from 'components/Form';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
+import { UPDATE_CONFIG } from 'graphql/mutations/update-config.ee';
+import { useQueryClient } from '@tanstack/react-query';
+
+function AuthenticationConfig() {
+  const formatMessage = useFormatMessage();
+  const enqueueSnackbar = useEnqueueSnackbar();
+  const queryClient = useQueryClient();
+  const { data, isLoading: isAutomatischConfigLoading } =
+    useAutomatischConfig();
+  const automatischConfig = data?.data;
+
+  const [
+    updateConfig,
+    { loading: updateConfigLoading },
+  ] = useMutation(UPDATE_CONFIG);
+
+  const handleSubmit = async (values) => {
+    try {
+      await updateConfig({
+        variables: {
+          input: {
+            'userManagement.preventUsersFromUpdatingTheirProfile': values.userManagement.preventUsersFromUpdatingTheirProfile,
+          },
+        },
+      });
+
+      await queryClient.invalidateQueries({
+        queryKey: ['automatisch', 'config'],
+      });
+
+      enqueueSnackbar(formatMessage('authenticationConfig.successfullySaved'), {
+        variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-update-role-mappings-success',
+        },
+      });
+    } catch (error) {
+      throw new Error('Failed while saving!');
+    }
+  };
+
+  if (isAutomatischConfigLoading) {
+    return null;
+  }
+
+  return (
+    <>
+      <Typography variant="h4">
+        {formatMessage('authenticationConfig.title')}
+      </Typography>
+
+      <Form defaultValues={automatischConfig} onSubmit={handleSubmit}>
+        <Stack direction="column" spacing={2}>
+          <Switch
+            name="userManagement.preventUsersFromUpdatingTheirProfile"
+            label={<>
+              {formatMessage('authenticationConfig.userManagementPreventUsersFromUpdatingTheirProfile')}
+
+              <Tooltip
+                title={formatMessage('authenticationConfig.userManagementPreventUsersFromUpdatingTheirProfileTooltip')}
+                sx={{ ml: 1 }}
+              >
+                <InfoOutlinedIcon />
+              </Tooltip>
+            </>}
+          />
+
+          <LoadingButton
+            type="submit"
+            variant="contained"
+            color="primary"
+            sx={{ boxShadow: 2 }}
+            loading={updateConfigLoading}
+          >
+            {formatMessage('authenticationConfig.save')}
+          </LoadingButton>
+        </Stack>
+      </Form>
+    </>
+  );
+}
+
+AuthenticationConfig.propTypes = {
+};
+
+export default AuthenticationConfig;

packages/web/src/pages/Authentication/RoleMappings.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import { useMutation } from '@apollo/client';
 import LoadingButton from '@mui/lab/LoadingButton';
-import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
@@ -85,7 +84,6 @@ function RoleMappings({ provider, providerLoading }) {
 
   return (
     <>
-      <Divider sx={{ pt: 2 }} />
       <Typography variant="h3">
         {formatMessage('roleMappingsForm.title')}
       </Typography>

packages/web/src/pages/Authentication/SamlConfiguration.jsx

@@ -75,7 +75,7 @@ function SamlConfiguration({ provider, providerLoading }) {
         },
       });
 
-      enqueueSnackbar(formatMessage('authenticationForm.successfullySaved'), {
+      enqueueSnackbar(formatMessage('samlAuthenticationForm.successfullySaved'), {
         variant: 'success',
         SnackbarProps: {
           'data-test': 'snackbar-save-saml-provider-success',
@@ -98,18 +98,18 @@ function SamlConfiguration({ provider, providerLoading }) {
       <Stack direction="column" gap={2}>
         <Switch
           name="active"
-          label={formatMessage('authenticationForm.active')}
+          label={formatMessage('samlAuthenticationForm.active')}
         />
         <TextField
           required={true}
           name="name"
-          label={formatMessage('authenticationForm.name')}
+          label={formatMessage('samlAuthenticationForm.name')}
           fullWidth
         />
         <TextField
           required={true}
           name="certificate"
-          label={formatMessage('authenticationForm.certificate')}
+          label={formatMessage('samlAuthenticationForm.certificate')}
           fullWidth
           multiline
         />
@@ -126,44 +126,44 @@ function SamlConfiguration({ provider, providerLoading }) {
           renderInput={(params) => (
             <MuiTextField
               {...params}
-              label={formatMessage('authenticationForm.signatureAlgorithm')}
+              label={formatMessage('samlAuthenticationForm.signatureAlgorithm')}
             />
           )}
         />
         <TextField
           required={true}
           name="issuer"
-          label={formatMessage('authenticationForm.issuer')}
+          label={formatMessage('samlAuthenticationForm.issuer')}
           fullWidth
         />
         <TextField
           required={true}
           name="entryPoint"
-          label={formatMessage('authenticationForm.entryPoint')}
+          label={formatMessage('samlAuthenticationForm.entryPoint')}
           fullWidth
         />
         <TextField
           required={true}
           name="firstnameAttributeName"
-          label={formatMessage('authenticationForm.firstnameAttributeName')}
+          label={formatMessage('samlAuthenticationForm.firstnameAttributeName')}
           fullWidth
         />
         <TextField
           required={true}
           name="surnameAttributeName"
-          label={formatMessage('authenticationForm.surnameAttributeName')}
+          label={formatMessage('samlAuthenticationForm.surnameAttributeName')}
           fullWidth
         />
         <TextField
           required={true}
           name="emailAttributeName"
-          label={formatMessage('authenticationForm.emailAttributeName')}
+          label={formatMessage('samlAuthenticationForm.emailAttributeName')}
           fullWidth
         />
         <TextField
           required={true}
           name="roleAttributeName"
-          label={formatMessage('authenticationForm.roleAttributeName')}
+          label={formatMessage('samlAuthenticationForm.roleAttributeName')}
           fullWidth
         />
         <ControlledAutocomplete
@@ -175,7 +175,7 @@ function SamlConfiguration({ provider, providerLoading }) {
           renderInput={(params) => (
             <MuiTextField
               {...params}
-              label={formatMessage('authenticationForm.defaultRole')}
+              label={formatMessage('samlAuthenticationForm.defaultRole')}
             />
           )}
           loading={isRolesLoading}
@@ -187,7 +187,7 @@ function SamlConfiguration({ provider, providerLoading }) {
           sx={{ boxShadow: 2 }}
           loading={loading}
         >
-          {formatMessage('authenticationForm.save')}
+          {formatMessage('samlAuthenticationForm.save')}
         </LoadingButton>
       </Stack>
     </Form>

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

@@ -2,11 +2,14 @@ import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
+import Divider from '@mui/material/Divider';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useSamlAuthProvider from 'hooks/useSamlAuthProvider';
+import AuthenticationConfig from './AuthenticationConfig';
 import SamlConfiguration from './SamlConfiguration';
 import RoleMappings from './RoleMappings';
 import useAdminSamlAuthProviders from 'hooks/useAdminSamlAuthProviders.ee';
+
 function AuthenticationPage() {
   const formatMessage = useFormatMessage();
 
@@ -16,20 +19,37 @@ function AuthenticationPage() {
   const { data, isLoading: isProviderLoading } = useSamlAuthProvider({
     samlAuthProviderId,
   });
+
   const provider = data?.data;
 
   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] }}>
+        <Grid container item xs={12}>
           <PageTitle>{formatMessage('authenticationPage.title')}</PageTitle>
         </Grid>
+
+        <Grid item xs={12} sx={{ pt: 5, pb: 5 }}>
+          <Stack spacing={5}>
+            <AuthenticationConfig />
+
+            <Divider />
+          </Stack>
+        </Grid>
+
+        <Grid container item xs={12}>
+          <PageTitle variant="h4">{formatMessage('samlAuthenticationPage.title')}</PageTitle>
+        </Grid>
+
         <Grid item xs={12} sx={{ pt: 5, pb: 5 }}>
           <Stack spacing={5}>
             <SamlConfiguration
               provider={provider}
               providerLoading={isProviderLoading}
             />
+
+            <Divider />
+
             <RoleMappings
               provider={provider}
               providerLoading={isProviderLoading}

packages/web/src/pages/Login/index.jsx

@@ -10,6 +10,7 @@ export default function Login() {
       <Container maxWidth="sm">
         <Stack direction="column" gap={2}>
           <LoginForm />
+
           <SsoProviders />
         </Stack>
       </Container>

packages/web/src/routes.jsx

@@ -29,12 +29,14 @@ import adminSettingsRoutes from './adminSettingsRoutes';
 import Notifications from 'pages/Notifications';
 import useAutomatischConfig from 'hooks/useAutomatischConfig';
 import useAuthentication from 'hooks/useAuthentication';
+import usePreventUsersFromUpdatingTheirProfile from 'hooks/usePreventUsersFromUpdatingTheirProfile';
 import useAutomatischInfo from 'hooks/useAutomatischInfo';
 import Installation from 'pages/Installation';
 
 function Routes() {
   const { data: automatischInfo, isSuccess } = useAutomatischInfo();
   const { data: configData } = useAutomatischConfig();
+  const preventUsersFromUpdatingTheirProfile = usePreventUsersFromUpdatingTheirProfile();
   const { isAuthenticated } = useAuthentication();
   const config = configData?.data;
 
@@ -134,14 +136,14 @@ function Routes() {
         }
       />
 
-      <Route
+      {preventUsersFromUpdatingTheirProfile === false && <Route
         path={URLS.FORGOT_PASSWORD}
         element={
           <PublicLayout>
             <ForgotPassword />
           </PublicLayout>
         }
-      />
+      />}
 
       <Route
         path={URLS.RESET_PASSWORD}

packages/web/src/styles/theme.js

@@ -95,11 +95,11 @@ export const defaultTheme = createTheme({
       },
     },
     h4: {
-      fontSize: referenceTheme.typography.pxToRem(32),
+      fontSize: referenceTheme.typography.pxToRem(28),
       lineHeight: 1.3,
       fontWeight: 700,
       [referenceTheme.breakpoints.down('sm')]: {
-        fontSize: referenceTheme.typography.pxToRem(16),
+        fontSize: referenceTheme.typography.pxToRem(22),
       },
     },
     h5: {