Fix lint errors, merge conflicts

frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx

@@ -35,7 +35,7 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
     // generate CSRF token for OAuth2 code-token exchange integrations
     const state = crypto.randomBytes(16).toString("hex");
     localStorage.setItem("latestCSRFToken", state);
-
+    
     let link = "";
     switch (integrationOption.slug) {
       case "azure-key-vault":
@@ -86,15 +86,30 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
       case "railway":
         link = `${window.location.origin}/integrations/railway/authorize`;
         break;
+      case "terraform-cloud":
+        link = `${window.location.origin}/integrations/terraform-cloud/authorize`;
+        break;
       case "hashicorp-vault":
         link = `${window.location.origin}/integrations/hashicorp-vault/authorize`;
         break;
       case "cloudflare-pages":
         link = `${window.location.origin}/integrations/cloudflare-pages/authorize`;
         break;
+      case "bitbucket":
+        link = `https://bitbucket.org/site/oauth2/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/bitbucket/oauth2/callback&state=${state}`;
+        break;
       case "codefresh":
         link = `${window.location.origin}/integrations/codefresh/authorize`;
         break;
+      case "digital-ocean-app-platform":
+        link = `${window.location.origin}/integrations/digital-ocean-app-platform/authorize`;
+        break;
+      case "cloud-66":
+        link = `${window.location.origin}/integrations/cloud-66/authorize`;
+        break;
+      case "northflank":
+        link = `${window.location.origin}/integrations/northflank/authorize`;
+        break;
       case "windmill":
         link = `${window.location.origin}/integrations/windmill/authorize`;
         break;

frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx

@@ -32,7 +32,7 @@ export const CloudIntegrationSection = ({
   const isEmpty = !isLoading && !cloudIntegrations?.length;
 
   const sortedCloudIntegrations = cloudIntegrations.sort((a, b) => a.name.localeCompare(b.name));
-
+  
   return (
     <div>
       <div className="m-4 mt-7 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
@@ -67,18 +67,9 @@ export const CloudIntegrationSection = ({
                 width={70}
                 alt="integration logo"
               />
-              {cloudIntegration.name.split(" ").length > 2 ? (
-                <div className="ml-4 max-w-xs text-3xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
-                  <div>{cloudIntegration.name.split(" ")[0]}</div>
-                  <div className="text-base">
-                    {cloudIntegration.name.split(" ")[1]} {cloudIntegration.name.split(" ")[2]}
-                  </div>
-                </div>
-              ) : (
-                <div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
-                  {cloudIntegration.name}
-                </div>
-              )}
+              <div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
+                {cloudIntegration.name}
+              </div>
               {cloudIntegration.isAvailable &&
                 Boolean(integrationAuths?.[cloudIntegration.slug]) && (
                   <div className="absolute top-0 right-0 z-40 h-full">

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -105,7 +105,8 @@ export const IntegrationsSection = ({
                 {(integration.integration === "vercel" ||
                   integration.integration === "netlify" ||
                   integration.integration === "railway" ||
-                  integration.integration === "gitlab") && (
+                  integration.integration === "gitlab" ||
+                  integration.integration === "bitbucket") && (
                   <div className="ml-4 flex flex-col">
                     <FormLabel label="Target Environment" />
                     <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">

frontend/src/views/Login/Login.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import axios from "axios"
+
+import { fetchUserDetails } from "@app/hooks/api/users/queries";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+import { getAuthToken, isLoggedIn } from "@app/reactQuery";
+
+import { 
+    InitialStep,
+    MFAStep,
+    SAMLSSOStep
+} from "./components";
+
+export const Login = () => {
+    const router = useRouter();
+    const [step, setStep] = useState(0);
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    
+    const queryParams = new URLSearchParams(window.location.search)
+    
+    useEffect(() => {
+    // TODO(akhilmhdh): workspace will be controlled by a workspace context
+    const redirectToDashboard = async () => {
+      try {
+        const userOrgs = await getOrganizations();
+        // userWorkspace = userWorkspaces[0] && userWorkspaces[0]._id;
+        const userOrg = userOrgs[0] && userOrgs[0]._id;
+
+        // user details
+        const userDetails = await fetchUserDetails()
+        // send details back to client
+
+        if (queryParams && queryParams.get("callback_port")) {
+          const callbackPort = queryParams.get("callback_port")
+
+          // send post request to cli with details
+          const cliUrl = `http://localhost:${callbackPort}`
+          const instance = axios.create()
+          await instance.post(cliUrl, { email: userDetails.email, privateKey: localStorage.getItem("PRIVATE_KEY"), JTWToken: getAuthToken() })
+        }
+        router.push(`/org/${userOrg}/overview`);
+      } catch (error) {
+        console.log("Error - Not logged in yet");
+      }
+    };
+    if (isLoggedIn()) {
+      redirectToDashboard();
+    }
+  }, []);
+
+    const renderView = () => {
+        switch (step) {
+            case 0:
+                return (
+                    <InitialStep 
+                        setStep={setStep}
+                        email={email}
+                        setEmail={setEmail}
+                        password={password}
+                        setPassword={setPassword}
+                    />
+                );
+            case 1:
+                return (
+                    <MFAStep 
+                        email={email}
+                        password={password}
+                        providerAuthToken={undefined}
+                        callbackPort={queryParams.get("callback_port")}
+                    />
+                );
+            case 2:
+                return (
+                    <SAMLSSOStep setStep={setStep} />
+                );
+            
+            default:
+                return <div />;
+        }
+    }
+    
+    return (
+        <div>
+            {renderView()}
+        </div>
+    );
+}

frontend/src/views/Login/LoginSSO.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import jwt_decode from "jwt-decode";
+
+import {
+    MFAStep,
+    PasswordStep
+} from "./components";
+
+type Props = { 
+    providerAuthToken: string;
+}
+
+export const LoginSSO = ({ providerAuthToken }: Props) => {
+    const [step, setStep] = useState(0);
+    const [password, setPassword] = useState("");
+
+    const {
+        email,
+        isUserCompleted,
+        callbackPort
+    } = jwt_decode(providerAuthToken) as any;
+    
+    useEffect(() => {
+        if (isUserCompleted) {
+            setStep(1);
+        }
+    }, []);
+    
+    const renderView = () => {
+        switch (step) {
+            case 0:
+                return (
+                    <div />
+                );
+            case 1:
+                return (
+                    <PasswordStep 
+                        providerAuthToken={providerAuthToken}
+                        callbackPort={callbackPort}
+                        email={email}
+                        password={password}
+                        setPassword={setPassword}
+                        setStep={setStep}
+                    />
+                );
+            case 2: 
+                return (
+                    <MFAStep 
+                        providerAuthToken={providerAuthToken}
+                        callbackPort={callbackPort}
+                        email={email}
+                        password={password}
+                    />
+                );
+            default:
+                return <div />;
+        }
+    }
+
+    return (
+        <div>
+            {renderView()}
+        </div>
+    );
+}

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -0,0 +1,217 @@
+import { FormEvent, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import axios from "axios"
+
+import Error from "@app/components/basic/Error";
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
+import attemptLogin from "@app/components/utilities/attemptLogin";
+import { Button, Input } from "@app/components/v2";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+
+type Props = {
+    setStep: (step: number) => void;
+    email: string;
+    setEmail: (email: string) => void;
+    password: string;
+    setPassword: (email: string) => void;
+}
+
+export const InitialStep = ({
+    setStep,
+    email,
+    setEmail,
+    password,
+    setPassword
+}: Props) => {
+    const router = useRouter();
+    const { createNotification } = useNotificationContext();
+    const { t } = useTranslation();
+    const [isLoading, setIsLoading] = useState(false);
+    const [loginError, setLoginError] = useState(false);
+    const [loginEmailChosen, setLoginEmailChosen] = useState(false);
+
+    const queryParams = new URLSearchParams(window.location.search);
+
+    const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        try {
+            if (!email || !password) {
+                return;
+            }
+
+            setIsLoading(true);
+            if (queryParams && queryParams.get("callback_port")) {
+                const callbackPort = queryParams.get("callback_port")
+
+                // attemptCliLogin
+                const isCliLoginSuccessful = await attemptCliLogin({
+                    email,
+                    password,
+                })
+
+                if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
+
+                    if (isCliLoginSuccessful.mfaEnabled) {
+                        // case: login requires MFA step
+                        setStep(1);
+                        setIsLoading(false);
+                        return;
+                    }
+                    // case: login was successful
+                    const cliUrl = `http://localhost:${callbackPort}`
+
+                    // send request to server endpoint
+                    const instance = axios.create()
+                    const cliResp = await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse })
+                    console.log(cliResp)
+
+                    // cli page
+                    router.push("/cli-redirect");
+
+                    // on success, router.push to cli Login Successful page
+
+                }
+            } else {
+                const isLoginSuccessful = await attemptLogin({
+                    email,
+                    password,
+                });
+                if (isLoginSuccessful && isLoginSuccessful.success) {
+                    // case: login was successful
+
+                    if (isLoginSuccessful.mfaEnabled) {
+                        // case: login requires MFA step
+                        setStep(1);
+                        setIsLoading(false);
+                        return;
+                    }
+                    const userOrgs = await getOrganizations();
+                    const userOrg = userOrgs[0] && userOrgs[0]._id;
+
+                    // case: login does not require MFA step
+                    createNotification({
+                        text: "Successfully logged in",
+                        type: "success"
+                    });
+                    router.push(`/org/${userOrg}/overview`);
+                }
+            }
+
+
+        } catch (err) {
+            setLoginError(true);
+            createNotification({
+                text: "Login unsuccessful. Double-check your credentials and try again.",
+                type: "error"
+            });
+        }
+
+        setIsLoading(false);
+    }
+
+    return (
+        <form onSubmit={handleLogin} className='flex flex-col mx-auto w-full justify-center items-center'>
+            <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+                <Button
+                    colorSchema="primary" 
+                    variant={loginEmailChosen ? "outline_bg" : "solid"}
+                    onClick={() => {
+                        const callbackPort = queryParams.get("callback_port");
+                        
+                        window.open(`/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
+                        window.close();
+                    }} 
+                    leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
+                    className="h-12 w-full mx-0"
+                > 
+                    {t("login.continue-with-google")}
+                </Button>
+            </div>
+            {loginEmailChosen && <>
+            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
+                <div className='w-full border-t border-mineshaft-500' />
+            </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md'>
+                <Input
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    type="email"
+                    placeholder="Enter your email..."
+                    isRequired
+                    autoComplete="username"
+                    className="h-12"
+                />
+            </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+                <Input
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    type="password"
+                    placeholder="Enter your password..."
+                    isRequired
+                    autoComplete="current-password"
+                    id="current-password"
+                    className="h-12 select:-webkit-autofill:focus"
+                />
+            </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+                <Button
+                    type="submit"
+                    size="sm"
+                    isFullWidth
+                    className='h-12'
+                    colorSchema="primary"
+                    variant="solid"
+                    isLoading={isLoading}
+                > Continue with Email </Button>
+            </div>
+            {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
+            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center mt-4 py-2'>
+                <div className='w-full border-t border-mineshaft-500' />
+            </div></>}
+            {!loginEmailChosen && <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+                <Button
+                    onClick={() => {
+                        setLoginEmailChosen(true);
+                    }}
+                    size="sm"
+                    isFullWidth
+                    className='h-12'
+                    colorSchema="primary"
+                    variant="outline_bg"
+                > Continue with Email </Button>
+            </div>}
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+                <Button
+                    colorSchema="primary"
+                    variant="outline_bg"
+                    onClick={() => {
+                        setStep(2);
+                    }}
+                    isFullWidth
+                    className="h-12 w-full mx-0"
+                >
+                    Continue with SAML SSO
+                </Button>
+            </div>
+            <div className="mt-6 text-bunker-400 text-sm flex flex-row">
+                <span className="mr-1">Don&apos;t have an acount yet?</span>
+                <Link href="/signup">
+                    <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("login.create-account")}</span>
+                </Link>
+            </div>
+            <div className="text-bunker-400 text-sm flex flex-row">
+                <span className="mr-1">Forgot password?</span>
+                <Link href="/verify-email">
+                    <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>Recover your account</span>
+                </Link>
+            </div>
+        </form>
+    );
+}

frontend/src/views/Login/components/InitialStep/index.tsx

@@ -0,0 +1 @@
+export { InitialStep } from "./InitialStep";

frontend/src/views/Login/components/MFAStep/MFAStep.tsx

@@ -0,0 +1,220 @@
+import React, { useState } from "react";
+import ReactCodeInput from "react-code-input";
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
+import axios from "axios"
+
+import Error from "@app/components/basic/Error"; // which to notification
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import attemptCliLoginMfa from "@app/components/utilities/attemptCliLoginMfa"
+import attemptLoginMfa from "@app/components/utilities/attemptLoginMfa";
+import { Button } from "@app/components/v2";    
+import { useSendMfaToken } from "@app/hooks/api/auth";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+
+// The style for the verification code input
+const props = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "48px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "48px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  }
+} as const;
+
+type Props = {
+  email: string;
+  password: string;
+  providerAuthToken?: string;
+  callbackPort?: string | null;
+}
+
+interface VerifyMfaTokenError {
+  response: {
+    data: {
+      context: {
+        code: string;
+        triesLeft: number;
+      };
+    };
+    status: number;
+  };
+}
+
+export const MFAStep = ({
+  email,
+  password,
+  providerAuthToken,
+  callbackPort
+}: Props) => {
+  const { createNotification } = useNotificationContext();
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingResend, setIsLoadingResend] = useState(false);
+  const [mfaCode, setMfaCode] = useState("");
+  const [triesLeft, setTriesLeft] = useState<number | undefined>(undefined);
+
+  const { t } = useTranslation();
+
+  const sendMfaToken = useSendMfaToken();
+
+  const handleLoginMfa = async () => {
+    try {
+      if (mfaCode.length !== 6) {
+        createNotification({
+          text: "Please enter a 6-digit MFA code and try again",
+          type: "error"
+        });
+        return;
+      }
+
+      setIsLoading(true);
+      if (callbackPort){
+
+        // attemptCliLogin
+        const isCliLoginSuccessful = await attemptCliLoginMfa({
+          email,
+          password,
+          providerAuthToken,
+          mfaToken: mfaCode
+        })
+
+        if (isCliLoginSuccessful && isCliLoginSuccessful.success){
+          // case: login was successful
+          const cliUrl = `http://localhost:${callbackPort}`
+
+          // send request to server endpoint 
+          const instance = axios.create()
+          await instance.post(cliUrl,{...isCliLoginSuccessful.loginResponse,email})
+
+          // cli page
+          router.push("/cli-redirect");
+        }
+      } else {
+        const isLoginSuccessful = await attemptLoginMfa({
+          email,
+          password,
+          providerAuthToken,
+          mfaToken: mfaCode
+        });
+  
+        if (isLoginSuccessful) {
+          setIsLoading(false);
+          const userOrgs = await getOrganizations();
+          const userOrg = userOrgs[0] && userOrgs[0]._id;
+
+          // case: login does not require MFA step
+          createNotification({
+              text: "Successfully logged in",
+              type: "success"
+          });
+          router.push(`/org/${userOrg}/overview`);
+        } else {
+          createNotification({
+            text: "Failed to log in",
+            type: "error"
+          });
+        }
+      }
+      
+    } catch (err) {
+      const error = err as VerifyMfaTokenError;
+      createNotification({
+        text: "Failed to log in",
+        type: "error"
+      });
+
+      if (error?.response?.status === 500) {
+        window.location.reload();
+      } else if (error?.response?.data?.context?.triesLeft) {
+        setTriesLeft(error?.response?.data?.context?.triesLeft);
+        if (error.response.data.context.triesLeft === 0) {
+          window.location.reload();
+        }
+      }
+
+      setIsLoading(false);
+    }
+  };
+
+  const handleResendMfaCode = async () => {
+    try {
+      setIsLoadingResend(true);
+      await sendMfaToken.mutateAsync({ email });
+      setIsLoadingResend(false);
+    } catch (err) {
+      console.error(err);
+      setIsLoadingResend(false);
+    }
+  };
+
+    return (
+       <form className="mx-auto w-max md:px-8 pb-4 pt-4 md:mb-16">
+      <p className="text-l flex justify-center text-bunker-300">{t("mfa.step2-message")}</p>
+      <p className="text-l my-1 flex justify-center font-semibold text-bunker-300">{email} </p>
+      <div className="hidden md:block w-max min-w-[20rem] mx-auto">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setMfaCode}
+          {...props}
+          className="mt-6 mb-2"
+        />
+      </div>
+      <div className="block md:hidden w-max mt-4 mx-auto">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setMfaCode}
+          {...props}
+          className="mt-2 mb-2"
+        />
+      </div>
+      {typeof triesLeft === "number" && (
+        <Error text={`${t("mfa.step2-code-error")} ${triesLeft}`} />
+      )}
+      <div className="flex flex-col mt-6 items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
+        <div className="text-l py-1 text-lg w-full">
+          <Button
+            onClick={() => handleLoginMfa()}
+            size="sm"
+            isFullWidth
+            className='h-14'
+            colorSchema="primary"
+            variant="outline_bg"
+            isLoading={isLoading}
+          > {String(t("mfa.verify"))} </Button>
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
+        <div className="flex flex-row items-baseline gap-1 text-sm">
+          <span className="text-bunker-400">{t("signup.step2-resend-alert")}</span>
+          <div className="mt-2 text-bunker-400 text-md flex flex-row">
+            <button disabled={isLoadingResend} onClick={handleResendMfaCode} type="button">
+              <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>
+                {isLoadingResend
+                  ? t("signup.step2-resend-progress")
+                  : t("signup.step2-resend-submit")}
+              </span>
+            </button>
+          </div>
+        </div>
+        <p className="text-sm text-bunker-400 pb-2">{t("signup.step2-spam-alert")}</p>
+      </div>
+    </form> 
+    );
+}

frontend/src/views/Login/components/MFAStep/index.tsx

@@ -0,0 +1 @@
+export { MFAStep } from "./MFAStep";

frontend/src/views/Login/components/PasswordStep/PasswordStep.tsx

@@ -0,0 +1,161 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Link from "next/link";
+import { useRouter } from "next/router"
+import axios from "axios"
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
+import attemptLogin from "@app/components/utilities/attemptLogin";
+import { Button, Input } from "@app/components/v2";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+
+type Props = { 
+    providerAuthToken: string;
+    callbackPort?: string;
+    email: string;
+    password: string;
+    setPassword: (password: string) => void;
+    setStep: (step: number) => void;
+}
+
+export const PasswordStep = ({
+    providerAuthToken,
+    callbackPort,
+    email,
+    password,
+    setPassword,
+    setStep
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const [isLoading, setIsLoading] = useState(false);
+    const { t } = useTranslation();
+    const router = useRouter();
+    
+    const handleLogin = async () => {
+        try {
+            setIsLoading(true);
+            
+            if (callbackPort) {
+                // attemptCliLogin
+                const isCliLoginSuccessful = await attemptCliLogin({
+                    email,
+                    password,
+                    providerAuthToken
+                })
+
+                if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
+
+                    if (isCliLoginSuccessful.mfaEnabled) {
+                        // case: login requires MFA step
+                        setStep(2);
+                        setIsLoading(false);
+                        return;
+                    }
+                    // case: login was successful
+                    const cliUrl = `http://localhost:${callbackPort}`
+
+                    // send request to server endpoint
+                    const instance = axios.create()
+                    await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse })
+
+                    // cli page
+                    router.push("/cli-redirect");
+
+                    // on success, router.push to cli Login Successful page
+                }
+            } else {
+                const loginAttempt = await attemptLogin({
+                    email,
+                    password,
+                    providerAuthToken,
+                });
+
+                if (loginAttempt && loginAttempt.success) {
+                    // case: login was successful
+
+                    if (loginAttempt.mfaEnabled) {
+                        // TODO: deal with MFA
+                        // case: login requires MFA step
+                        setIsLoading(false);
+                        setStep(2);
+                        return;
+                    }
+
+                    // case: login does not require MFA step
+                    const userOrgs = await getOrganizations();
+                    const userOrg = userOrgs[0]._id;
+                    setIsLoading(false);
+                    createNotification({
+                        text: "Successfully logged in",
+                        type: "success"
+                    });
+                    router.push(`/org/${userOrg?._id}/overview`);
+                }
+            }
+        } catch (err) {
+            setIsLoading(false);
+            createNotification({
+                text: "Login unsuccessful. Double-check your master password and try again.",
+                type: "error"
+            });
+            console.error(err);
+        }
+    };
+    
+    return (
+        <form 
+            onSubmit={(e) => e.preventDefault()}
+            className="h-full mx-auto w-full max-w-md px-6 pt-8"
+        >
+            <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
+                What’s your Infisical Password?
+            </p>
+            <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
+                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
+                    <Input
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        type="password"
+                        placeholder="Enter your password..."
+                        isRequired
+                        autoComplete="current-password"
+                        id="current-password"
+                        className="h-12"
+                    />
+                </div>
+            </div>
+            <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[22rem] text-center rounded-md mt-4'>
+                <Button
+                    colorSchema="primary" 
+                    variant="outline_bg"
+                    onClick={async () => handleLogin()} 
+                    isFullWidth
+                    isLoading={isLoading}
+                    className="h-14"
+                > 
+                    {t("login.login")} 
+                </Button>
+            </div>
+            <div className="text-bunker-400 text-xs flex flex-col items-center w-max mx-auto mt-4">
+                <span className='duration-200 max-w-sm text-center px-4'>
+                    Infisical Master Password serves as a decryption mechanism so that even Google is not able to access your secrets.
+                </span>
+                <Link href="/verify-email">
+                    <span className='hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("login.forgot-password")}</span>
+                </Link>
+            </div>
+            <div className="flex flex-row items-center justify-center">
+                <button
+                    onClick={() => {
+                        router.push("/login");
+                    }}
+                    type="button"
+                    className="text-bunker-400 text-xs hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer"
+                >
+                    {t("login.other-option")}
+                </button>
+            </div>
+        </form>
+    );
+}

frontend/src/views/Login/components/PasswordStep/index.tsx

@@ -0,0 +1 @@
+export { PasswordStep } from "./PasswordStep";

frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button, Input } from "@app/components/v2";
+
+type Props = {
+    setStep: (step: number) => void;
+}
+
+export const SAMLSSOStep = ({
+    setStep
+}: Props) => {
+    const [ssoIdentifier, setSSOIdentifier] = useState("");
+    const { t } = useTranslation();
+
+    const queryParams = new URLSearchParams(window.location.search);
+
+    return (
+        <div className="mx-auto w-full max-w-md md:px-6">
+            <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
+                What&apos;s your SSO Identifier?
+            </p>
+            <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
+                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
+                <Input
+                    value={ssoIdentifier}
+                    onChange={(e) => setSSOIdentifier(e.target.value)}
+                    type="text"
+                    placeholder="Enter your SSO identifier..."
+                    isRequired
+                    autoComplete="email"
+                    id="email"
+                    className="h-12"
+                />
+                </div>
+            </div>
+            <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[20rem] md:min-w-[22rem] text-center rounded-md mt-4'>
+                <Button
+                    colorSchema="primary" 
+                    variant="outline_bg"
+                    onClick={() => {
+                        const callbackPort = queryParams.get("callback_port");
+                        window.open(`/api/v1/sso/redirect/saml2/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
+                        window.close();
+                    }} 
+                    isFullWidth
+                    className="h-14"
+                > 
+                    {t("login.login")} 
+                </Button>
+            </div>
+            <div className="flex flex-row items-center justify-center mt-4">
+                <button
+                onClick={() => {
+                    setStep(0);
+                }}
+                type="button"
+                className="text-bunker-300 text-sm hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer"
+                >
+                {t("login.other-option")}
+                </button>
+            </div>
+        </div>
+    );
+}

frontend/src/views/Login/components/SAMLSSOStep/index.tsx

@@ -0,0 +1 @@
+export { SAMLSSOStep } from "./SAMLSSOStep";

frontend/src/views/Login/components/index.tsx

@@ -0,0 +1,6 @@
+export { InitialStep } from "./InitialStep";
+export { MFAStep } from "./MFAStep";
+export { SAMLSSOStep } from "./SAMLSSOStep";
+
+// SSO-specific step
+export { PasswordStep } from "./PasswordStep";

frontend/src/views/Login/index.tsx

@@ -0,0 +1,2 @@
+export { Login } from "./Login";
+export { LoginSSO } from "./LoginSSO";

frontend/src/views/Org/MembersPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
   Button,
   DeleteActionModal,
@@ -26,9 +27,11 @@ import {
   Th,
   THead,
   Tr,
-  UpgradePlanModal} from "@app/components/v2";
-import { useWorkspace } from "@app/context";
+  UpgradePlanModal
+} from "@app/components/v2";
+import { useOrganization , useWorkspace } from "@app/context";
 import { usePopUp, useToggle } from "@app/hooks";
+import { useGetSSOConfig } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { OrgUser, Workspace } from "@app/hooks/api/types";
 
@@ -69,6 +72,9 @@ export const OrgMembersTable = ({
   setCompleteInviteLink
 }: Props) => {
   const router = useRouter();
+  const { createNotification } = useNotificationContext();
+  const { currentOrg } = useOrganization();
+  const { data: ssoConfig, isLoading: isLoadingSSOConfig } = useGetSSOConfig(currentOrg?._id ?? "");
   const [searchMemberFilter, setSearchMemberFilter] = useState("");
   const {data: serverDetails } = useFetchServerStatus()
   const { workspaces } = useWorkspace();
@@ -79,7 +85,7 @@ export const OrgMembersTable = ({
     "upgradePlan",
     "setUpEmail"
   ] as const);
-
+  
   useEffect(() => {
     if (router.query.action === "invite") {
       handlePopUpOpen("addMember");
@@ -152,6 +158,15 @@ export const OrgMembersTable = ({
         <Button
           leftIcon={<FontAwesomeIcon icon={faPlus} />}
           onClick={() => {
+            if (!isLoadingSSOConfig && ssoConfig && ssoConfig.isActive) {
+              createNotification({
+                text: "You cannot invite users when SAML SSO is configured for your organization",
+                type: "error"
+              });
+              
+              return;
+            }
+            
             if (isMoreUserNotAllowed) {
               handlePopUpOpen("upgradePlan");
             } else {

frontend/src/views/Project/IPAllowListPage/IPAllowlistPage.tsx

@@ -0,0 +1,15 @@
+import { IPAllowlistSection } from "./components";
+
+export const IPAllowlistPage = () => {
+    return (
+		<div className="flex justify-center bg-bunker-800 text-white w-full h-full">
+			<div className="max-w-7xl px-6 w-full">
+				<div className="my-6">
+					<p className="text-3xl font-semibold text-gray-200">IP Allowlist</p>
+					<div />
+				</div>
+				<IPAllowlistSection />
+			</div>
+    	</div>
+    );
+}

frontend/src/views/Project/IPAllowListPage/components/IPAllowlistModal.tsx

@@ -0,0 +1,193 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+    useAddTrustedIp,
+    useGetMyIp,
+    useUpdateTrustedIp
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = yup.object({
+    ipAddress: yup.string().required("IP address is required"),
+    comment: yup.string()
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["trustedIp"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["trustedIp"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["trustedIp"]>, state?: boolean) => void;
+};
+
+export const IPAllowlistModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { data, isLoading } = useGetMyIp();
+    
+    const { currentWorkspace } = useWorkspace();
+    const addTrustedIp = useAddTrustedIp();
+    const updateTrustedIp = useUpdateTrustedIp();
+
+    const {
+        control,
+        setValue,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<FormData>({
+        resolver: yupResolver(schema)
+    });
+    
+    useEffect(() => {
+        const trustedIpData = popUp?.trustedIp?.data as { 
+            ipAddress: string;
+            comment: string;
+            prefix: number;
+        };
+
+        if (popUp?.trustedIp?.data) {
+            reset({
+                ipAddress: `${trustedIpData.ipAddress}${trustedIpData.prefix !== undefined ? `/${trustedIpData.prefix}` : ""}`,
+                comment: trustedIpData.comment
+            });
+        } else {
+           reset({
+                ipAddress: "",
+                comment: ""
+            }); 
+        }
+    
+    }, [popUp?.trustedIp?.data]);
+    
+    const onIPAllowlistModalSubmit = async ({
+        ipAddress,
+        comment
+    }: FormData) => {
+        try {
+            if (!currentWorkspace?._id) return;
+            
+            if (popUp?.trustedIp?.data) {
+                await updateTrustedIp.mutateAsync({
+                    workspaceId: currentWorkspace._id,
+                    trustedIpId: (popUp?.trustedIp?.data as { trustedIpId: string })?.trustedIpId,
+                    ipAddress,
+                    comment,
+                    isActive: true
+                });
+            } else {
+                await addTrustedIp.mutateAsync({
+                    workspaceId: currentWorkspace._id,
+                    ipAddress,
+                    comment,
+                    isActive: true
+                });
+            }
+            
+            createNotification({
+                text: `Successfully ${popUp?.trustedIp?.data ? "updated" : "added"} trusted IP`,
+                type: "success"
+            });
+            
+            reset();
+            handlePopUpClose("trustedIp");
+        } catch (err) {
+            createNotification({
+                text: `Failed to ${popUp?.trustedIp?.data ? "update" : "add"} trusted IP`,
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <Modal
+            isOpen={popUp?.trustedIp?.isOpen}
+            onOpenChange={(isOpen) => {
+                handlePopUpToggle("trustedIp", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title={popUp?.trustedIp?.data ? "Update IP" : "Add IP"}>
+            <form onSubmit={handleSubmit(onIPAllowlistModalSubmit)}>
+                <Controller
+                    control={control}
+                    defaultValue=""
+                    name="ipAddress"
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                            label="IPv4/IPv6 Address / CIDR Notation"
+                            isError={Boolean(error)}
+                            errorText={error?.message}
+                        >
+                        <Input 
+                            {...field} 
+                            placeholder="123.456.789.0"
+                        />
+                        </FormControl>
+                    )}
+                />
+                {!isLoading && data && (
+                    <Button
+                        colorSchema="secondary"
+                        type="button"
+                        onClick={() => setValue("ipAddress", data)}
+                        className="mb-8"
+                    >
+                        Add current IP address
+                    </Button>
+                )}
+                <Controller
+                    control={control}
+                    defaultValue=""
+                    name="comment"
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                            label="Comment"
+                            isError={Boolean(error)}
+                            errorText={error?.message}
+                        >
+                        <Input 
+                            {...field} 
+                            placeholder="My IP address"
+                        />
+                        </FormControl>
+                    )}
+                />
+                <div className="mt-8 flex items-center">
+                <Button
+                    className="mr-4"
+                    size="sm"
+                    type="submit"
+                    isLoading={isSubmitting}
+                    isDisabled={isSubmitting}
+                >
+                    {popUp?.trustedIp?.data ? "Update" : "Add"}
+                </Button>
+                <Button 
+                    colorSchema="secondary" 
+                    variant="plain"
+                    onClick={() => handlePopUpClose("trustedIp")}
+                >
+                    Cancel
+                </Button>
+                </div>
+            </form>
+            </ModalContent>
+        </Modal> 
+    );
+}

frontend/src/views/Project/IPAllowListPage/components/IPAllowlistSection.tsx

@@ -0,0 +1,105 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { 
+    Button,
+    DeleteActionModal,
+    UpgradePlanModal
+} from "@app/components/v2";
+import { useSubscription,useWorkspace } from "@app/context";
+import {
+    useDeleteTrustedIp
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { IPAllowlistModal } from "./IPAllowlistModal";
+import { IPAllowlistTable } from "./IPAllowlistTable";
+
+export const IPAllowlistSection = () => {
+    const { createNotification } = useNotificationContext();
+    const { mutateAsync } = useDeleteTrustedIp();
+    const { subscription } = useSubscription();
+    const { currentWorkspace } = useWorkspace();
+    
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+        "trustedIp",
+        "deleteTrustedIp",
+        "upgradePlan"
+    ] as const);
+    
+    const onDeleteTrustedIpSubmit = async (trustedIpId: string) => {
+        try {
+            
+            if (!currentWorkspace?._id) return;
+
+            await mutateAsync({
+                workspaceId: currentWorkspace._id,
+                trustedIpId
+            });
+
+            createNotification({
+                text: "Successfully deleted IP access range",
+                type: "success"
+            });
+
+            handlePopUpClose("deleteTrustedIp");
+        } catch (err) {
+            console.log(err);
+            createNotification({
+                text: "Failed to delete IP access range",
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
+            <div className="flex items-center mb-8">
+                <h2 className="text-xl font-semibold flex-1 text-white">
+                    IP Allowlist
+                </h2>
+                <Button
+                    onClick={() => {
+                        if (subscription?.ipAllowlisting) {
+                            handlePopUpOpen("trustedIp")
+                        } else {
+                            handlePopUpOpen("upgradePlan");
+                        }
+                    }}
+                    colorSchema="secondary"
+                    isLoading={false}
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                >
+                    Add IP
+                </Button>
+            </div>
+            <IPAllowlistTable 
+                popUp={popUp} 
+                handlePopUpOpen={handlePopUpOpen}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+            <IPAllowlistModal 
+                popUp={popUp}
+                handlePopUpClose={handlePopUpClose}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+            <DeleteActionModal
+                isOpen={popUp.deleteTrustedIp.isOpen}
+                title={`Are you sure want to delete ${
+                (popUp?.deleteTrustedIp?.data as { name: string })?.name || " "
+                }?`}
+                onChange={(isOpen) => handlePopUpToggle("deleteTrustedIp", isOpen)}
+                deleteKey="confirm"
+                onDeleteApproved={() => 
+                    onDeleteTrustedIpSubmit((popUp?.deleteTrustedIp?.data as { trustedIpId: string })?.trustedIpId)
+                }
+            />
+            <UpgradePlanModal
+                isOpen={popUp.upgradePlan.isOpen}
+                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+                text="You can use IP allowlisting if you switch to Infisical's Pro plan."
+            />
+        </div>
+    );
+}

frontend/src/views/Project/IPAllowListPage/components/IPAllowlistTable.tsx

@@ -0,0 +1,162 @@
+import { faGlobe, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+    EmptyState,
+    IconButton,
+    Table,
+    TableContainer,
+    TableSkeleton,
+    TBody,
+    Td,
+    Th,
+    THead,
+    Tr,
+    UpgradePlanModal
+} from "@app/components/v2";
+import { useSubscription, useWorkspace } from "@app/context";
+import {
+    useGetTrustedIps
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+    popUp: UsePopUpState<["upgradePlan"]>;
+    handlePopUpOpen: (
+        popUpName: keyof UsePopUpState<["trustedIp", "deleteTrustedIp", "upgradePlan"]>,
+        data?: {
+            trustedIpId: string;
+            ipAddress?: string;
+            comment?: string;
+            isActive?: boolean;
+            prefix?: number;
+        },
+    ) => void;
+    handlePopUpToggle: (popUpName: keyof UsePopUpState<["upgradePlan"]>, state?: boolean) => void;
+};
+
+export const IPAllowlistTable = ({
+    popUp,
+    handlePopUpOpen,
+    handlePopUpToggle
+}: Props) => {
+    const { subscription } = useSubscription();
+    const { currentWorkspace } = useWorkspace();
+    const { data, isLoading } = useGetTrustedIps(currentWorkspace?._id ?? "");
+    
+    const formatType = (type: string, prefix?: number) => {
+        return `${type.slice(0, 2).toUpperCase() + type.slice(2)} ${(prefix !== undefined) ? "CIDR" : ""}`;
+    }
+    
+    return (
+        <div>
+            <TableContainer className="mt-4">
+                <Table>
+                    <THead>
+                        <Tr>
+                            <Th className="flex-1">IP Address / Range</Th>
+                            <Th className="flex-1">Format</Th>
+                            <Th className="flex-1">Comment</Th>
+                            {/* <Th className="flex-1">Status</Th> */}
+                            <Th className="w-5" />
+                        </Tr>
+                    </THead>
+                    <TBody>
+                        {!isLoading && data && data?.length > 0 && data
+                            .sort((a, b) => a.ipAddress.localeCompare(b.ipAddress))
+                            .map(({
+                            _id,
+                            ipAddress,
+                            comment,
+                            type,
+                            prefix,
+                            isActive
+                        }) => {
+                            return (
+                                <Tr 
+                                    key={`ip-access-range-${_id}`} 
+                                    className="h-10"
+                                >
+                                    <Td>
+                                        {`${ipAddress}${(prefix !== undefined) ? `/${prefix}` : ""}`}
+                                    </Td>
+                                    <Td>
+                                        {formatType(type, prefix)}
+                                    </Td>
+                                    <Td>
+                                        {comment}
+                                    </Td>
+                                    {/* <Td>
+                                        <div className="flex items-center">
+                                            <FontAwesomeIcon 
+                                                icon={faCircle} 
+                                                color="#2ecc71"
+                                            /> 
+                                            <p className="ml-4">Active</p>
+                                        </div>
+                                    </Td> */}
+                                    <Td className="flex items-center">
+                                        <IconButton
+                                            className="mr-3 py-2"
+                                            onClick={() => {
+                                               if (subscription?.ipAllowlisting) {
+                                                    handlePopUpOpen("trustedIp", {
+                                                    trustedIpId: _id,
+                                                    ipAddress,
+                                                    comment,
+                                                    prefix,
+                                                    isActive
+                                                });
+                                                } else {
+                                                    handlePopUpOpen("upgradePlan");
+                                                } 
+                                            }}
+                                            colorSchema="primary"
+                                            variant="plain"
+                                            ariaLabel="update"
+                                        >
+                                            <FontAwesomeIcon icon={faPencil} />
+                                        </IconButton>
+                                        <IconButton
+                                            onClick={() => {
+                                                if (subscription?.ipAllowlisting) {
+                                                    handlePopUpOpen("deleteTrustedIp", {
+                                                        trustedIpId: _id
+                                                    });
+                                                } else {
+                                                    handlePopUpOpen("upgradePlan");
+                                                }
+                                            }}
+                                            size="lg"
+                                            colorSchema="danger"
+                                            variant="plain"
+                                            ariaLabel="update"
+                                        >
+                                            <FontAwesomeIcon icon={faXmark} />
+                                        </IconButton>
+                                    </Td>
+                                </Tr>
+                            );
+                        })}
+                        {isLoading && <TableSkeleton columns={4} key="ip-access-ranges" />}
+                        {!isLoading && data && data?.length === 0 && (
+                            <Tr>
+                                <Td colSpan={5}>
+                                    <EmptyState 
+                                        title="No IP addresses added" 
+                                        icon={faGlobe}
+                                    />
+                                </Td>
+                            </Tr>
+                        )}
+                    </TBody>
+                </Table>
+            </TableContainer>
+            <UpgradePlanModal
+                isOpen={popUp.upgradePlan.isOpen}
+                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+                text="You can use IP allowlisting if you switch to Infisical's Pro plan."
+            />
+        </div>
+    );
+}

frontend/src/views/Project/IPAllowListPage/components/index.tsx

@@ -0,0 +1 @@
+export { IPAllowlistSection } from "./IPAllowlistSection";

frontend/src/views/Project/IPAllowListPage/index.tsx

@@ -0,0 +1 @@
+export { IPAllowlistPage } from "./IPAllowlistPage";

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx

@@ -7,7 +7,8 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { 
     Button,
     FormControl,
-    Input} from "@app/components/v2";
+    Input
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { 
     useGetOrgBillingDetails,

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx

@@ -29,7 +29,7 @@ export const PmtMethodsSection = () => {
         <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
             <div className="flex items-center mb-8">
                 <h2 className="text-xl font-semibold flex-1 text-white">
-                    Payment Methods
+                    Payment methods
                 </h2>
                 <Button
                     onClick={handleAddPmtMethodBtnClick}

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsTable.tsx

@@ -11,7 +11,8 @@ import {
   Td,
   Th,
   THead,
-  Tr} from "@app/components/v2";
+  Tr
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { 
     useDeleteOrgPmtMethod,

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDModal.tsx

@@ -10,7 +10,8 @@ import {
   Modal,
   ModalContent,
   Select,
-  SelectItem} from "@app/components/v2";
+  SelectItem
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useAddOrgTaxId } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -138,22 +139,22 @@ export const TaxIDModal = ({
                     defaultValue="eu_vat"
                     render={({ field: { onChange, ...field }, fieldState: { error } }) => (
                         <FormControl
-                        label="Type"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
+                            label="Type"
+                            errorText={error?.message}
+                            isError={Boolean(error)}
                         >
-                        <Select
-                            defaultValue={field.value}
-                            {...field}
-                            onValueChange={(e) => onChange(e)}
-                            className="w-full"
-                        >
-                            {taxIDTypes.map(({ label, value }) => (
-                            <SelectItem value={String(value || "")} key={label}>
-                                {label}
-                            </SelectItem>
-                            ))}
-                        </Select>
+                            <Select
+                                defaultValue={field.value}
+                                {...field}
+                                onValueChange={(e) => onChange(e)}
+                                className="w-full"
+                            >
+                                {taxIDTypes.map(({ label, value }) => (
+                                    <SelectItem value={String(value || "")} key={label}>
+                                        {label}
+                                    </SelectItem>
+                                ))}
+                            </Select>
                         </FormControl>
                     )}
                 />
@@ -163,9 +164,9 @@ export const TaxIDModal = ({
                     name="value"
                     render={({ field, fieldState: { error } }) => (
                         <FormControl
-                        label="Value"
-                        isError={Boolean(error)}
-                        errorText={error?.message}
+                            label="Value"
+                            isError={Boolean(error)}
+                            errorText={error?.message}
                         >
                         <Input 
                             {...field} 

frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/InvoicesTable.tsx

@@ -11,7 +11,8 @@ import {
   Td,
   Th,
   THead,
-  Tr} from "@app/components/v2";
+  Tr
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { 
     useGetOrgInvoices

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

@@ -1,10 +1,6 @@
 import { useTranslation } from "react-i18next";
 
-import {
-  OrgIncidentContactsSection,
-  OrgNameChangeSection,
-  OrgServiceAccountsTable
-} from "./components";
+import { OrgTabGroup } from "./components";
 
 export const OrgSettingsPage = () => {
   const { t } = useTranslation();
@@ -15,11 +11,7 @@ export const OrgSettingsPage = () => {
 			<div className="mb-4">
 				<p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
 			</div>
-			<OrgNameChangeSection />
-			<OrgIncidentContactsSection />
-			<div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-				<OrgServiceAccountsTable />
-			</div>
+			<OrgTabGroup />
 		</div>
     </div>
   );

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

@@ -0,0 +1,9 @@
+import { OrgSSOSection } from "./OrgSSOSection";
+
+export const OrgAuthTab = () => {
+    return (
+        <div>
+            <OrgSSOSection />
+        </div>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx

@@ -0,0 +1,119 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import { 
+    useGetSSOConfig,
+    useUpdateSSOConfig
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { SSOModal } from "./SSOModal";
+
+const ssoAuthProviderMap: { [key: string]: string } = {
+    "okta-saml": "Okta SAML 2.0"
+}
+
+export const OrgSSOSection = (): JSX.Element => {
+    const { currentOrg } = useOrganization();
+    const { subscription } = useSubscription();
+    const { createNotification } = useNotificationContext();
+    const { data, isLoading } = useGetSSOConfig(currentOrg?._id ?? "");
+    const { mutateAsync } = useUpdateSSOConfig();
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+        "upgradePlan",
+        "addSSO"
+    ] as const);
+    
+    const handleSamlSSOToggle = async (value: boolean) => {
+        try {
+            if (!currentOrg?._id) return;
+
+            await mutateAsync({
+                organizationId: currentOrg?._id,
+                isActive: value
+            });
+
+            createNotification({
+                text: `Successfully ${value ? "enabled" : "disabled"} SAML SSO`,
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${value ? "enable" : "disable"} SAML SSO`,
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
+            <div className="flex items-center mb-8">
+                <h2 className="text-xl font-semibold flex-1 text-white">
+                    SAML SSO Configuration
+                </h2>
+                {!isLoading && (
+                    <Button
+                        onClick={() => {
+                            if (subscription?.samlSSO) {
+                                handlePopUpOpen("addSSO");
+                            } else {
+                                handlePopUpOpen("upgradePlan");
+                            }
+                        }}
+                        colorSchema="secondary"
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    >
+                        {data ? "Update SAML SSO" : "Set up SAML SSO"}
+                    </Button> 
+                )}
+            </div>
+            {!isLoading && data && (
+                <>
+                    <div className="mb-4">
+                        <Switch
+                            id="enable-saml-sso"
+                            onCheckedChange={(value) => handleSamlSSOToggle(value)}
+                            isChecked={data.isActive}
+                        >
+                            Enable SAML SSO
+                        </Switch>
+                    </div>
+                    <div className="mb-4">
+                        <h3 className="text-mineshaft-400 text-sm">SSO identifier</h3>
+                        <p className="text-gray-400 text-md">{data._id}</p>
+                    </div>
+                    <div className="mb-4">
+                        <h3 className="text-mineshaft-400 text-sm">Type</h3>
+                        <p className="text-gray-400 text-md">{ssoAuthProviderMap[data.authProvider]}</p>
+                    </div>
+                    <div className="mb-4">
+                        <h3 className="text-mineshaft-400 text-sm">Audience</h3>
+                        <p className="text-gray-400 text-md">{data.audience}</p>
+                    </div>
+                    <div className="mb-4">
+                        <h3 className="text-mineshaft-400 text-sm">Entrypoint</h3>
+                        <p className="text-gray-400 text-md">{data.entryPoint}</p>
+                    </div>
+                    <div className="mb-4">
+                        <h3 className="text-mineshaft-400 text-sm">Issuer</h3>
+                        <p className="text-gray-400 text-md">{data.issuer}</p>
+                    </div>
+                </>
+            )}
+            <SSOModal 
+                popUp={popUp}
+                handlePopUpClose={handlePopUpClose}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+            <UpgradePlanModal
+                isOpen={popUp.upgradePlan.isOpen}
+                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+                text="You can use SAML SSO if you switch to Infisical's Pro plan."
+            />
+        </div>
+    );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx

@@ -0,0 +1,253 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    Input,
+    Modal,
+    ModalContent,
+    Select,
+    SelectItem,
+    TextArea} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+    useCreateSSOConfig,
+    useGetSSOConfig,
+    useUpdateSSOConfig
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const ssoAuthProviders = [
+    { label: "Okta SAML 2.0", value: "okta-saml" }
+];
+
+const schema = yup.object({
+    authProvider: yup.string().required("SSO Type is required"),
+    entryPoint: yup.string().required("IDP entrypoint is required"),
+    issuer: yup.string().required("Issuer string is required"),
+    cert: yup.string().required("IDP's public signing certificate is required"),
+    audience: yup.string().required("Expected SAML response audience is required"),
+}).required();
+
+export type AddSSOFormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["addSSO"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["addSSO"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addSSO"]>, state?: boolean) => void;
+};
+
+export const SSOModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+    const { currentOrg } = useOrganization();
+    const { createNotification } = useNotificationContext();
+    const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateSSOConfig();
+    const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateSSOConfig();
+    const { data } = useGetSSOConfig(currentOrg?._id ?? "");
+    
+    const {
+        control,
+        handleSubmit,
+        reset,
+        watch,
+    } = useForm<AddSSOFormData>({
+        defaultValues: {
+            authProvider: "okta-saml"
+        },
+        resolver: yupResolver(schema)
+    });
+    
+    useEffect(() => {
+        if (data) {
+            reset({
+                authProvider: data?.authProvider ?? "",
+                entryPoint: data?.entryPoint ?? "",
+                issuer: data?.issuer ?? "",
+                cert: data?.cert ?? "",
+                audience: data?.audience ?? ""
+            });
+        }
+    }, [data]);
+    
+    const onSSOModalSubmit = async ({
+        authProvider,
+        entryPoint,
+        issuer,
+        cert,
+        audience
+    }: AddSSOFormData) => {
+        try {
+            if (!currentOrg) return;
+            
+            if (!data) {
+                await createMutateAsync({
+                    organizationId: currentOrg._id,
+                    authProvider,
+                    isActive: false,
+                    entryPoint,
+                    issuer,
+                    cert,
+                    audience
+                });
+            } else {
+                await updateMutateAsync({
+                    organizationId: currentOrg._id,
+                    authProvider,
+                    isActive: false,
+                    entryPoint,
+                    issuer,
+                    cert,
+                    audience 
+                });
+            }
+
+            handlePopUpClose("addSSO");
+
+            createNotification({
+                text: `Successfully ${!data ? "added" : "updated"} SAML SSO configuration`,
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${!data ? "add" : "update"} SAML SSO configuration`,
+                type: "error"
+            });
+        }
+    }
+
+    const authProvider = watch("authProvider");
+
+    return (
+        <Modal
+            isOpen={popUp?.addSSO?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("addSSO", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Add SSO">
+                <form onSubmit={handleSubmit(onSSOModalSubmit)}>
+                    <Controller
+                        control={control}
+                        name="authProvider"
+                        defaultValue="okta-saml"
+                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                            <FormControl
+                                label="Type"
+                                errorText={error?.message}
+                                isError={Boolean(error)}
+                            >
+                                <Select
+                                    defaultValue={field.value}
+                                    {...field}
+                                    onValueChange={(e) => onChange(e)}
+                                    className="w-full"
+                                >
+                                    {ssoAuthProviders.map(({ label, value }) => (
+                                        <SelectItem value={String(value || "")} key={label}>
+                                            {label}
+                                        </SelectItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        )}
+                    />
+                    {authProvider && authProvider === "okta-saml" && (
+                        <>
+                            <Controller
+                                control={control}
+                                name="audience"
+                                render={({ field, fieldState: { error } }) => (
+                                    <FormControl
+                                        label="Audience"
+                                        errorText={error?.message}
+                                        isError={Boolean(error)}
+                                    >
+                                        <Input 
+                                            {...field} 
+                                            placeholder="https://your-domain.com"
+                                        />
+                                    </FormControl>
+                                )}
+                            />
+                            <Controller
+                                control={control}
+                                name="entryPoint"
+                                render={({ field, fieldState: { error } }) => (
+                                    <FormControl
+                                        label="Entrypoint"
+                                        errorText={error?.message}
+                                        isError={Boolean(error)}
+                                    >
+                                        <Input 
+                                            {...field} 
+                                            placeholder="https://your-domain.okta.com/app/app-name/xxx/sso/saml"
+                                        />
+                                    </FormControl>
+                                )}
+                            />
+                            <Controller
+                                control={control}
+                                name="issuer"
+                                render={({ field, fieldState: { error } }) => (
+                                    <FormControl
+                                        label="Issuer"
+                                        errorText={error?.message}
+                                        isError={Boolean(error)}
+                                    >
+                                        <Input 
+                                            {...field} 
+                                            placeholder="http://www.okta.com/xxx"
+                                        />
+                                    </FormControl>
+                                )}
+                            />
+                            <Controller
+                                control={control}
+                                name="cert"
+                                render={({ field, fieldState: { error } }) => (
+                                    <FormControl
+                                        label="Certificate"
+                                        errorText={error?.message}
+                                        isError={Boolean(error)}
+                                    >
+                                        <TextArea 
+                                            {...field} 
+                                            placeholder="-----BEGIN CERTIFICATE----- ..."
+                                        />
+                                    </FormControl>
+                                )}
+                            />
+                        </>
+                    )}
+                    
+                    <div className="mt-8 flex items-center">
+                        <Button
+                            className="mr-4"
+                            size="sm"
+                            type="submit"
+                            isLoading={createIsLoading || updateIsLoading}
+                        >
+                            {!data ? "Add" : "Update"}
+                        </Button>
+                        <Button 
+                            colorSchema="secondary" 
+                            variant="plain"
+                            onClick={() => handlePopUpClose("addSSO")}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </ModalContent>
+        </Modal>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/index.tsx

@@ -0,0 +1 @@
+export { OrgAuthTab } from "./OrgAuthTab";

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

@@ -0,0 +1,15 @@
+import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
+import { OrgNameChangeSection } from "../OrgNameChangeSection";
+import { OrgServiceAccountsTable } from "../OrgServiceAccountsTable";
+
+export const OrgGeneralTab = () => {
+    return (
+        <div>
+            <OrgNameChangeSection />
+			<div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
+				<OrgServiceAccountsTable />
+			</div>
+			<OrgIncidentContactsSection />
+        </div>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/index.tsx

@@ -0,0 +1 @@
+export { OrgGeneralTab } from "./OrgGeneralTab";

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

@@ -17,7 +17,7 @@ export const OrgIncidentContactsSection = () => {
     ] as const);
 
     return (
-        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+        <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
             <div className="flex justify-between mb-4">
                 <p className="min-w-max text-xl font-semibold">
                     {t("section.incident.incident-contacts")}

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

@@ -0,0 +1,59 @@
+import { Fragment } from "react"
+import { Tab } from "@headlessui/react"
+
+import { useOrganization,useUser } from "@app/context";
+import {
+    useGetOrgUsers
+} from "@app/hooks/api";
+
+import { OrgAuthTab } from "../OrgAuthTab";
+import { OrgGeneralTab } from "../OrgGeneralTab";
+
+export const OrgTabGroup = () => {
+    const { currentOrg } = useOrganization();
+    const { user } = useUser();
+    const { data } = useGetOrgUsers(currentOrg?._id ?? "");
+
+    const isRoleSufficient = data?.some((orgUser) => {
+        return orgUser.role !== "member" && orgUser.user._id === user._id;
+    });
+
+    const tabs = [
+        { name: "General", key: "tab-org-general" },
+    ];
+        
+    if (isRoleSufficient) {
+        tabs.push(
+            { name: "Authentication", key: "tab-org-auth" }
+        );
+    }
+
+    return (
+        <Tab.Group>
+            <Tab.List className="mb-6 border-b-2 border-mineshaft-800 w-full">
+                {tabs.map((tab) => (
+                    <Tab as={Fragment} key={tab.key}> 
+                        {({ selected }) => (
+                            <button 
+                                type="button"
+                                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
+                            >
+                                {tab.name}
+                            </button>
+                        )}
+                    </Tab>
+                ))}
+            </Tab.List>
+            <Tab.Panels>
+                <Tab.Panel>
+                    <OrgGeneralTab />
+                </Tab.Panel>
+                {isRoleSufficient && (
+                    <Tab.Panel>
+                        <OrgAuthTab />
+                    </Tab.Panel>
+                )}
+            </Tab.Panels>
+        </Tab.Group>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/index.tsx

@@ -0,0 +1 @@
+export { OrgTabGroup } from "./OrgTabGroup";

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

@@ -1,3 +1 @@
-export { OrgIncidentContactsSection } from "./OrgIncidentContactsSection";
-export { OrgNameChangeSection } from "./OrgNameChangeSection";
-export { OrgServiceAccountsTable } from "./OrgServiceAccountsTable";
+export { OrgTabGroup } from "./OrgTabGroup";

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

@@ -0,0 +1,132 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    Select,
+    SelectItem} from "@app/components/v2";
+import { useUser } from "@app/context";
+import {
+    useUpdateUserAuthProvider
+} from "@app/hooks/api";
+
+const authMethods = [
+    { label: "Email", value: "email" },
+    { label: "Google SSO", value: "google" },
+    { label: "Okta SAML 2.0", value: "okta-saml" },
+];
+
+const schema = yup.object({
+    authMethod: yup.string().required("Auth method is required")
+});
+
+export type FormData = yup.InferType<typeof schema>;
+
+export const AuthMethodSection = () => {
+    const { createNotification } = useNotificationContext();
+    const { user } = useUser();
+    const { mutateAsync, isLoading } = useUpdateUserAuthProvider();
+    
+    const {
+        reset,
+        control,
+        handleSubmit
+    } = useForm<FormData>({
+        defaultValues: {
+            authMethod: user?.authProvider ?? "email" 
+        },
+        resolver: yupResolver(schema)
+    });
+    
+    useEffect(() => {
+        if (user) {
+            reset({
+                authMethod: user?.authProvider ?? "email"
+            });
+        }
+    }, [user]);
+
+    const onFormSubmit = async ({
+        authMethod
+    }: FormData) => {
+        try {
+            if (authMethod === "okta-saml") {
+                createNotification({
+                    text: "Okta SAML 2.0 can only be configured in your organization settings",
+                    type: "error"
+                });
+                
+                return;
+            }
+            
+            await mutateAsync({
+                authProvider: authMethod
+            });
+            
+            createNotification({
+                text: "Successfully updated authentication method",
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to update authentication method",
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <form 
+            className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+            onSubmit={handleSubmit(onFormSubmit)}
+        >
+           <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
+                Authentication Method
+            </h2> 
+            <div className="max-w-md mb-4">
+                <Controller
+                    control={control}
+                    name="authMethod"
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                        <FormControl
+                            className="mb-0"
+                            errorText={error?.message}
+                            isError={Boolean(error)}
+                        >
+                            <Select
+                                defaultValue={field.value}
+                                {...field}
+                                onValueChange={(e) => onChange(e)}
+                                className="w-full bg-mineshaft-800 border border-mineshaft-600"
+                            >
+                                {authMethods.map((authMethod) => {
+                                    return (
+                                        <SelectItem 
+                                            value={authMethod.value} 
+                                            key={`auth-method-${authMethod.value}`}
+                                        >
+                                            {authMethod.label}
+                                        </SelectItem>
+                                    );
+                                })}
+                        </Select>
+                        </FormControl>
+                    )}
+                />
+            </div>
+            <Button
+                type="submit"
+                colorSchema="secondary"
+                isLoading={isLoading}
+                isDisabled={isLoading}
+            >
+                Save
+            </Button>
+        </form>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/index.tsx

@@ -0,0 +1 @@
+export { AuthMethodSection } from "./AuthMethodSection";

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

@@ -0,0 +1,13 @@
+import { AuthMethodSection } from "../AuthMethodSection";
+import { ChangePasswordSection } from "../ChangePasswordSection";
+import { MFASection } from "../SecuritySection";
+
+export const PersonalAuthTab = () => {
+    return (
+        <div>
+            <MFASection />
+            <AuthMethodSection />
+            <ChangePasswordSection />
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/index.tsx

@@ -0,0 +1 @@
+export { PersonalAuthTab } from "./PersonalAuthTab";

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

@@ -1,18 +1,14 @@
 import { ChangeLanguageSection } from "../ChangeLanguageSection";
-import { ChangePasswordSection } from "../ChangePasswordSection";
 import { EmergencyKitSection } from "../EmergencyKitSection";
-import { SecuritySection } from "../SecuritySection";
 import { SessionsSection } from "../SessionsSection";
 import { UserNameSection } from "../UserNameSection";
 
-export const PersonalSecurityTab = () => {
+export const PersonalGeneralTab = () => {
     return (
         <div>
             <UserNameSection />
             <ChangeLanguageSection />
-            <SecuritySection />
             <SessionsSection />
-            <ChangePasswordSection />
             <EmergencyKitSection />
         </div>
     );

frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/index.tsx

@@ -0,0 +1 @@
+export { PersonalGeneralTab } from "./PersonalGeneralTab";

frontend/src/views/Settings/PersonalSettingsPage/PersonalSecurityTab/index.tsx

@@ -1 +0,0 @@
-export { PersonalSecurityTab } from "./PersonalSecurityTab";

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

@@ -2,10 +2,12 @@ import { Fragment } from "react"
 import { Tab } from "@headlessui/react"
 
 import { PersonalAPIKeyTab } from "../PersonalAPIKeyTab";
-import { PersonalSecurityTab } from "../PersonalSecurityTab";
+import { PersonalAuthTab } from "../PersonalAuthTab";
+import { PersonalGeneralTab } from "../PersonalGeneralTab";
 
 const tabs = [
-    { name: "General", key: "tab-account-security" },
+    { name: "General", key: "tab-account-general" },
+    { name: "Authentication", key: "tab-account-auth" },
     { name: "API Keys", key: "tab-account-api-keys" }
 ];
 
@@ -28,7 +30,10 @@ export const PersonalTabGroup = () => {
             </Tab.List>
             <Tab.Panels>
                 <Tab.Panel>
-                    <PersonalSecurityTab />
+                    <PersonalGeneralTab />
+                </Tab.Panel>
+                <Tab.Panel>
+                    <PersonalAuthTab />
                 </Tab.Panel>
                 <Tab.Panel>
                     <PersonalAPIKeyTab />

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

@@ -9,7 +9,7 @@ import { useGetUser } from "../../../../hooks/api";
 import { User } from "../../../../hooks/api/types";
 import updateMyMfaEnabled from "../../../../pages/api/user/updateMyMfaEnabled";
 
-export const SecuritySection = () => {
+export const MFASection = () => {
   const [isMfaEnabled, setIsMfaEnabled] = useState(false);
   const { data: user } = useGetUser();
   const { createNotification } = useNotificationContext();

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

@@ -1 +1 @@
-export { SecuritySection } from "./SecuritySection";
+export { MFASection } from "./MFASection";

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

@@ -55,7 +55,7 @@ export const UserNameSection = (): JSX.Element => {
       className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
     >
         <p className="text-xl font-semibold text-mineshaft-100 mb-4">
-          User name
+          Name
         </p>
         <div className="mb-2 max-w-md">
           <Controller

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentTable.tsx

@@ -18,7 +18,7 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
     handlePopUpOpen: (
-        popUpName: keyof UsePopUpState<["updateEnv", "deleteEnv", "deleteEnv", "upgradePlan"]>,
+        popUpName: keyof UsePopUpState<["updateEnv", "deleteEnv", "upgradePlan"]>,
         {
             name,
             slug

frontend/src/views/Signup/SignupSSO.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import jwt_decode from "jwt-decode";
+
+import {
+    BackupPDFStep,
+    UserInfoSSOStep} from "./components";
+
+type Props = { 
+    providerAuthToken: string;
+}
+
+export const SignupSSO = ({
+    providerAuthToken
+}: Props) => {
+    const [step, setStep] = useState(0);
+    const [password, setPassword] = useState("");
+
+    const {
+        email,
+        organizationName,
+        firstName,
+        lastName
+    } = jwt_decode(providerAuthToken) as any;
+
+    const renderView = () => {
+        switch (step) {
+            case 0:
+                return (
+                    <UserInfoSSOStep 
+                        email={email}
+                        name={`${firstName} ${lastName}`}
+                        providerOrganizationName={organizationName}
+                        password={password}
+                        setPassword={setPassword}
+                        setStep={setStep}
+                        providerAuthToken={providerAuthToken}
+                    />
+                );
+            case 1:
+                return (
+                    <BackupPDFStep 
+                        email={email}
+                        password={password}
+                        name={`${firstName} ${lastName}`}
+                    />
+                );
+            default:
+                return <div />
+        }
+    }
+    
+    return (
+        <div>
+            {renderView()}
+        </div>
+    );
+}

frontend/src/views/Signup/components/BackupPDFStep/BackupPDFStep.tsx

@@ -0,0 +1,66 @@
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router"
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
+import { Button } from "@app/components/v2";
+
+interface DownloadBackupPDFStepProps {
+    email: string;
+    password: string;
+    name: string;
+}
+
+/**
+ * This is the step of the signup flow where the user downloads the backup pdf
+ * @param {object} obj
+ * @param {function} obj.incrementStep - function that moves the user on to the next stage of signup
+ * @param {string} obj.email - user's email
+ * @param {string} obj.password - user's password
+ * @param {string} obj.name - user's name
+ * @returns
+ */
+export const BackupPDFStep = ({
+    email,
+    password,
+    name
+}: DownloadBackupPDFStepProps) => {
+    const { t } = useTranslation();
+    const router = useRouter();
+
+  return (
+    <div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
+      <p className="text-xl text-center font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />{t("signup.step4-message")}
+      </p>
+      <div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">
+        <div className="w-full mt-4 md:mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 lg:w-1/6 w-full md:min-w-[23rem] px-3 mx-auto">
+          <span className='mb-2'>{t("signup.step4-description1")} {t("signup.step4-description3")}</span>
+        </div>
+        <div className="flex flex-col items-center px-3 justify-center mt-0 md:mt-4 mb-2 md:mb-4 lg:w-1/6 w-full md:min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
+          <div className="text-l py-1 text-lg w-full">
+            <Button
+              onClick={async () => {
+                await issueBackupKey({
+                  email,
+                  password,
+                  personalName: name,
+                  setBackupKeyError: () => { },
+                  setBackupKeyIssued: () => { }
+                });
+
+                router.push(`/org/${localStorage.getItem("orgData.id")}/overview`);
+              }}
+              size="sm"
+              isFullWidth
+              className='h-12'
+              colorSchema="primary"
+              variant="outline_bg"
+            > Download PDF </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/views/Signup/components/BackupPDFStep/index.tsx

@@ -0,0 +1 @@
+export { BackupPDFStep } from "./BackupPDFStep";

frontend/src/views/Signup/components/UserInfoSSOStep/UserInfoSSOStep.tsx

@@ -0,0 +1,320 @@
+
+import crypto from "crypto";
+
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import jsrp from "jsrp";
+import nacl from "tweetnacl";
+import { encodeBase64 } from "tweetnacl-util";
+
+import InputField from "@app/components/basic/InputField";
+import checkPassword from "@app/components/utilities/checks/checkPassword";
+import Aes256Gcm from "@app/components/utilities/cryptography/aes-256-gcm";
+import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
+import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLocalStorage";
+import SecurityClient from "@app/components/utilities/SecurityClient";
+import { Button, Input } from "@app/components/v2";
+import { useGetCommonPasswords } from "@app/hooks/api";
+import completeAccountInformationSignup from "@app/pages/api/auth/CompleteAccountInformationSignup";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+import ProjectService from "@app/services/ProjectService";
+
+// eslint-disable-next-line new-cap
+const client = new jsrp.client();
+
+type Props = {
+    setStep: (step: number) => void;
+    email: string;
+    password: string;
+    setPassword: (value: string) => void;
+    name: string;
+    providerOrganizationName: string;
+    providerAuthToken?: string;
+}
+
+type Errors = {
+  length?: string,
+  upperCase?: string,
+  lowerCase?: string,
+  number?: string,
+  specialChar?: string,
+  repeatedChar?: string,
+};
+
+/**
+ * This is the step of the sign up flow where people provife their name/surname and password
+ * @param {object} obj
+ * @param {string} obj.verificationToken - the token which we use to verify the legitness of a user
+ * @param {string} obj.incrementStep - a function to move to the next signup step
+ * @param {string} obj.email - email of a user who is signing up
+ * @param {string} obj.password - user's password
+ * @param {string} obj.setPassword - function managing the state of user's password
+ * @param {string} obj.firstName - user's first name
+ * @param {string} obj.setFirstName  - function managing the state of user's first name
+ * @param {string} obj.lastName - user's lastName
+ * @param {string} obj.setLastName - function managing the state of user's last name
+ */
+export const UserInfoSSOStep = ({
+  email,
+  name,
+  providerOrganizationName,
+  password,
+  setPassword,
+  setStep,
+  providerAuthToken,
+}: Props) => {
+  const { data: commonPasswords } = useGetCommonPasswords();
+  const [nameError, setNameError] = useState(false);
+  const [organizationName, setOrganizationName] = useState("");
+  const [organizationNameError, setOrganizationNameError] = useState(false);
+  const [attributionSource, setAttributionSource] = useState("");
+  const [errors, setErrors] = useState<Errors>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (providerOrganizationName !== undefined) {
+      setOrganizationName(providerOrganizationName);
+    }
+  }, []);
+
+  // Verifies if the information that the users entered (name, workspace)
+  // is there, and if the password matches the criteria.
+  const signupErrorCheck = async () => {
+    setIsLoading(true);
+    let errorCheck = false;
+    if (!name) {
+      setNameError(true);
+      errorCheck = true;
+    } else {
+      setNameError(false);
+    }
+    if (!organizationName) {
+      setOrganizationNameError(true);
+      errorCheck = true;
+    } else {
+      setOrganizationNameError(false);
+    }
+    
+    errorCheck = checkPassword({
+      password,
+      commonPasswords,
+      setErrors
+    });
+
+    if (!errorCheck) {
+      // Generate a random pair of a public and a private key
+      const pair = nacl.box.keyPair();
+      const secretKeyUint8Array = pair.secretKey;
+      const publicKeyUint8Array = pair.publicKey;
+      const privateKey = encodeBase64(secretKeyUint8Array);
+      const publicKey = encodeBase64(publicKeyUint8Array);
+      localStorage.setItem("PRIVATE_KEY", privateKey);
+
+      client.init(
+        {
+          username: email,
+          password
+        },
+        async () => {
+          client.createVerifier(async (err: any, result: { salt: string; verifier: string }) => {
+            try {
+              // TODO: moduralize into KeyService
+              const derivedKey = await deriveArgonKey({
+                password,
+                salt: result.salt,
+                mem: 65536,
+                time: 3,
+                parallelism: 1,
+                hashLen: 32
+              });
+
+              if (!derivedKey) throw new Error("Failed to derive key from password");
+
+              const key = crypto.randomBytes(32);
+
+              // create encrypted private key by encrypting the private
+              // key with the symmetric key [key]
+              const {
+                ciphertext: encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag
+              } = Aes256Gcm.encrypt({
+                text: privateKey,
+                secret: key
+              });
+
+              // create the protected key by encrypting the symmetric key
+              // [key] with the derived key
+              const {
+                ciphertext: protectedKey,
+                iv: protectedKeyIV,
+                tag: protectedKeyTag
+              } = Aes256Gcm.encrypt({
+                text: key.toString("hex"),
+                secret: Buffer.from(derivedKey.hash)
+              });
+
+              const response = await completeAccountInformationSignup({
+                email,
+                firstName: name.split(" ")[0],
+                lastName: name.split(" ").slice(1).join(" "),
+                protectedKey,
+                protectedKeyIV,
+                protectedKeyTag,
+                publicKey,
+                encryptedPrivateKey,
+                encryptedPrivateKeyIV,
+                encryptedPrivateKeyTag,
+                providerAuthToken,
+                salt: result.salt,
+                verifier: result.verifier,
+                organizationName,
+                attributionSource
+              });
+
+              // unset signup JWT token and set JWT token
+              SecurityClient.setSignupToken("");
+              SecurityClient.setToken(response.token);
+              SecurityClient.setProviderAuthToken("");
+
+              saveTokenToLocalStorage({
+                publicKey,
+                encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag,
+                privateKey
+              });
+
+              const userOrgs = await getOrganizations();
+              const orgId = userOrgs[0]?._id;
+              const project = await ProjectService.initProject({
+                organizationId: orgId,
+                projectName: "Example Project"
+              });
+
+              localStorage.setItem("orgData.id", orgId);
+              localStorage.setItem("projectData.id", project._id);
+
+                setStep(1);
+            } catch (error) {
+              setIsLoading(false);
+              console.error(error);
+            }
+          });
+        }
+      );
+    } else {
+      setIsLoading(false);
+    }
+  };
+  
+  return (
+    <div className="h-full mx-auto mb-36 w-max rounded-xl md:px-8 md:mb-16">
+      <p className="mx-8 mb-6 flex justify-center text-xl font-bold text-medium md:mx-16 text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+        {t("signup.step3-message")}
+      </p>
+      <div className="h-full mx-auto mb-36 w-max rounded-xl py-6 md:px-8 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800">
+        <div className="relative z-0 lg:w-1/6 w-1/4 min-w-[20rem] flex flex-col items-center justify-end w-full py-2 rounded-lg">
+          <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Your Name</p>
+          <Input
+            placeholder="Jane Doe"
+            value={name}
+            disabled
+            isRequired
+            autoComplete="given-name"
+            className="h-12"
+          />
+          {nameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your name</p>}
+        </div>
+        {providerOrganizationName === undefined && (
+          <div className="relative z-0 lg:w-1/6 w-1/4 min-w-[20rem] flex flex-col items-center justify-end w-full py-2 rounded-lg">
+            <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Organization Name</p>
+            <Input
+              placeholder="Infisical"
+              value={organizationName}
+              onChange={(e) => setOrganizationName(e.target.value)}
+              isRequired
+              className="h-12"
+              disabled
+            />
+            {organizationNameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your organization name</p>}
+          </div>
+        )}
+        {providerOrganizationName === undefined && (
+          <div className="relative z-0 lg:w-1/6 w-1/4 min-w-[20rem] flex flex-col items-center justify-end w-full py-2 rounded-lg">
+            <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Where did you hear about us? <span className="font-light">(optional)</span></p>
+            <Input
+              placeholder=""
+              onChange={(e) => setAttributionSource(e.target.value)}
+              value={attributionSource}
+              className="h-12"
+            />
+          </div>
+        )}
+        <div className="mt-2 flex lg:w-1/6 w-1/4 min-w-[20rem] max-h-60 w-full flex-col items-center justify-center rounded-lg py-2">
+          <InputField
+            label={t("section.password.password")}
+            onChangeHandler={(pass: string) => {
+              setPassword(pass);
+              checkPassword({
+                password: pass,
+                commonPasswords,
+                setErrors
+              });
+            }}
+            type="password"
+            value={password}
+            isRequired
+            error={Object.keys(errors).length > 0}
+            autoComplete="new-password"
+            id="new-password"
+          />
+          {Object.keys(errors).length > 0 && (
+            <div className="mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-2 py-2">
+              <div className="mb-2 text-sm text-gray-400">{t("section.password.validate-base")}</div> 
+              {Object.keys(errors).map((key) => {
+                if (errors[key as keyof Errors]) {
+                  return (
+                    <div 
+                      className="ml-1 flex flex-row items-top justify-start"
+                      key={key}
+                    >
+                      <div>
+                        <FontAwesomeIcon 
+                          icon={faXmark} 
+                          className="text-md text-red ml-0.5 mr-2.5"
+                        />
+                      </div>
+                      <p className="text-gray-400 text-sm">
+                        {errors[key as keyof Errors]} 
+                      </p>
+                    </div>
+                  );
+                }
+
+                return null;
+              })}
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
+          <div className="text-l py-1 text-lg w-full">
+            <Button
+              type="submit"
+              onClick={signupErrorCheck}
+              size="sm"
+              isFullWidth
+              className='h-14'
+              colorSchema="primary"
+              variant="outline_bg"
+              isLoading={isLoading}
+            > {String(t("signup.signup"))} </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/views/Signup/components/UserInfoSSOStep/index.tsx

@@ -0,0 +1 @@
+export { UserInfoSSOStep } from "./UserInfoSSOStep";

frontend/src/views/Signup/components/index.tsx

@@ -0,0 +1,2 @@
+export { BackupPDFStep } from "./BackupPDFStep";
+export { UserInfoSSOStep } from "./UserInfoSSOStep";

frontend/src/views/Signup/index.tsx

@@ -0,0 +1 @@
+export { SignupSSO } from "./SignupSSO";