merge backend

backend/src/config/index.ts

@@ -48,3 +48,4 @@ export const getStripeSecretKey = () => infisical.get('STRIPE_SECRET_KEY')!;
 export const getStripeWebhookSecret = () => infisical.get('STRIPE_WEBHOOK_SECRET')!;
 export const getTelemetryEnabled = () => infisical.get('TELEMETRY_ENABLED')! !== 'false' && true;
 export const getLoopsApiKey = () => infisical.get('LOOPS_API_KEY')!;
+export const getSmtpConfigured = () => infisical.get('SMTP_HOST') == '' || infisical.get('SMTP_HOST') == undefined ? false : true

backend/src/controllers/v1/signupController.ts

@@ -7,7 +7,7 @@ import {
 } from '../../helpers/signup';
 import { createToken } from '../../helpers/auth';
 import { BadRequestError } from '../../utils/errors';
-import { getInviteOnlySignup, getJwtSignupLifetime, getJwtSignupSecret } from '../../config';
+import { getInviteOnlySignup, getJwtSignupLifetime, getJwtSignupSecret, getSmtpConfigured } from '../../config';
 
 /**
  * Signup step 1: Initialize account for user under email [email] and send a verification code
@@ -21,7 +21,7 @@ export const beginEmailSignup = async (req: Request, res: Response) => {
 	try {
 		email = req.body.email;
 
-		if (getInviteOnlySignup() || false) {
+		if (getInviteOnlySignup()) {
 			// Only one user can create an account without being invited. The rest need to be invited in order to make an account
 			const userCount = await User.countDocuments({})
 			if (userCount != 0) {
@@ -75,10 +75,12 @@ export const verifyEmailSignup = async (req: Request, res: Response) => {
 		}
 
 		// verify email
-		await checkEmailVerification({
+		if (getSmtpConfigured()) {
-			email,
+			await checkEmailVerification({
-			code
+				email,
-		});
+				code
+			});
+		}
 
 		if (!user) {
 			user = await new User({

backend/src/controllers/v2/authController.ts

@@ -274,75 +274,87 @@ export const sendMfaToken = async (req: Request, res: Response) => {
  * @param res 
  */
 export const verifyMfaToken = async (req: Request, res: Response) => {
-    const { email, mfaToken } = req.body;
+  const { email, mfaToken } = req.body;
 
-    await TokenService.validateToken({
+  await TokenService.validateToken({
-      type: TOKEN_EMAIL_MFA,
+    type: TOKEN_EMAIL_MFA,
-      email,
+    email,
-      token: mfaToken
+    token: mfaToken
-    });
+  });
 
-    const user = await User.findOne({
+  const user = await User.findOne({
-      email
+    email
-    }).select('+salt +verifier +encryptionVersion +protectedKey +protectedKeyIV +protectedKeyTag +publicKey +encryptedPrivateKey +iv +tag');
+  }).select('+salt +verifier +encryptionVersion +protectedKey +protectedKeyIV +protectedKeyTag +publicKey +encryptedPrivateKey +iv +tag');
 
-    if (!user) throw new Error('Failed to find user'); 
+  if (!user) throw new Error('Failed to find user');
 
-     await checkUserDevice({
+  await checkUserDevice({
-      user,
+    user,
-      ip: req.ip,
+    ip: req.ip,
-      userAgent: req.headers['user-agent'] ?? ''
+    userAgent: req.headers['user-agent'] ?? ''
-    });
+  });
 
-    // issue tokens
+  // issue tokens
-    const tokens = await issueAuthTokens({ userId: user._id.toString() });
+  const tokens = await issueAuthTokens({ userId: user._id.toString() });
 
-    // store (refresh) token in httpOnly cookie
+  // store (refresh) token in httpOnly cookie
-    res.cookie('jid', tokens.refreshToken, {
+  res.cookie('jid', tokens.refreshToken, {
-      httpOnly: true,
+    httpOnly: true,
-      path: '/',
+    path: '/',
-      sameSite: 'strict',
+    sameSite: 'strict',
-      secure: getNodeEnv() === 'production' ? true : false
+    secure: getNodeEnv() === 'production' ? true : false
-    });
+  });
 
-    interface VerifyMfaTokenRes {
+  interface VerifyMfaTokenRes {
-      encryptionVersion: number;
+    encryptionVersion: number;
-      protectedKey?: string;
+    protectedKey?: string;
-      protectedKeyIV?: string;
+    protectedKeyIV?: string;
-      protectedKeyTag?: string;
+    protectedKeyTag?: string;
-      token: string;
+    token: string;
-      publicKey: string;
+    publicKey: string;
-      encryptedPrivateKey: string;
+    encryptedPrivateKey: string;
-      iv: string;
+    iv: string;
-      tag: string;
+    tag: string;
-    }
+  }
 
-    const resObj: VerifyMfaTokenRes = {
+  interface VerifyMfaTokenRes {
-      encryptionVersion: user.encryptionVersion,
+    encryptionVersion: number;
-      token: tokens.token,
+    protectedKey?: string;
-      publicKey: user.publicKey as string,
+    protectedKeyIV?: string;
-      encryptedPrivateKey: user.encryptedPrivateKey as string,
+    protectedKeyTag?: string;
-      iv: user.iv as string,
+    token: string;
-      tag: user.tag as string
+    publicKey: string;
-    }
+    encryptedPrivateKey: string;
+    iv: string;
+    tag: string;
+  }
 
-    if (user?.protectedKey && user?.protectedKeyIV && user?.protectedKeyTag) {
+  const resObj: VerifyMfaTokenRes = {
-      resObj.protectedKey = user.protectedKey;
+    encryptionVersion: user.encryptionVersion,
-      resObj.protectedKeyIV = user.protectedKeyIV;
+    token: tokens.token,
-      resObj.protectedKeyTag = user.protectedKeyTag;
+    publicKey: user.publicKey as string,
-    }
+    encryptedPrivateKey: user.encryptedPrivateKey as string,
+    iv: user.iv as string,
+    tag: user.tag as string
+  }
 
-    const loginAction = await EELogService.createAction({
+  if (user?.protectedKey && user?.protectedKeyIV && user?.protectedKeyTag) {
-      name: ACTION_LOGIN,
+    resObj.protectedKey = user.protectedKey;
-      userId: user._id
+    resObj.protectedKeyIV = user.protectedKeyIV;
-    });
+    resObj.protectedKeyTag = user.protectedKeyTag;
+  }
 
-    loginAction && await EELogService.createLog({
+  const loginAction = await EELogService.createAction({
-      userId: user._id,
+    name: ACTION_LOGIN,
-      actions: [loginAction],
+    userId: user._id
-      channel: getChannelFromUserAgent(req.headers['user-agent']),
+  });
-      ipAddress: req.ip
-    });
 
-    return res.status(200).send(resObj); 
+  loginAction && await EELogService.createLog({
+    userId: user._id,
+    actions: [loginAction],
+    channel: getChannelFromUserAgent(req.headers['user-agent']),
+    ipAddress: req.ip
+  });
+
+  return res.status(200).send(resObj);
 }

