diff --git a/app/src/pages/login.tsx b/app/src/pages/login.tsx
index 18609ad..0b713de 100644
--- a/app/src/pages/login.tsx
+++ b/app/src/pages/login.tsx
@@ -60,10 +60,12 @@ export default function Login({ urlProps }: { urlProps: Record<string, any> }) {
 			{view === VIEW_TYPES.FORGOT_PASSWORD && (
 				<Fragment>
 					<h1 style={{ textAlign: 'center' }}>Forgot Password</h1>
-					<AuthorizerForgotPassword urlProps={{
-						...urlProps,
-						redirect_uri: `${window.location.origin}/app/reset-password`,
-					}} />
+					<AuthorizerForgotPassword
+						urlProps={{
+							...urlProps,
+							redirect_uri: `${window.location.origin}/app/reset-password`,
+						}}
+					/>
 					<Footer>
 						<Link
 							to="#"
diff --git a/dashboard/src/components/EditUserModal.tsx b/dashboard/src/components/EditUserModal.tsx
index e1a3e0f..fc4db15 100644
--- a/dashboard/src/components/EditUserModal.tsx
+++ b/dashboard/src/components/EditUserModal.tsx
@@ -1,263 +1,263 @@
 import React, { useState } from 'react';
 import {
-  Button,
-  Center,
-  Flex,
-  MenuItem,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Stack,
-  useDisclosure,
-  Text,
-  useToast,
+	Button,
+	Center,
+	Flex,
+	MenuItem,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	Stack,
+	useDisclosure,
+	Text,
+	useToast,
 } from '@chakra-ui/react';
 import { useClient } from 'urql';
 import { FaSave } from 'react-icons/fa';
 import InputField from './InputField';
 import {
-  DateInputType,
-  MultiSelectInputType,
-  SelectInputType,
-  TextInputType,
+	DateInputType,
+	MultiSelectInputType,
+	SelectInputType,
+	TextInputType,
 } from '../constants';
 import { getObjectDiff } from '../utils';
 import { UpdateUser } from '../graphql/mutation';
 import { GetAvailableRolesQuery } from '../graphql/queries';
 
 const GenderTypes = {
-  Undisclosed: null,
-  Male: 'Male',
-  Female: 'Female',
+	Undisclosed: null,
+	Male: 'Male',
+	Female: 'Female',
 };
 
 interface userDataTypes {
-  id: string;
-  email: string;
-  given_name: string;
-  family_name: string;
-  middle_name: string;
-  nickname: string;
-  gender: string;
-  birthdate: string;
-  phone_number: string;
-  picture: string;
-  roles: [string] | [];
+	id: string;
+	email: string;
+	given_name: string;
+	family_name: string;
+	middle_name: string;
+	nickname: string;
+	gender: string;
+	birthdate: string;
+	phone_number: string;
+	picture: string;
+	roles: [string] | [];
 }
 
 const EditUserModal = ({
-  user,
-  updateUserList,
+	user,
+	updateUserList,
 }: {
-  user: userDataTypes;
-  updateUserList: Function;
+	user: userDataTypes;
+	updateUserList: Function;
 }) => {
-  const client = useClient();
-  const toast = useToast();
-  const [availableRoles, setAvailableRoles] = useState<string[]>([]);
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const [userData, setUserData] = useState<userDataTypes>({
-    id: '',
-    email: '',
-    given_name: '',
-    family_name: '',
-    middle_name: '',
-    nickname: '',
-    gender: '',
-    birthdate: '',
-    phone_number: '',
-    picture: '',
-    roles: [],
-  });
-  React.useEffect(() => {
-    setUserData(user);
-    fetchAvailableRoles();
-  }, []);
-  const fetchAvailableRoles = async () => {
-    const res = await client.query(GetAvailableRolesQuery).toPromise();
-    if (res.data?._env?.ROLES && res.data?._env?.PROTECTED_ROLES) {
-      setAvailableRoles([
-        ...res.data._env.ROLES,
-        ...res.data._env.PROTECTED_ROLES,
-      ]);
-    }
-  };
-  const saveHandler = async () => {
-    const diff = getObjectDiff(user, userData);
-    const updatedUserData = diff.reduce(
-      (acc: any, property: string) => ({
-        ...acc,
-        // @ts-ignore
-        [property]: userData[property],
-      }),
-      {},
-    );
-    const res = await client
-      .mutation(UpdateUser, { params: { ...updatedUserData, id: userData.id } })
-      .toPromise();
-    if (res.error) {
-      toast({
-        title: 'User data update failed',
-        isClosable: true,
-        status: 'error',
-        position: 'bottom-right',
-      });
-    } else if (res.data?._update_user?.id) {
-      toast({
-        title: 'User data update successful',
-        isClosable: true,
-        status: 'success',
-        position: 'bottom-right',
-      });
-    }
-    onClose();
-    updateUserList();
-  };
-  return (
-    <>
-      <MenuItem onClick={onOpen}>Edit User Details</MenuItem>
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Edit User Details</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <Stack>
-              <Flex>
-                <Flex w="30%" justifyContent="start" alignItems="center">
-                  <Text fontSize="sm">Given Name:</Text>
-                </Flex>
-                <Center w="70%">
-                  <InputField
-                    variables={userData}
-                    setVariables={setUserData}
-                    inputType={TextInputType.GIVEN_NAME}
-                  />
-                </Center>
-              </Flex>
-              <Flex>
-                <Flex w="30%" justifyContent="start" alignItems="center">
-                  <Text fontSize="sm">Middle Name:</Text>
-                </Flex>
-                <Center w="70%">
-                  <InputField
-                    variables={userData}
-                    setVariables={setUserData}
-                    inputType={TextInputType.MIDDLE_NAME}
-                  />
-                </Center>
-              </Flex>
-              <Flex>
-                <Flex w="30%" justifyContent="start" alignItems="center">
-                  <Text fontSize="sm">Family Name:</Text>
-                </Flex>
-                <Center w="70%">
-                  <InputField
-                    variables={userData}
-                    setVariables={setUserData}
-                    inputType={TextInputType.FAMILY_NAME}
-                  />
-                </Center>
-              </Flex>
-              <Flex>
-                <Flex w="30%" justifyContent="start" alignItems="center">
-                  <Text fontSize="sm">Birth Date:</Text>
-                </Flex>
-                <Center w="70%">
-                  <InputField
-                    variables={userData}
-                    setVariables={setUserData}
-                    inputType={DateInputType.BIRTHDATE}
-                  />
-                </Center>
-              </Flex>
-              <Flex>
-                <Flex w="30%" justifyContent="start" alignItems="center">
-                  <Text fontSize="sm">Nickname:</Text>
-                </Flex>
-                <Center w="70%">
-                  <InputField
-                    variables={userData}
-                    setVariables={setUserData}
-                    inputType={TextInputType.NICKNAME}
-                  />
-                </Center>
-              </Flex>
-              <Flex>
-                <Flex w="30%" justifyContent="start" alignItems="center">
-                  <Text fontSize="sm">Gender:</Text>
-                </Flex>
-                <Center w="70%">
-                  <InputField
-                    variables={userData}
-                    setVariables={setUserData}
-                    inputType={SelectInputType.GENDER}
-                    value={userData.gender}
-                    options={GenderTypes}
-                  />
-                </Center>
-              </Flex>
-              <Flex>
-                <Flex w="30%" justifyContent="start" alignItems="center">
-                  <Text fontSize="sm">Phone Number:</Text>
-                </Flex>
-                <Center w="70%">
-                  <InputField
-                    variables={userData}
-                    setVariables={setUserData}
-                    inputType={TextInputType.PHONE_NUMBER}
-                  />
-                </Center>
-              </Flex>
-              <Flex>
-                <Flex w="30%" justifyContent="start" alignItems="center">
-                  <Text fontSize="sm">Picture:</Text>
-                </Flex>
-                <Center w="70%">
-                  <InputField
-                    variables={userData}
-                    setVariables={setUserData}
-                    inputType={TextInputType.PICTURE}
-                  />
-                </Center>
-              </Flex>
-              <Flex>
-                <Flex w="30%" justifyContent="start" alignItems="center">
-                  <Text fontSize="sm">Roles:</Text>
-                </Flex>
-                <Center w="70%">
-                  <InputField
-                    variables={userData}
-                    setVariables={setUserData}
-                    availableRoles={availableRoles}
-                    inputType={MultiSelectInputType.USER_ROLES}
-                  />
-                </Center>
-              </Flex>
-            </Stack>
-          </ModalBody>
+	const client = useClient();
+	const toast = useToast();
+	const [availableRoles, setAvailableRoles] = useState<string[]>([]);
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	const [userData, setUserData] = useState<userDataTypes>({
+		id: '',
+		email: '',
+		given_name: '',
+		family_name: '',
+		middle_name: '',
+		nickname: '',
+		gender: '',
+		birthdate: '',
+		phone_number: '',
+		picture: '',
+		roles: [],
+	});
+	React.useEffect(() => {
+		setUserData(user);
+		fetchAvailableRoles();
+	}, []);
+	const fetchAvailableRoles = async () => {
+		const res = await client.query(GetAvailableRolesQuery).toPromise();
+		if (res.data?._env?.ROLES && res.data?._env?.PROTECTED_ROLES) {
+			setAvailableRoles([
+				...res.data._env.ROLES,
+				...res.data._env.PROTECTED_ROLES,
+			]);
+		}
+	};
+	const saveHandler = async () => {
+		const diff = getObjectDiff(user, userData);
+		const updatedUserData = diff.reduce(
+			(acc: any, property: string) => ({
+				...acc,
+				// @ts-ignore
+				[property]: userData[property],
+			}),
+			{},
+		);
+		const res = await client
+			.mutation(UpdateUser, { params: { ...updatedUserData, id: userData.id } })
+			.toPromise();
+		if (res.error) {
+			toast({
+				title: 'User data update failed',
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+		} else if (res.data?._update_user?.id) {
+			toast({
+				title: 'User data update successful',
+				isClosable: true,
+				status: 'success',
+				position: 'bottom-right',
+			});
+		}
+		onClose();
+		updateUserList();
+	};
+	return (
+		<>
+			<MenuItem onClick={onOpen}>Edit User Details</MenuItem>
+			<Modal isOpen={isOpen} onClose={onClose}>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>Edit User Details</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<Stack>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Given Name:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.GIVEN_NAME}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Middle Name:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.MIDDLE_NAME}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Family Name:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.FAMILY_NAME}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Birth Date:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={DateInputType.BIRTHDATE}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Nickname:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.NICKNAME}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Gender:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={SelectInputType.GENDER}
+										value={userData.gender}
+										options={GenderTypes}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Phone Number:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.PHONE_NUMBER}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Picture:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										inputType={TextInputType.PICTURE}
+									/>
+								</Center>
+							</Flex>
+							<Flex>
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">Roles:</Text>
+								</Flex>
+								<Center w="70%">
+									<InputField
+										variables={userData}
+										setVariables={setUserData}
+										availableRoles={availableRoles}
+										inputType={MultiSelectInputType.USER_ROLES}
+									/>
+								</Center>
+							</Flex>
+						</Stack>
+					</ModalBody>
 
-          <ModalFooter>
-            <Button
-              leftIcon={<FaSave />}
-              colorScheme="blue"
-              variant="solid"
-              onClick={saveHandler}
-              isDisabled={false}
-            >
-              <Center h="100%" pt="5%">
-                Save
-              </Center>
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
+					<ModalFooter>
+						<Button
+							leftIcon={<FaSave />}
+							colorScheme="blue"
+							variant="solid"
+							onClick={saveHandler}
+							isDisabled={false}
+						>
+							<Center h="100%" pt="5%">
+								Save
+							</Center>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
 };
 
 export default EditUserModal;
diff --git a/dashboard/src/components/InputField.tsx b/dashboard/src/components/InputField.tsx
index fe1d3d6..aefe49c 100644
--- a/dashboard/src/components/InputField.tsx
+++ b/dashboard/src/components/InputField.tsx
@@ -1,432 +1,432 @@
 import React, { useState } from 'react';
 import {
-  Box,
-  Flex,
-  Input,
-  Center,
-  InputGroup,
-  InputRightElement,
-  Tag,
-  TagLabel,
-  TagRightIcon,
-  Select,
-  Textarea,
-  Switch,
-  Text,
-  MenuButton,
-  MenuList,
-  MenuItemOption,
-  MenuOptionGroup,
-  Button,
-  Menu,
+	Box,
+	Flex,
+	Input,
+	Center,
+	InputGroup,
+	InputRightElement,
+	Tag,
+	TagLabel,
+	TagRightIcon,
+	Select,
+	Textarea,
+	Switch,
+	Text,
+	MenuButton,
+	MenuList,
+	MenuItemOption,
+	MenuOptionGroup,
+	Button,
+	Menu,
 } from '@chakra-ui/react';
 import {
-  FaRegClone,
-  FaRegEye,
-  FaRegEyeSlash,
-  FaPlus,
-  FaTimes,
-  FaAngleDown,
+	FaRegClone,
+	FaRegEye,
+	FaRegEyeSlash,
+	FaPlus,
+	FaTimes,
+	FaAngleDown,
 } from 'react-icons/fa';
 import {
-  ArrayInputOperations,
-  ArrayInputType,
-  SelectInputType,
-  HiddenInputType,
-  TextInputType,
-  TextAreaInputType,
-  SwitchInputType,
-  DateInputType,
-  MultiSelectInputType,
+	ArrayInputOperations,
+	ArrayInputType,
+	SelectInputType,
+	HiddenInputType,
+	TextInputType,
+	TextAreaInputType,
+	SwitchInputType,
+	DateInputType,
+	MultiSelectInputType,
 } from '../constants';
 import { copyTextToClipboard } from '../utils';
 
 const InputField = ({
-  inputType,
-  variables,
-  setVariables,
-  fieldVisibility,
-  setFieldVisibility,
-  availableRoles,
-  ...downshiftProps
+	inputType,
+	variables,
+	setVariables,
+	fieldVisibility,
+	setFieldVisibility,
+	availableRoles,
+	...downshiftProps
 }: any) => {
-  const props = {
-    size: 'sm',
-    ...downshiftProps,
-  };
-  const [availableUserRoles, setAvailableUserRoles] =
-    useState<string[]>(availableRoles);
-  const [inputFieldVisibility, setInputFieldVisibility] = useState<
-    Record<string, boolean>
-  >({
-    ROLES: false,
-    DEFAULT_ROLES: false,
-    PROTECTED_ROLES: false,
-    ALLOWED_ORIGINS: false,
-    roles: false,
-  });
-  const [inputData, setInputData] = useState<Record<string, string>>({
-    ROLES: '',
-    DEFAULT_ROLES: '',
-    PROTECTED_ROLES: '',
-    ALLOWED_ORIGINS: '',
-    roles: '',
-  });
-  const updateInputHandler = (
-    type: string,
-    operation: any,
-    role: string = '',
-  ) => {
-    if (operation === ArrayInputOperations.APPEND) {
-      if (inputData[type] !== '') {
-        setVariables({
-          ...variables,
-          [type]: [...variables[type], inputData[type]],
-        });
-        setInputData({ ...inputData, [type]: '' });
-      }
-      setInputFieldVisibility({ ...inputFieldVisibility, [type]: false });
-    }
-    if (operation === ArrayInputOperations.REMOVE) {
-      let updatedEnvVars = variables[type].filter(
-        (item: string) => item !== role,
-      );
-      setVariables({
-        ...variables,
-        [type]: updatedEnvVars,
-      });
-    }
-  };
-  if (Object.values(TextInputType).includes(inputType)) {
-    return (
-      <InputGroup size="sm">
-        <Input
-          {...props}
-          value={variables[inputType] ? variables[inputType] : ''}
-          onChange={(
-            event: Event & {
-              target: HTMLInputElement;
-            },
-          ) =>
-            setVariables({
-              ...variables,
-              [inputType]: event.target.value,
-            })
-          }
-        />
-        <InputRightElement
-          children={<FaRegClone color="#bfbfbf" />}
-          cursor="pointer"
-          onClick={() => copyTextToClipboard(variables[inputType])}
-        />
-      </InputGroup>
-    );
-  }
-  if (Object.values(HiddenInputType).includes(inputType)) {
-    return (
-      <InputGroup size="sm">
-        <Input
-          {...props}
-          value={variables[inputType] || ''}
-          onChange={(
-            event: Event & {
-              target: HTMLInputElement;
-            },
-          ) =>
-            setVariables({
-              ...variables,
-              [inputType]: event.target.value,
-            })
-          }
-          type={!fieldVisibility[inputType] ? 'password' : 'text'}
-        />
-        <InputRightElement
-          right="15px"
-          children={
-            <Flex>
-              {fieldVisibility[inputType] ? (
-                <Center
-                  w="25px"
-                  margin="0 1.5%"
-                  cursor="pointer"
-                  onClick={() =>
-                    setFieldVisibility({
-                      ...fieldVisibility,
-                      [inputType]: false,
-                    })
-                  }
-                >
-                  <FaRegEyeSlash color="#bfbfbf" />
-                </Center>
-              ) : (
-                <Center
-                  w="25px"
-                  margin="0 1.5%"
-                  cursor="pointer"
-                  onClick={() =>
-                    setFieldVisibility({
-                      ...fieldVisibility,
-                      [inputType]: true,
-                    })
-                  }
-                >
-                  <FaRegEye color="#bfbfbf" />
-                </Center>
-              )}
-              <Center
-                w="25px"
-                margin="0 1.5%"
-                cursor="pointer"
-                onClick={() => copyTextToClipboard(variables[inputType])}
-              >
-                <FaRegClone color="#bfbfbf" />
-              </Center>
-            </Flex>
-          }
-        />
-      </InputGroup>
-    );
-  }
-  if (Object.values(ArrayInputType).includes(inputType)) {
-    return (
-      <Flex
-        border="1px solid #e2e8f0"
-        w="100%"
-        borderRadius={5}
-        paddingTop="0.5%"
-        overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
-        overflowY="hidden"
-        justifyContent="start"
-        alignItems="center"
-      >
-        {variables[inputType].map((role: string, index: number) => (
-          <Box key={index} margin="0.5%" role="group">
-            <Tag
-              size="sm"
-              variant="outline"
-              colorScheme="gray"
-              minW="fit-content"
-            >
-              <TagLabel cursor="default">{role}</TagLabel>
-              <TagRightIcon
-                boxSize="12px"
-                as={FaTimes}
-                display="none"
-                cursor="pointer"
-                _groupHover={{ display: 'block' }}
-                onClick={() =>
-                  updateInputHandler(
-                    inputType,
-                    ArrayInputOperations.REMOVE,
-                    role,
-                  )
-                }
-              />
-            </Tag>
-          </Box>
-        ))}
-        {inputFieldVisibility[inputType] ? (
-          <Box ml="1%" mb="0.75%">
-            <Input
-              type="text"
-              size="xs"
-              minW="150px"
-              placeholder="add a new value"
-              value={inputData[inputType] || ''}
-              onChange={(e: any) => {
-                setInputData({ ...inputData, [inputType]: e.target.value });
-              }}
-              onBlur={() =>
-                updateInputHandler(inputType, ArrayInputOperations.APPEND)
-              }
-              onKeyPress={(event) => {
-                if (event.key === 'Enter') {
-                  updateInputHandler(inputType, ArrayInputOperations.APPEND);
-                }
-              }}
-            />
-          </Box>
-        ) : (
-          <Box
-            marginLeft="0.5%"
-            cursor="pointer"
-            onClick={() =>
-              setInputFieldVisibility({
-                ...inputFieldVisibility,
-                [inputType]: true,
-              })
-            }
-          >
-            <Tag
-              size="sm"
-              variant="outline"
-              colorScheme="gray"
-              minW="fit-content"
-            >
-              <FaPlus />
-            </Tag>
-          </Box>
-        )}
-      </Flex>
-    );
-  }
-  if (Object.values(SelectInputType).includes(inputType)) {
-    const { options, ...rest } = props;
-    return (
-      <Select
-        size="sm"
-        {...rest}
-        value={variables[inputType] ? variables[inputType] : ''}
-        onChange={(e) =>
-          setVariables({ ...variables, [inputType]: e.target.value })
-        }
-      >
-        {Object.entries(options).map(([key, value]: any) => (
-          <option value={value} key={key}>
-            {key}
-          </option>
-        ))}
-      </Select>
-    );
-  }
-  if (Object.values(MultiSelectInputType).includes(inputType)) {
-    return (
-      <Flex w="100%" style={{ position: 'relative' }}>
-        <Flex
-          border="1px solid #e2e8f0"
-          w="100%"
-          borderRadius="var(--chakra-radii-sm)"
-          p="1% 0 0 2.5%"
-          overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
-          overflowY="hidden"
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          <Flex justifyContent="start" alignItems="center" w="100%" wrap="wrap">
-            {variables[inputType].map((role: string, index: number) => (
-              <Box key={index} margin="0.5%" role="group">
-                <Tag
-                  size="sm"
-                  variant="outline"
-                  colorScheme="gray"
-                  minW="fit-content"
-                >
-                  <TagLabel cursor="default">{role}</TagLabel>
-                  <TagRightIcon
-                    boxSize="12px"
-                    as={FaTimes}
-                    display="none"
-                    cursor="pointer"
-                    _groupHover={{ display: 'block' }}
-                    onClick={() =>
-                      updateInputHandler(
-                        inputType,
-                        ArrayInputOperations.REMOVE,
-                        role,
-                      )
-                    }
-                  />
-                </Tag>
-              </Box>
-            ))}
-          </Flex>
-          <Menu matchWidth={true}>
-            <MenuButton px="10px" py="7.5px">
-              <FaAngleDown />
-            </MenuButton>
-            <MenuList
-              position="absolute"
-              top="0"
-              right="0"
-              zIndex="10"
-              maxH="150"
-              overflowX="scroll"
-            >
-              <MenuOptionGroup
-                title={undefined}
-                value={variables[inputType]}
-                type="checkbox"
-                onChange={(values: string[] | string) => {
-                  setVariables({
-                    ...variables,
-                    [inputType]: values,
-                  });
-                }}
-              >
-                {availableUserRoles.map((role) => {
-                  return (
-                    <MenuItemOption
-                      key={`multiselect-menu-${role}`}
-                      value={role}
-                    >
-                      {role}
-                    </MenuItemOption>
-                  );
-                })}
-              </MenuOptionGroup>
-            </MenuList>
-          </Menu>
-        </Flex>
-      </Flex>
-    );
-  }
-  if (Object.values(TextAreaInputType).includes(inputType)) {
-    return (
-      <Textarea
-        {...props}
-        size="lg"
-        fontSize={14}
-        value={variables[inputType] ? variables[inputType] : ''}
-        onChange={(
-          event: Event & {
-            target: HTMLInputElement;
-          },
-        ) =>
-          setVariables({
-            ...variables,
-            [inputType]: event.target.value,
-          })
-        }
-      />
-    );
-  }
-  if (Object.values(SwitchInputType).includes(inputType)) {
-    return (
-      <Flex w="25%" justifyContent="space-between">
-        <Text h="75%" fontWeight="bold" marginRight="2">
-          Off
-        </Text>
-        <Switch
-          size="md"
-          isChecked={variables[inputType]}
-          onChange={() => {
-            setVariables({
-              ...variables,
-              [inputType]: !variables[inputType],
-            });
-          }}
-        />
-        <Text h="75%" fontWeight="bold" marginLeft="2">
-          On
-        </Text>
-      </Flex>
-    );
-  }
-  if (Object.values(DateInputType).includes(inputType)) {
-    return (
-      <Flex border="1px solid #e2e8f0" w="100%" h="33px" padding="1%">
-        <input
-          type="date"
-          style={{ width: '100%', paddingLeft: '2.5%' }}
-          value={variables[inputType] ? variables[inputType] : ''}
-          onChange={(e) =>
-            setVariables({ ...variables, [inputType]: e.target.value })
-          }
-        />
-      </Flex>
-    );
-  }
-  return null;
+	const props = {
+		size: 'sm',
+		...downshiftProps,
+	};
+	const [availableUserRoles, setAvailableUserRoles] =
+		useState<string[]>(availableRoles);
+	const [inputFieldVisibility, setInputFieldVisibility] = useState<
+		Record<string, boolean>
+	>({
+		ROLES: false,
+		DEFAULT_ROLES: false,
+		PROTECTED_ROLES: false,
+		ALLOWED_ORIGINS: false,
+		roles: false,
+	});
+	const [inputData, setInputData] = useState<Record<string, string>>({
+		ROLES: '',
+		DEFAULT_ROLES: '',
+		PROTECTED_ROLES: '',
+		ALLOWED_ORIGINS: '',
+		roles: '',
+	});
+	const updateInputHandler = (
+		type: string,
+		operation: any,
+		role: string = '',
+	) => {
+		if (operation === ArrayInputOperations.APPEND) {
+			if (inputData[type] !== '') {
+				setVariables({
+					...variables,
+					[type]: [...variables[type], inputData[type]],
+				});
+				setInputData({ ...inputData, [type]: '' });
+			}
+			setInputFieldVisibility({ ...inputFieldVisibility, [type]: false });
+		}
+		if (operation === ArrayInputOperations.REMOVE) {
+			let updatedEnvVars = variables[type].filter(
+				(item: string) => item !== role,
+			);
+			setVariables({
+				...variables,
+				[type]: updatedEnvVars,
+			});
+		}
+	};
+	if (Object.values(TextInputType).includes(inputType)) {
+		return (
+			<InputGroup size="sm">
+				<Input
+					{...props}
+					value={variables[inputType] ? variables[inputType] : ''}
+					onChange={(
+						event: Event & {
+							target: HTMLInputElement;
+						},
+					) =>
+						setVariables({
+							...variables,
+							[inputType]: event.target.value,
+						})
+					}
+				/>
+				<InputRightElement
+					children={<FaRegClone color="#bfbfbf" />}
+					cursor="pointer"
+					onClick={() => copyTextToClipboard(variables[inputType])}
+				/>
+			</InputGroup>
+		);
+	}
+	if (Object.values(HiddenInputType).includes(inputType)) {
+		return (
+			<InputGroup size="sm">
+				<Input
+					{...props}
+					value={variables[inputType] || ''}
+					onChange={(
+						event: Event & {
+							target: HTMLInputElement;
+						},
+					) =>
+						setVariables({
+							...variables,
+							[inputType]: event.target.value,
+						})
+					}
+					type={!fieldVisibility[inputType] ? 'password' : 'text'}
+				/>
+				<InputRightElement
+					right="15px"
+					children={
+						<Flex>
+							{fieldVisibility[inputType] ? (
+								<Center
+									w="25px"
+									margin="0 1.5%"
+									cursor="pointer"
+									onClick={() =>
+										setFieldVisibility({
+											...fieldVisibility,
+											[inputType]: false,
+										})
+									}
+								>
+									<FaRegEyeSlash color="#bfbfbf" />
+								</Center>
+							) : (
+								<Center
+									w="25px"
+									margin="0 1.5%"
+									cursor="pointer"
+									onClick={() =>
+										setFieldVisibility({
+											...fieldVisibility,
+											[inputType]: true,
+										})
+									}
+								>
+									<FaRegEye color="#bfbfbf" />
+								</Center>
+							)}
+							<Center
+								w="25px"
+								margin="0 1.5%"
+								cursor="pointer"
+								onClick={() => copyTextToClipboard(variables[inputType])}
+							>
+								<FaRegClone color="#bfbfbf" />
+							</Center>
+						</Flex>
+					}
+				/>
+			</InputGroup>
+		);
+	}
+	if (Object.values(ArrayInputType).includes(inputType)) {
+		return (
+			<Flex
+				border="1px solid #e2e8f0"
+				w="100%"
+				borderRadius={5}
+				paddingTop="0.5%"
+				overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
+				overflowY="hidden"
+				justifyContent="start"
+				alignItems="center"
+			>
+				{variables[inputType].map((role: string, index: number) => (
+					<Box key={index} margin="0.5%" role="group">
+						<Tag
+							size="sm"
+							variant="outline"
+							colorScheme="gray"
+							minW="fit-content"
+						>
+							<TagLabel cursor="default">{role}</TagLabel>
+							<TagRightIcon
+								boxSize="12px"
+								as={FaTimes}
+								display="none"
+								cursor="pointer"
+								_groupHover={{ display: 'block' }}
+								onClick={() =>
+									updateInputHandler(
+										inputType,
+										ArrayInputOperations.REMOVE,
+										role,
+									)
+								}
+							/>
+						</Tag>
+					</Box>
+				))}
+				{inputFieldVisibility[inputType] ? (
+					<Box ml="1%" mb="0.75%">
+						<Input
+							type="text"
+							size="xs"
+							minW="150px"
+							placeholder="add a new value"
+							value={inputData[inputType] || ''}
+							onChange={(e: any) => {
+								setInputData({ ...inputData, [inputType]: e.target.value });
+							}}
+							onBlur={() =>
+								updateInputHandler(inputType, ArrayInputOperations.APPEND)
+							}
+							onKeyPress={(event) => {
+								if (event.key === 'Enter') {
+									updateInputHandler(inputType, ArrayInputOperations.APPEND);
+								}
+							}}
+						/>
+					</Box>
+				) : (
+					<Box
+						marginLeft="0.5%"
+						cursor="pointer"
+						onClick={() =>
+							setInputFieldVisibility({
+								...inputFieldVisibility,
+								[inputType]: true,
+							})
+						}
+					>
+						<Tag
+							size="sm"
+							variant="outline"
+							colorScheme="gray"
+							minW="fit-content"
+						>
+							<FaPlus />
+						</Tag>
+					</Box>
+				)}
+			</Flex>
+		);
+	}
+	if (Object.values(SelectInputType).includes(inputType)) {
+		const { options, ...rest } = props;
+		return (
+			<Select
+				size="sm"
+				{...rest}
+				value={variables[inputType] ? variables[inputType] : ''}
+				onChange={(e) =>
+					setVariables({ ...variables, [inputType]: e.target.value })
+				}
+			>
+				{Object.entries(options).map(([key, value]: any) => (
+					<option value={value} key={key}>
+						{key}
+					</option>
+				))}
+			</Select>
+		);
+	}
+	if (Object.values(MultiSelectInputType).includes(inputType)) {
+		return (
+			<Flex w="100%" style={{ position: 'relative' }}>
+				<Flex
+					border="1px solid #e2e8f0"
+					w="100%"
+					borderRadius="var(--chakra-radii-sm)"
+					p="1% 0 0 2.5%"
+					overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
+					overflowY="hidden"
+					justifyContent="space-between"
+					alignItems="center"
+				>
+					<Flex justifyContent="start" alignItems="center" w="100%" wrap="wrap">
+						{variables[inputType].map((role: string, index: number) => (
+							<Box key={index} margin="0.5%" role="group">
+								<Tag
+									size="sm"
+									variant="outline"
+									colorScheme="gray"
+									minW="fit-content"
+								>
+									<TagLabel cursor="default">{role}</TagLabel>
+									<TagRightIcon
+										boxSize="12px"
+										as={FaTimes}
+										display="none"
+										cursor="pointer"
+										_groupHover={{ display: 'block' }}
+										onClick={() =>
+											updateInputHandler(
+												inputType,
+												ArrayInputOperations.REMOVE,
+												role,
+											)
+										}
+									/>
+								</Tag>
+							</Box>
+						))}
+					</Flex>
+					<Menu matchWidth={true}>
+						<MenuButton px="10px" py="7.5px">
+							<FaAngleDown />
+						</MenuButton>
+						<MenuList
+							position="absolute"
+							top="0"
+							right="0"
+							zIndex="10"
+							maxH="150"
+							overflowX="scroll"
+						>
+							<MenuOptionGroup
+								title={undefined}
+								value={variables[inputType]}
+								type="checkbox"
+								onChange={(values: string[] | string) => {
+									setVariables({
+										...variables,
+										[inputType]: values,
+									});
+								}}
+							>
+								{availableUserRoles.map((role) => {
+									return (
+										<MenuItemOption
+											key={`multiselect-menu-${role}`}
+											value={role}
+										>
+											{role}
+										</MenuItemOption>
+									);
+								})}
+							</MenuOptionGroup>
+						</MenuList>
+					</Menu>
+				</Flex>
+			</Flex>
+		);
+	}
+	if (Object.values(TextAreaInputType).includes(inputType)) {
+		return (
+			<Textarea
+				{...props}
+				size="lg"
+				fontSize={14}
+				value={variables[inputType] ? variables[inputType] : ''}
+				onChange={(
+					event: Event & {
+						target: HTMLInputElement;
+					},
+				) =>
+					setVariables({
+						...variables,
+						[inputType]: event.target.value,
+					})
+				}
+			/>
+		);
+	}
+	if (Object.values(SwitchInputType).includes(inputType)) {
+		return (
+			<Flex w="25%" justifyContent="space-between">
+				<Text h="75%" fontWeight="bold" marginRight="2">
+					Off
+				</Text>
+				<Switch
+					size="md"
+					isChecked={variables[inputType]}
+					onChange={() => {
+						setVariables({
+							...variables,
+							[inputType]: !variables[inputType],
+						});
+					}}
+				/>
+				<Text h="75%" fontWeight="bold" marginLeft="2">
+					On
+				</Text>
+			</Flex>
+		);
+	}
+	if (Object.values(DateInputType).includes(inputType)) {
+		return (
+			<Flex border="1px solid #e2e8f0" w="100%" h="33px" padding="1%">
+				<input
+					type="date"
+					style={{ width: '100%', paddingLeft: '2.5%' }}
+					value={variables[inputType] ? variables[inputType] : ''}
+					onChange={(e) =>
+						setVariables({ ...variables, [inputType]: e.target.value })
+					}
+				/>
+			</Flex>
+		);
+	}
+	return null;
 };
 
 export default InputField;
diff --git a/dashboard/src/constants.ts b/dashboard/src/constants.ts
index aa0a7f0..368d64f 100644
--- a/dashboard/src/constants.ts
+++ b/dashboard/src/constants.ts
@@ -1,314 +1,314 @@
 export const LOGO_URL =
-  'https://user-images.githubusercontent.com/6964334/147834043-fc384cab-e7ca-40f8-9663-38fc25fd5f3a.png';
+	'https://user-images.githubusercontent.com/6964334/147834043-fc384cab-e7ca-40f8-9663-38fc25fd5f3a.png';
 
 export const TextInputType = {
-  ACCESS_TOKEN_EXPIRY_TIME: 'ACCESS_TOKEN_EXPIRY_TIME',
-  CLIENT_ID: 'CLIENT_ID',
-  GOOGLE_CLIENT_ID: 'GOOGLE_CLIENT_ID',
-  GITHUB_CLIENT_ID: 'GITHUB_CLIENT_ID',
-  FACEBOOK_CLIENT_ID: 'FACEBOOK_CLIENT_ID',
-  LINKEDIN_CLIENT_ID: 'LINKEDIN_CLIENT_ID',
-  APPLE_CLIENT_ID: 'APPLE_CLIENT_ID',
-  TWITTER_CLIENT_ID: 'TWITTER_CLIENT_ID',
-  JWT_ROLE_CLAIM: 'JWT_ROLE_CLAIM',
-  REDIS_URL: 'REDIS_URL',
-  SMTP_HOST: 'SMTP_HOST',
-  SMTP_PORT: 'SMTP_PORT',
-  SMTP_USERNAME: 'SMTP_USERNAME',
-  SMTP_LOCAL_NAME: 'SMTP_LOCAL_NAME',
-  SENDER_EMAIL: 'SENDER_EMAIL',
-  ORGANIZATION_NAME: 'ORGANIZATION_NAME',
-  ORGANIZATION_LOGO: 'ORGANIZATION_LOGO',
-  DATABASE_NAME: 'DATABASE_NAME',
-  DATABASE_TYPE: 'DATABASE_TYPE',
-  DATABASE_URL: 'DATABASE_URL',
-  GIVEN_NAME: 'given_name',
-  MIDDLE_NAME: 'middle_name',
-  FAMILY_NAME: 'family_name',
-  NICKNAME: 'nickname',
-  PHONE_NUMBER: 'phone_number',
-  PICTURE: 'picture',
+	ACCESS_TOKEN_EXPIRY_TIME: 'ACCESS_TOKEN_EXPIRY_TIME',
+	CLIENT_ID: 'CLIENT_ID',
+	GOOGLE_CLIENT_ID: 'GOOGLE_CLIENT_ID',
+	GITHUB_CLIENT_ID: 'GITHUB_CLIENT_ID',
+	FACEBOOK_CLIENT_ID: 'FACEBOOK_CLIENT_ID',
+	LINKEDIN_CLIENT_ID: 'LINKEDIN_CLIENT_ID',
+	APPLE_CLIENT_ID: 'APPLE_CLIENT_ID',
+	TWITTER_CLIENT_ID: 'TWITTER_CLIENT_ID',
+	JWT_ROLE_CLAIM: 'JWT_ROLE_CLAIM',
+	REDIS_URL: 'REDIS_URL',
+	SMTP_HOST: 'SMTP_HOST',
+	SMTP_PORT: 'SMTP_PORT',
+	SMTP_USERNAME: 'SMTP_USERNAME',
+	SMTP_LOCAL_NAME: 'SMTP_LOCAL_NAME',
+	SENDER_EMAIL: 'SENDER_EMAIL',
+	ORGANIZATION_NAME: 'ORGANIZATION_NAME',
+	ORGANIZATION_LOGO: 'ORGANIZATION_LOGO',
+	DATABASE_NAME: 'DATABASE_NAME',
+	DATABASE_TYPE: 'DATABASE_TYPE',
+	DATABASE_URL: 'DATABASE_URL',
+	GIVEN_NAME: 'given_name',
+	MIDDLE_NAME: 'middle_name',
+	FAMILY_NAME: 'family_name',
+	NICKNAME: 'nickname',
+	PHONE_NUMBER: 'phone_number',
+	PICTURE: 'picture',
 };
 
 export const HiddenInputType = {
-  CLIENT_SECRET: 'CLIENT_SECRET',
-  GOOGLE_CLIENT_SECRET: 'GOOGLE_CLIENT_SECRET',
-  GITHUB_CLIENT_SECRET: 'GITHUB_CLIENT_SECRET',
-  FACEBOOK_CLIENT_SECRET: 'FACEBOOK_CLIENT_SECRET',
-  LINKEDIN_CLIENT_SECRET: 'LINKEDIN_CLIENT_SECRET',
-  APPLE_CLIENT_SECRET: 'APPLE_CLIENT_SECRET',
-  TWITTER_CLIENT_SECRET: 'TWITTER_CLIENT_SECRET',
-  JWT_SECRET: 'JWT_SECRET',
-  SMTP_PASSWORD: 'SMTP_PASSWORD',
-  ADMIN_SECRET: 'ADMIN_SECRET',
-  OLD_ADMIN_SECRET: 'OLD_ADMIN_SECRET',
+	CLIENT_SECRET: 'CLIENT_SECRET',
+	GOOGLE_CLIENT_SECRET: 'GOOGLE_CLIENT_SECRET',
+	GITHUB_CLIENT_SECRET: 'GITHUB_CLIENT_SECRET',
+	FACEBOOK_CLIENT_SECRET: 'FACEBOOK_CLIENT_SECRET',
+	LINKEDIN_CLIENT_SECRET: 'LINKEDIN_CLIENT_SECRET',
+	APPLE_CLIENT_SECRET: 'APPLE_CLIENT_SECRET',
+	TWITTER_CLIENT_SECRET: 'TWITTER_CLIENT_SECRET',
+	JWT_SECRET: 'JWT_SECRET',
+	SMTP_PASSWORD: 'SMTP_PASSWORD',
+	ADMIN_SECRET: 'ADMIN_SECRET',
+	OLD_ADMIN_SECRET: 'OLD_ADMIN_SECRET',
 };
 
 export const ArrayInputType = {
-  ROLES: 'ROLES',
-  DEFAULT_ROLES: 'DEFAULT_ROLES',
-  PROTECTED_ROLES: 'PROTECTED_ROLES',
-  ALLOWED_ORIGINS: 'ALLOWED_ORIGINS',
+	ROLES: 'ROLES',
+	DEFAULT_ROLES: 'DEFAULT_ROLES',
+	PROTECTED_ROLES: 'PROTECTED_ROLES',
+	ALLOWED_ORIGINS: 'ALLOWED_ORIGINS',
 };
 
 export const SelectInputType = {
-  JWT_TYPE: 'JWT_TYPE',
-  GENDER: 'gender',
+	JWT_TYPE: 'JWT_TYPE',
+	GENDER: 'gender',
 };
 
 export const MultiSelectInputType = {
-  USER_ROLES: 'roles',
+	USER_ROLES: 'roles',
 };
 
 export const TextAreaInputType = {
-  CUSTOM_ACCESS_TOKEN_SCRIPT: 'CUSTOM_ACCESS_TOKEN_SCRIPT',
-  JWT_PRIVATE_KEY: 'JWT_PRIVATE_KEY',
-  JWT_PUBLIC_KEY: 'JWT_PUBLIC_KEY',
+	CUSTOM_ACCESS_TOKEN_SCRIPT: 'CUSTOM_ACCESS_TOKEN_SCRIPT',
+	JWT_PRIVATE_KEY: 'JWT_PRIVATE_KEY',
+	JWT_PUBLIC_KEY: 'JWT_PUBLIC_KEY',
 };
 
 export const SwitchInputType = {
-  APP_COOKIE_SECURE: 'APP_COOKIE_SECURE',
-  ADMIN_COOKIE_SECURE: 'ADMIN_COOKIE_SECURE',
-  DISABLE_LOGIN_PAGE: 'DISABLE_LOGIN_PAGE',
-  DISABLE_MAGIC_LINK_LOGIN: 'DISABLE_MAGIC_LINK_LOGIN',
-  DISABLE_EMAIL_VERIFICATION: 'DISABLE_EMAIL_VERIFICATION',
-  DISABLE_BASIC_AUTHENTICATION: 'DISABLE_BASIC_AUTHENTICATION',
-  DISABLE_SIGN_UP: 'DISABLE_SIGN_UP',
-  DISABLE_REDIS_FOR_ENV: 'DISABLE_REDIS_FOR_ENV',
-  DISABLE_STRONG_PASSWORD: 'DISABLE_STRONG_PASSWORD',
-  DISABLE_MULTI_FACTOR_AUTHENTICATION: 'DISABLE_MULTI_FACTOR_AUTHENTICATION',
-  ENFORCE_MULTI_FACTOR_AUTHENTICATION: 'ENFORCE_MULTI_FACTOR_AUTHENTICATION',
+	APP_COOKIE_SECURE: 'APP_COOKIE_SECURE',
+	ADMIN_COOKIE_SECURE: 'ADMIN_COOKIE_SECURE',
+	DISABLE_LOGIN_PAGE: 'DISABLE_LOGIN_PAGE',
+	DISABLE_MAGIC_LINK_LOGIN: 'DISABLE_MAGIC_LINK_LOGIN',
+	DISABLE_EMAIL_VERIFICATION: 'DISABLE_EMAIL_VERIFICATION',
+	DISABLE_BASIC_AUTHENTICATION: 'DISABLE_BASIC_AUTHENTICATION',
+	DISABLE_SIGN_UP: 'DISABLE_SIGN_UP',
+	DISABLE_REDIS_FOR_ENV: 'DISABLE_REDIS_FOR_ENV',
+	DISABLE_STRONG_PASSWORD: 'DISABLE_STRONG_PASSWORD',
+	DISABLE_MULTI_FACTOR_AUTHENTICATION: 'DISABLE_MULTI_FACTOR_AUTHENTICATION',
+	ENFORCE_MULTI_FACTOR_AUTHENTICATION: 'ENFORCE_MULTI_FACTOR_AUTHENTICATION',
 };
 
 export const DateInputType = {
-  BIRTHDATE: 'birthdate',
+	BIRTHDATE: 'birthdate',
 };
 
 export const ArrayInputOperations = {
-  APPEND: 'APPEND',
-  REMOVE: 'REMOVE',
+	APPEND: 'APPEND',
+	REMOVE: 'REMOVE',
 };
 
 export const HMACEncryptionType = {
-  HS256: 'HS256',
-  HS384: 'HS384',
-  HS512: 'HS512',
+	HS256: 'HS256',
+	HS384: 'HS384',
+	HS512: 'HS512',
 };
 
 export const RSAEncryptionType = {
-  RS256: 'RS256',
-  RS384: 'RS384',
-  RS512: 'RS512',
+	RS256: 'RS256',
+	RS384: 'RS384',
+	RS512: 'RS512',
 };
 
 export const ECDSAEncryptionType = {
-  ES256: 'ES256',
-  ES384: 'ES384',
-  ES512: 'ES512',
+	ES256: 'ES256',
+	ES384: 'ES384',
+	ES512: 'ES512',
 };
 
 export interface envVarTypes {
-  GOOGLE_CLIENT_ID: string;
-  GOOGLE_CLIENT_SECRET: string;
-  GITHUB_CLIENT_ID: string;
-  GITHUB_CLIENT_SECRET: string;
-  FACEBOOK_CLIENT_ID: string;
-  FACEBOOK_CLIENT_SECRET: string;
-  LINKEDIN_CLIENT_ID: string;
-  LINKEDIN_CLIENT_SECRET: string;
-  APPLE_CLIENT_ID: string;
-  APPLE_CLIENT_SECRET: string;
-  TWITTER_CLIENT_ID: string;
-  TWITTER_CLIENT_SECRET: string;
-  ROLES: [string] | [];
-  DEFAULT_ROLES: [string] | [];
-  PROTECTED_ROLES: [string] | [];
-  JWT_TYPE: string;
-  JWT_SECRET: string;
-  JWT_ROLE_CLAIM: string;
-  JWT_PRIVATE_KEY: string;
-  JWT_PUBLIC_KEY: string;
-  REDIS_URL: string;
-  SMTP_HOST: string;
-  SMTP_PORT: string;
-  SMTP_USERNAME: string;
-  SMTP_PASSWORD: string;
-  SMTP_LOCAL_NAME: string;
-  SENDER_EMAIL: string;
-  ALLOWED_ORIGINS: [string] | [];
-  ORGANIZATION_NAME: string;
-  ORGANIZATION_LOGO: string;
-  CUSTOM_ACCESS_TOKEN_SCRIPT: string;
-  ADMIN_SECRET: string;
-  APP_COOKIE_SECURE: boolean;
-  ADMIN_COOKIE_SECURE: boolean;
-  DISABLE_LOGIN_PAGE: boolean;
-  DISABLE_MAGIC_LINK_LOGIN: boolean;
-  DISABLE_EMAIL_VERIFICATION: boolean;
-  DISABLE_BASIC_AUTHENTICATION: boolean;
-  DISABLE_SIGN_UP: boolean;
-  DISABLE_STRONG_PASSWORD: boolean;
-  OLD_ADMIN_SECRET: string;
-  DATABASE_NAME: string;
-  DATABASE_TYPE: string;
-  DATABASE_URL: string;
-  ACCESS_TOKEN_EXPIRY_TIME: string;
-  DISABLE_MULTI_FACTOR_AUTHENTICATION: boolean;
-  ENFORCE_MULTI_FACTOR_AUTHENTICATION: boolean;
+	GOOGLE_CLIENT_ID: string;
+	GOOGLE_CLIENT_SECRET: string;
+	GITHUB_CLIENT_ID: string;
+	GITHUB_CLIENT_SECRET: string;
+	FACEBOOK_CLIENT_ID: string;
+	FACEBOOK_CLIENT_SECRET: string;
+	LINKEDIN_CLIENT_ID: string;
+	LINKEDIN_CLIENT_SECRET: string;
+	APPLE_CLIENT_ID: string;
+	APPLE_CLIENT_SECRET: string;
+	TWITTER_CLIENT_ID: string;
+	TWITTER_CLIENT_SECRET: string;
+	ROLES: [string] | [];
+	DEFAULT_ROLES: [string] | [];
+	PROTECTED_ROLES: [string] | [];
+	JWT_TYPE: string;
+	JWT_SECRET: string;
+	JWT_ROLE_CLAIM: string;
+	JWT_PRIVATE_KEY: string;
+	JWT_PUBLIC_KEY: string;
+	REDIS_URL: string;
+	SMTP_HOST: string;
+	SMTP_PORT: string;
+	SMTP_USERNAME: string;
+	SMTP_PASSWORD: string;
+	SMTP_LOCAL_NAME: string;
+	SENDER_EMAIL: string;
+	ALLOWED_ORIGINS: [string] | [];
+	ORGANIZATION_NAME: string;
+	ORGANIZATION_LOGO: string;
+	CUSTOM_ACCESS_TOKEN_SCRIPT: string;
+	ADMIN_SECRET: string;
+	APP_COOKIE_SECURE: boolean;
+	ADMIN_COOKIE_SECURE: boolean;
+	DISABLE_LOGIN_PAGE: boolean;
+	DISABLE_MAGIC_LINK_LOGIN: boolean;
+	DISABLE_EMAIL_VERIFICATION: boolean;
+	DISABLE_BASIC_AUTHENTICATION: boolean;
+	DISABLE_SIGN_UP: boolean;
+	DISABLE_STRONG_PASSWORD: boolean;
+	OLD_ADMIN_SECRET: string;
+	DATABASE_NAME: string;
+	DATABASE_TYPE: string;
+	DATABASE_URL: string;
+	ACCESS_TOKEN_EXPIRY_TIME: string;
+	DISABLE_MULTI_FACTOR_AUTHENTICATION: boolean;
+	ENFORCE_MULTI_FACTOR_AUTHENTICATION: boolean;
 }
 
 export const envSubViews = {
-  INSTANCE_INFO: 'instance-info',
-  ROLES: 'roles',
-  JWT_CONFIG: 'jwt-config',
-  SESSION_STORAGE: 'session-storage',
-  EMAIL_CONFIG: 'email-config',
-  WHITELIST_VARIABLES: 'whitelist-variables',
-  ORGANIZATION_INFO: 'organization-info',
-  ACCESS_TOKEN: 'access-token',
-  FEATURES: 'features',
-  ADMIN_SECRET: 'admin-secret',
-  DB_CRED: 'db-cred',
+	INSTANCE_INFO: 'instance-info',
+	ROLES: 'roles',
+	JWT_CONFIG: 'jwt-config',
+	SESSION_STORAGE: 'session-storage',
+	EMAIL_CONFIG: 'email-config',
+	WHITELIST_VARIABLES: 'whitelist-variables',
+	ORGANIZATION_INFO: 'organization-info',
+	ACCESS_TOKEN: 'access-token',
+	FEATURES: 'features',
+	ADMIN_SECRET: 'admin-secret',
+	DB_CRED: 'db-cred',
 };
 
 export enum WebhookInputDataFields {
-  ID = 'id',
-  EVENT_NAME = 'event_name',
-  ENDPOINT = 'endpoint',
-  ENABLED = 'enabled',
-  HEADERS = 'headers',
+	ID = 'id',
+	EVENT_NAME = 'event_name',
+	ENDPOINT = 'endpoint',
+	ENABLED = 'enabled',
+	HEADERS = 'headers',
 }
 
 export enum EmailTemplateInputDataFields {
-  ID = 'id',
-  EVENT_NAME = 'event_name',
-  SUBJECT = 'subject',
-  CREATED_AT = 'created_at',
-  TEMPLATE = 'template',
-  DESIGN = 'design',
+	ID = 'id',
+	EVENT_NAME = 'event_name',
+	SUBJECT = 'subject',
+	CREATED_AT = 'created_at',
+	TEMPLATE = 'template',
+	DESIGN = 'design',
 }
 
 export enum WebhookInputHeaderFields {
-  KEY = 'key',
-  VALUE = 'value',
+	KEY = 'key',
+	VALUE = 'value',
 }
 
 export enum UpdateModalViews {
-  ADD = 'add',
-  Edit = 'edit',
+	ADD = 'add',
+	Edit = 'edit',
 }
 
 export const pageLimits: number[] = [5, 10, 15];
 
 export const webhookEventNames = {
-  'User signup': 'user.signup',
-  'User created': 'user.created',
-  'User login': 'user.login',
-  'User deleted': 'user.deleted',
-  'User access enabled': 'user.access_enabled',
-  'User access revoked': 'user.access_revoked',
+	'User signup': 'user.signup',
+	'User created': 'user.created',
+	'User login': 'user.login',
+	'User deleted': 'user.deleted',
+	'User access enabled': 'user.access_enabled',
+	'User access revoked': 'user.access_revoked',
 };
 
 export const emailTemplateEventNames = {
-  Signup: 'basic_auth_signup',
-  'Magic Link Login': 'magic_link_login',
-  'Update Email': 'update_email',
-  'Forgot Password': 'forgot_password',
-  'Verify Otp': 'verify_otp',
-  'Invite member': 'invite_member',
+	Signup: 'basic_auth_signup',
+	'Magic Link Login': 'magic_link_login',
+	'Update Email': 'update_email',
+	'Forgot Password': 'forgot_password',
+	'Verify Otp': 'verify_otp',
+	'Invite member': 'invite_member',
 };
 
 export enum webhookVerifiedStatus {
-  VERIFIED = 'verified',
-  NOT_VERIFIED = 'not_verified',
-  PENDING = 'verification_pending',
+	VERIFIED = 'verified',
+	NOT_VERIFIED = 'not_verified',
+	PENDING = 'verification_pending',
 }
 
 export const emailTemplateVariables = {
-  'user.id': {
-    description: `User identifier`,
-    value: '{.user.id}}',
-  },
-  'user.email': {
-    description: 'User email address',
-    value: '{.user.email}}',
-  },
-  'user.given_name': {
-    description: `User first name`,
-    value: '{.user.given_name}}',
-  },
-  'user.family_name': {
-    description: `User last name`,
-    value: '{.user.family_name}}',
-  },
-  'user.middle_name': {
-    description: `Middle name of user`,
-    value: '{.user.middle_name}}',
-  },
-  'user.nickname': {
-    description: `Nick name of user`,
-    value: '{.user.nickname}}',
-  },
-  'user.preferred_username': {
-    description: `Username, by default it is email`,
-    value: '{.user.preferred_username}}',
-  },
-  'user.signup_methods': {
-    description: `Comma separated list of methods using which user has signed up`,
-    value: '{.user.signup_methods}}',
-  },
-  'user.email_verified': {
-    description: `Whether email is verified or not`,
-    value: '{.user.email_verified}}',
-  },
-  'user.picture': {
-    description: `URL of the user profile picture`,
-    value: '{.user.picture}}',
-  },
-  'user.roles': {
-    description: `Comma separated list of roles assigned to user`,
-    value: '{.user.roles}}',
-  },
-  'user.gender': {
-    description: `Gender of user`,
-    value: '{.user.gender}}',
-  },
-  'user.birthdate': {
-    description: `BirthDate of user`,
-    value: '{.user.birthdate}}',
-  },
-  'user.phone_number': {
-    description: `Phone number of user`,
-    value: '{.user.phone_number}}',
-  },
-  'user.phone_number_verified': {
-    description: `Whether phone number is verified or not`,
-    value: '{.user.phone_number_verified}}',
-  },
-  'user.created_at': {
-    description: `User created at time`,
-    value: '{.user.created_at}}',
-  },
-  'user.updated_at': {
-    description: `Last updated time at user`,
-    value: '{.user.updated_at}}',
-  },
-  'organization.name': {
-    description: `Organization name`,
-    value: '{.organization.name}}',
-  },
-  'organization.logo': {
-    description: `Organization logo`,
-    value: '{.organization.logo}}',
-  },
-  verification_url: {
-    description: `Verification URL in case of events other than verify otp`,
-    value: '{.verification_url}}',
-  },
-  otp: {
-    description: `OTP sent during login with Multi factor authentication`,
-    value: '{.otp}}',
-  },
+	'user.id': {
+		description: `User identifier`,
+		value: '{.user.id}}',
+	},
+	'user.email': {
+		description: 'User email address',
+		value: '{.user.email}}',
+	},
+	'user.given_name': {
+		description: `User first name`,
+		value: '{.user.given_name}}',
+	},
+	'user.family_name': {
+		description: `User last name`,
+		value: '{.user.family_name}}',
+	},
+	'user.middle_name': {
+		description: `Middle name of user`,
+		value: '{.user.middle_name}}',
+	},
+	'user.nickname': {
+		description: `Nick name of user`,
+		value: '{.user.nickname}}',
+	},
+	'user.preferred_username': {
+		description: `Username, by default it is email`,
+		value: '{.user.preferred_username}}',
+	},
+	'user.signup_methods': {
+		description: `Comma separated list of methods using which user has signed up`,
+		value: '{.user.signup_methods}}',
+	},
+	'user.email_verified': {
+		description: `Whether email is verified or not`,
+		value: '{.user.email_verified}}',
+	},
+	'user.picture': {
+		description: `URL of the user profile picture`,
+		value: '{.user.picture}}',
+	},
+	'user.roles': {
+		description: `Comma separated list of roles assigned to user`,
+		value: '{.user.roles}}',
+	},
+	'user.gender': {
+		description: `Gender of user`,
+		value: '{.user.gender}}',
+	},
+	'user.birthdate': {
+		description: `BirthDate of user`,
+		value: '{.user.birthdate}}',
+	},
+	'user.phone_number': {
+		description: `Phone number of user`,
+		value: '{.user.phone_number}}',
+	},
+	'user.phone_number_verified': {
+		description: `Whether phone number is verified or not`,
+		value: '{.user.phone_number_verified}}',
+	},
+	'user.created_at': {
+		description: `User created at time`,
+		value: '{.user.created_at}}',
+	},
+	'user.updated_at': {
+		description: `Last updated time at user`,
+		value: '{.user.updated_at}}',
+	},
+	'organization.name': {
+		description: `Organization name`,
+		value: '{.organization.name}}',
+	},
+	'organization.logo': {
+		description: `Organization logo`,
+		value: '{.organization.logo}}',
+	},
+	verification_url: {
+		description: `Verification URL in case of events other than verify otp`,
+		value: '{.verification_url}}',
+	},
+	otp: {
+		description: `OTP sent during login with Multi factor authentication`,
+		value: '{.otp}}',
+	},
 };
 
 export const webhookPayloadExample: string = `{