backend/src/helpers/nodemailer.ts

@@ -3,7 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import handlebars from 'handlebars';
 import nodemailer from 'nodemailer';
-import { getSmtpFromName, getSmtpFromAddress } from '../config';
+import { getSmtpFromName, getSmtpFromAddress, getSmtpConfigured } from '../config';
 
 let smtpTransporter: nodemailer.Transporter;
 
@@ -25,23 +25,25 @@ const sendMail = async ({
   recipients: string[];
   substitutions: any;
 }) => {
-  try {
+  if (getSmtpConfigured()) {
-    const html = fs.readFileSync(
+    try {
-      path.resolve(__dirname, '../templates/' + template),
+      const html = fs.readFileSync(
-      'utf8'
+        path.resolve(__dirname, '../templates/' + template),
-    );
+        'utf8'
-    const temp = handlebars.compile(html);
+      );
-    const htmlToSend = temp(substitutions);
+      const temp = handlebars.compile(html);
+      const htmlToSend = temp(substitutions);
 
-    await smtpTransporter.sendMail({
+      await smtpTransporter.sendMail({
-      from: `"${getSmtpFromName()}" <${getSmtpFromAddress()}>`,
+        from: `"${getSmtpFromName()}" <${getSmtpFromAddress()}>`,
-      to: recipients.join(', '),
+        to: recipients.join(', '),
-      subject: subjectLine,
+        subject: subjectLine,
-      html: htmlToSend
+        html: htmlToSend
-    });
+      });
-  } catch (err) {
+    } catch (err) {
-    Sentry.setUser(null);
+      Sentry.setUser(null);
-    Sentry.captureException(err);
+      Sentry.captureException(err);
+    }
   }
 };
 

backend/src/index.ts

@@ -23,42 +23,42 @@ const swaggerFile = require('../spec.json');
 const requestIp = require('request-ip');
 import { apiLimiter } from './helpers/rateLimiter';
 import {
-  workspace as eeWorkspaceRouter,
+    workspace as eeWorkspaceRouter,
-  secret as eeSecretRouter,
+    secret as eeSecretRouter,
-  secretSnapshot as eeSecretSnapshotRouter,
+    secretSnapshot as eeSecretSnapshotRouter,
-  action as eeActionRouter
+    action as eeActionRouter
 } from './ee/routes/v1';
 import {
-  signup as v1SignupRouter,
+    signup as v1SignupRouter,
-  auth as v1AuthRouter,
+    auth as v1AuthRouter,
-  bot as v1BotRouter,
+    bot as v1BotRouter,
-  organization as v1OrganizationRouter,
+    organization as v1OrganizationRouter,
-  workspace as v1WorkspaceRouter,
+    workspace as v1WorkspaceRouter,
-  membershipOrg as v1MembershipOrgRouter,
+    membershipOrg as v1MembershipOrgRouter,
-  membership as v1MembershipRouter,
+    membership as v1MembershipRouter,
-  key as v1KeyRouter,
+    key as v1KeyRouter,
-  inviteOrg as v1InviteOrgRouter,
+    inviteOrg as v1InviteOrgRouter,
-  user as v1UserRouter,
+    user as v1UserRouter,
-  userAction as v1UserActionRouter,
+    userAction as v1UserActionRouter,
-  secret as v1SecretRouter,
+    secret as v1SecretRouter,
-  serviceToken as v1ServiceTokenRouter,
+    serviceToken as v1ServiceTokenRouter,
-  password as v1PasswordRouter,
+    password as v1PasswordRouter,
-  stripe as v1StripeRouter,
+    stripe as v1StripeRouter,
-  integration as v1IntegrationRouter,
+    integration as v1IntegrationRouter,
-  integrationAuth as v1IntegrationAuthRouter
+    integrationAuth as v1IntegrationAuthRouter
 } from './routes/v1';
 import {
-  signup as v2SignupRouter,
+    signup as v2SignupRouter,
-  auth as v2AuthRouter,
+    auth as v2AuthRouter,
-  users as v2UsersRouter,
+    users as v2UsersRouter,
-  organizations as v2OrganizationsRouter,
+    organizations as v2OrganizationsRouter,
-  workspace as v2WorkspaceRouter,
+    workspace as v2WorkspaceRouter,
-  secret as v2SecretRouter, // begin to phase out
+    secret as v2SecretRouter, // begin to phase out
-  secrets as v2SecretsRouter,
+    secrets as v2SecretsRouter,
-  serviceTokenData as v2ServiceTokenDataRouter,
+    serviceTokenData as v2ServiceTokenDataRouter,
-  apiKeyData as v2APIKeyDataRouter,
+    apiKeyData as v2APIKeyDataRouter,
-  environment as v2EnvironmentRouter,
+    environment as v2EnvironmentRouter,
-  tags as v2TagsRouter,
+    tags as v2TagsRouter,
 } from './routes/v2';
 import { healthCheck } from './routes/status';
 import { getLogger } from './utils/logger';
@@ -73,9 +73,11 @@ import {
 } from './config';
 
 const main = async () => {
-    await infisical.connect({
+    if (process.env.INFISICAL_TOKEN != "" || process.env.INFISICAL_TOKEN != undefined) {
-        token: process.env.INFISICAL_TOKEN!
+        await infisical.connect({
-    });
+            token: process.env.INFISICAL_TOKEN!
+        });
+    }
 
     logTelemetryMessage();
     setTransporter(initSmtp());
@@ -158,7 +160,7 @@ const main = async () => {
 
     //* Handle unrouted requests and respond with proper error message as well as status code
     app.use((req, res, next) => {
-    if (res.headersSent) return next();
+        if (res.headersSent) return next();
         next(RouteNotFoundError({ message: `The requested source '(${req.method})${req.url}' was not found` }))
     })
 

backend/src/routes/status/status.ts

@@ -1,4 +1,5 @@
 import express, { Request, Response } from 'express';
+import { getSmtpConfigured } from '../../config';
 
 const router = express.Router();
 
@@ -8,6 +9,7 @@ router.get(
     res.status(200).json({
       date: new Date(),
       message: 'Ok',
+      emailConfigured: getSmtpConfigured()
     })
   }
 );

frontend/src/components/signup/TeamInviteStep.tsx

@@ -2,10 +2,13 @@ import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 
+import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
+import { usePopUp } from '@app/hooks/usePopUp';
 import addUserToOrg from '@app/pages/api/organization/addUserToOrg';
 import getWorkspaces from '@app/pages/api/workspace/getWorkspaces';
 
 import Button from '../basic/buttons/Button';
+import { EmailServiceSetupModal } from '../v2';
 
 /**
  * This is the last step of the signup flow. People can optionally invite their teammates here.
@@ -14,6 +17,10 @@ export default function TeamInviteStep(): JSX.Element {
   const [emails, setEmails] = useState('');
   const { t } = useTranslation();
   const router = useRouter();
+  const {data: serverDetails } = useFetchServerStatus()
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
+    'setUpEmail'
+  ] as const);
 
   // Redirect user to the getting started page
   const redirectToHome = async () => {
@@ -62,10 +69,20 @@ export default function TeamInviteStep(): JSX.Element {
         </div>
         <Button
           text={t('signup:step5-send-invites') ?? ''}
-          onButtonPressed={() => inviteUsers({ emails })}
+          onButtonPressed={() => {
+            if(serverDetails?.emailConfigured){
+              inviteUsers({ emails })
+            }else{
+              handlePopUpOpen('setUpEmail');
+            }
+          }}
           size="lg"
         />
       </div>
+      <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+      />
     </div>
   );
 }

frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx

@@ -0,0 +1,21 @@
+import { Button } from '../Button';
+import { Modal, ModalContent } from '../Modal';
+
+type Props = {
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+};
+
+export const EmailServiceSetupModal = ({ isOpen, onOpenChange }: Props): JSX.Element => (
+  <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+    <ModalContent title="Email service not configured">
+      <p className="mb-4 text-bunker-300">
+        The administrators of this Infisical instance have not yet set up an email service provider required to perform this action
+      </p>
+      
+      <a href="https://infisical.com/docs/self-hosting/configuration/email">
+        <Button className="mr-4">Learn more</Button>
+      </a>
+    </ModalContent>
+  </Modal>
+);

frontend/src/components/v2/EmailServiceSetupModal/index.tsx

@@ -0,0 +1 @@
+export { EmailServiceSetupModal } from './EmailServiceSetupModal';

frontend/src/components/v2/index.tsx

@@ -3,6 +3,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './DeleteActionModal';
 export * from './Dropdown';
+export * from './EmailServiceSetupModal'
 export * from './EmptyState';
 export * from './FormControl';
 export * from './IconButton';

frontend/src/hooks/api/serverDetails/index.ts

@@ -0,0 +1 @@
+export { useFetchServerStatus } from './queries'

frontend/src/hooks/api/serverDetails/queries.tsx

@@ -0,0 +1,19 @@
+import {useQuery } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { ServerStatus } from './types';
+
+// cache key
+const serverStatusKeys = {
+  serverStatus: ['serverStatus'] as const
+};
+
+const fetchServerStatus = async () => {
+  const {data} = await apiRequest.get<ServerStatus>('/api/status');
+  return data;
+};
+
+export const useFetchServerStatus= () => {
+  return useQuery({ queryKey: serverStatusKeys.serverStatus, queryFn: fetchServerStatus });
+}

frontend/src/hooks/api/serverDetails/types.ts

@@ -0,0 +1,5 @@
+export type ServerStatus = {
+  date: string;
+  message: string;
+  emailConfigured: boolean;
+};

frontend/src/pages/signup.tsx

@@ -13,6 +13,7 @@ import TeamInviteStep from '@app/components/signup/TeamInviteStep';
 import UserInfoStep from '@app/components/signup/UserInfoStep';
 import SecurityClient from '@app/components/utilities/SecurityClient';
 import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
+import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
 
 import checkEmailVerificationCode from './api/auth/CheckEmailVerificationCode';
 import getWorkspaces from './api/workspace/getWorkspaces';
@@ -25,10 +26,12 @@ export default function SignUp() {
   const [password, setPassword] = useState('');
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
-  const [code, setCode] = useState('');
+  const [code, setCode] = useState('123456');
   const [codeError, setCodeError] = useState(false);
   const [step, setStep] = useState(1);
   const router = useRouter();
+  const {data: serverDetails } = useFetchServerStatus()
+
 
   const { t } = useTranslation();
 
@@ -68,6 +71,13 @@ export default function SignUp() {
     }
   };
 
+  // when email service is not configured, skip step 2
+  useEffect(() => {
+    if (!serverDetails?.emailConfigured && step === 2){
+      incrementStep()
+    }
+  }, [step]);
+
   return (
     <div className="bg-bunker-800 h-screen flex flex-col items-center justify-center">
       <Head>

frontend/src/pages/verify-email.tsx

@@ -6,12 +6,19 @@ import Link from 'next/link';
 import Button from '@app/components/basic/buttons/Button';
 import InputField from '@app/components/basic/InputField';
 import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
+import { EmailServiceSetupModal } from '@app/components/v2';
+import { usePopUp } from '@app/hooks';
+import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
 
 import SendEmailOnPasswordReset from './api/auth/SendEmailOnPasswordReset';
 
 export default function VerifyEmail() {
   const [email, setEmail] = useState('');
   const [step, setStep] = useState(1);
+  const {data: serverDetails } = useFetchServerStatus()
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
+    'setUpEmail'
+  ] as const);
 
   /**
    * This function sends the verification email and forwards a user to the next step.
@@ -63,7 +70,13 @@ export default function VerifyEmail() {
           </div>
           <div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
             <div className="text-l mt-6 m-8 px-8 py-3 text-lg">
-              <Button text="Continue" onButtonPressed={sendVerificationEmail} size="lg" />
+              <Button text="Continue" onButtonPressed={()=>{
+                if (serverDetails?.emailConfigured){
+                  sendVerificationEmail()
+                } else {
+                  handlePopUpOpen('setUpEmail');
+                }
+              }} size="lg" />
             </div>
           </div>
         </div>
@@ -80,6 +93,11 @@ export default function VerifyEmail() {
           </div>
         </div>
       )}
+
+      <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+      />
     </div>
   );
 }

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsTable/OrgIncidentContactsTable.tsx

@@ -13,6 +13,7 @@ import * as yup from 'yup';
 import {
   Button,
   DeleteActionModal,
+  EmailServiceSetupModal,
   EmptyState,
   FormControl,
   IconButton,
@@ -28,6 +29,7 @@ import {
   THead,
   Tr} from '@app/components/v2';
 import { usePopUp } from '@app/hooks';
+import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
 import { IncidentContact } from '@app/hooks/api/types';
 
 type Props = {
@@ -50,9 +52,11 @@ export const OrgIncidentContactsTable = ({
   isLoading
 }: Props) => {
   const [searchContact, setSearchContact] = useState('');
+  const {data: serverDetails } = useFetchServerStatus()
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     'addContact',
-    'removeContact'
+    'removeContact',
+    'setUpEmail'
   ] as const);
 
   const {
@@ -92,7 +96,13 @@ export const OrgIncidentContactsTable = ({
         <div>
           <Button
             leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            onClick={() => handlePopUpOpen('addContact')}
+            onClick={() => {
+              if (serverDetails?.emailConfigured){
+                handlePopUpOpen('addContact');
+              } else {
+                handlePopUpOpen('setUpEmail');
+              }
+            }}
           >
             Add Contact
           </Button>
@@ -180,6 +190,10 @@ export const OrgIncidentContactsTable = ({
         onChange={(isOpen) => handlePopUpToggle('removeContact', isOpen)}
         onDeleteApproved={onRemoveIncidentContact}
       />
+      <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+      />
     </div>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -9,7 +9,7 @@ import * as yup from 'yup';
 import {
   Button,
   DeleteActionModal,
-  EmptyState,
+  EmailServiceSetupModal,  EmptyState,
   FormControl,
   IconButton,
   Input,
@@ -28,6 +28,7 @@ import {
   Tr,
   UpgradePlanModal} from '@app/components/v2';
 import { usePopUp } from '@app/hooks';
+import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
 import { OrgUser, Workspace } from '@app/hooks/api/types';
 
 type Props = {
@@ -64,10 +65,12 @@ export const OrgMembersTable = ({
 }: Props) => {
   const router = useRouter();
   const [searchMemberFilter, setSearchMemberFilter] = useState('');
+  const {data: serverDetails } = useFetchServerStatus()
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     'addMember',
     'removeMember',
-    'upgradePlan'
+    'upgradePlan',
+    'setUpEmail'
   ] as const);
 
   const {
@@ -79,8 +82,8 @@ export const OrgMembersTable = ({
 
   const onAddMember = async ({ email }: TAddMemberForm) => {
     await onInviteMember(email);
-    handlePopUpClose('addMember');
+      handlePopUpClose('addMember');
-    reset();
+      reset(); 
   };
 
   const onRemoveOrgMemberApproved = async () => {
@@ -121,10 +124,14 @@ export const OrgMembersTable = ({
           <Button
             leftIcon={<FontAwesomeIcon icon={faPlus} />}
             onClick={() => {
-              if (isMoreUserNotAllowed) {
+              if (serverDetails?.emailConfigured){
-                handlePopUpOpen('upgradePlan');
+                if (isMoreUserNotAllowed) {
+                  handlePopUpOpen('upgradePlan');
+                } else {
+                  handlePopUpOpen('addMember');
+                }
               } else {
-                handlePopUpOpen('addMember');
+                handlePopUpOpen('setUpEmail');
               }
             }}
           >
@@ -291,6 +298,10 @@ export const OrgMembersTable = ({
         onOpenChange={(isOpen) => handlePopUpToggle('upgradePlan', isOpen)}
         text="You can add custom environments if you switch to Infisical's Team plan."
       />
+      <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+      />
     </div>
   );
 };

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
 
 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
-import { Checkbox } from '@app/components/v2';
+import { Checkbox, EmailServiceSetupModal } from '@app/components/v2';
+import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
+import { usePopUp } from '@app/hooks/usePopUp';
 
 import { useGetUser } from '../../../../hooks/api';
 import { User } from '../../../../hooks/api/types';
@@ -11,6 +13,11 @@ export const SecuritySection = () => {
   const [isMfaEnabled, setIsMfaEnabled] = useState(false);
   const { data: user } = useGetUser();
   const { createNotification } = useNotificationContext();
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
+    'setUpEmail'
+  ] as const);
+  
+  const {data: serverDetails } = useFetchServerStatus()
   
   useEffect(() => {
     if (user && typeof user.isMfaEnabled !== 'undefined') {
@@ -42,6 +49,7 @@ export const SecuritySection = () => {
   }
   
   return (
+    <>
     <form>
       <div className="mb-6 mt-2 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
         <p className="mb-4 mt-2 text-xl font-semibold">
@@ -52,12 +60,21 @@ export const SecuritySection = () => {
           id="isTwoFAEnabled"
           isChecked={isMfaEnabled}
           onCheckedChange={(state) => {
-            toggleMfa(state as boolean);
+            if (serverDetails?.emailConfigured){
+              toggleMfa(state as boolean);
+            } else {
+              handlePopUpOpen('setUpEmail');
+            }
           }}
         >
           Enable 2-factor authentication via your personal email.
         </Checkbox>
       </div>
     </form>
+    <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+      />
+    </>
   );
 };