Merge branch 'main' into ENG-3723

2026-10-20 14:42:51 +00:00 · 2025-09-27 01:58:44 -04:00
parent 4b1664c30f 83755d0bba
commit 1c83189978
162 changed files with 7033 additions and 424 deletions
@@ -5,10 +5,12 @@ import { t } from "i18next";

 import Error from "@app/components/basic/Error";
 import TotpRegistration from "@app/components/mfa/TotpRegistration";
+import { createNotification } from "@app/components/notifications";
 import SecurityClient from "@app/components/utilities/SecurityClient";
-import { Button, Input } from "@app/components/v2";
-import { useSendMfaToken } from "@app/hooks/api";
-import { checkUserTotpMfa, verifyMfaToken } from "@app/hooks/api/auth/queries";
+import { Button, Tooltip } from "@app/components/v2";
+import { isInfisicalCloud } from "@app/helpers/platform";
+import { useLogoutUser, useSendMfaToken } from "@app/hooks/api";
+import { checkUserTotpMfa, verifyMfaToken, verifyRecoveryCode } from "@app/hooks/api/auth/queries";
 import { MfaMethod } from "@app/hooks/api/auth/types";

 // The style for the verification code input
@@ -17,10 +19,10 @@ const codeInputProps = {
    fontFamily: "monospace",
    margin: "4px",
    MozAppearance: "textfield",
-    width: "48px",
+    width: "55px",
    borderRadius: "5px",
    fontSize: "24px",
-    height: "48px",
+    height: "55px",
    paddingLeft: "7",
    backgroundColor: "#0d1117",
    color: "white",
@@ -60,11 +62,13 @@ type Props = {

 export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Props) => {
  const [mfaCode, setMfaCode] = useState("");
+  const [showRecoveryCodeInput, setShowRecoveryCodeInput] = useState(false);
  const navigate = useNavigate();
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingResend, setIsLoadingResend] = useState(false);
  const [triesLeft, setTriesLeft] = useState<number | undefined>(undefined);
  const [shouldShowTotpRegistration, setShouldShowTotpRegistration] = useState(false);
+  const logout = useLogoutUser(true);

  const sendMfaToken = useSendMfaToken();

@@ -79,35 +83,57 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
    }
  }, []);

+  const getExpectedCodeLength = () => {
+    if (method === MfaMethod.EMAIL) return 6;
+    if (method === MfaMethod.TOTP) return showRecoveryCodeInput ? 8 : 6;
+    return 6;
+  };
+
+  const isCodeComplete = mfaCode.length === getExpectedCodeLength();
+
  const verifyMfa = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

+    if (!mfaCode.trim() || !isCodeComplete) return;
+
    setIsLoading(true);
    try {
-      const { token } = await verifyMfaToken({
-        email,
-        mfaCode,
-        mfaMethod: method
-      });
+      let result;
+
+      if (method === MfaMethod.TOTP && showRecoveryCodeInput) {
+        result = await verifyRecoveryCode(mfaCode.trim());
+      } else {
+        result = await verifyMfaToken({
+          email,
+          mfaCode: mfaCode.trim(),
+          mfaMethod: method
+        });
+      }

      SecurityClient.setMfaToken("");
-      SecurityClient.setToken(token);
+      SecurityClient.setToken(result.token);

      await successCallback();
      if (closeMfa) {
        closeMfa();
      }
    } catch {
-      if (triesLeft) {
-        setTriesLeft((left) => {
-          if (triesLeft === 1) {
-            navigate({ to: "/" });
-
-            SecurityClient.setMfaToken("");
-            SecurityClient.setToken("");
-          }
-          return (left as number) - 1;
-        });
+      if (typeof triesLeft === "number") {
+        const newTriesLeft = triesLeft - 1;
+        setTriesLeft(newTriesLeft);
+        if (newTriesLeft <= 0) {
+          createNotification({
+            text: "User is temporary locked due to multiple failed login attempts. Try again later. You can also reset your password now to proceed.",
+            type: "error"
+          });
+          setIsLoading(false);
+          SecurityClient.setMfaToken("");
+          SecurityClient.setToken("");
+          SecurityClient.setSignupToken("");
+          await logout.mutateAsync();
+          navigate({ to: "/login" });
+          return;
+        }
      } else {
        setTriesLeft(2);
      }
@@ -147,7 +173,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
  }

  return (
-    <div className="mx-auto w-max pb-4 pt-4 md:mb-16 md:px-8">
+    <div className="mx-auto w-max pb-6 pt-6 md:mb-16 md:px-8">
      {!hideLogo && (
        <Link to="/">
          <div className="mb-4 flex justify-center">
@@ -162,79 +188,134 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
        </>
      )}
      {method === MfaMethod.TOTP && (
-        <>
-          <p className="text-l mb-4 flex max-w-xs justify-center text-center font-bold text-bunker-100">
-            Authenticator MFA Required
+        <div className="mb-8 text-center">
+          <h2 className="mb-3 text-xl font-semibold text-bunker-100">Two-Factor Authentication</h2>
+          <p className="mx-auto max-w-md text-sm leading-relaxed text-bunker-300">
+            {showRecoveryCodeInput
+              ? "Enter one of your backup recovery codes"
+              : "Enter the verification code from your authenticator app"}
          </p>
-          <p className="text-l flex max-w-xs justify-center text-center text-bunker-300">
-            Open the authenticator app on your mobile device to get your verification code or enter
-            a recovery code.
-          </p>
-        </>
+        </div>
      )}
      <form onSubmit={verifyMfa}>
-        <div className="mx-auto hidden w-max min-w-[20rem] md:block">
+        <div className="mx-auto hidden md:block" style={{ minWidth: "600px" }}>
          {method === MfaMethod.EMAIL && (
-            <ReactCodeInput
-              name=""
-              inputMode="tel"
-              type="text"
-              fields={6}
-              onChange={setMfaCode}
-              className="mb-2 mt-6"
-              {...codeInputProps}
-            />
+            <div className="flex justify-center">
+              <ReactCodeInput
+                name=""
+                inputMode="tel"
+                type="text"
+                fields={6}
+                onChange={setMfaCode}
+                className="mb-2 mt-6"
+                {...codeInputProps}
+              />
+            </div>
          )}
          {method === MfaMethod.TOTP && (
-            <div className="mb-4 mt-6">
-              <Input value={mfaCode} onChange={(e) => setMfaCode(e.target.value)} />
+            <div className="mb-6 mt-8 flex justify-center">
+              <ReactCodeInput
+                key={showRecoveryCodeInput ? "recovery" : "totp"}
+                name=""
+                inputMode="tel"
+                type="text"
+                fields={showRecoveryCodeInput ? 8 : 6}
+                onChange={setMfaCode}
+                className="mb-2"
+                {...codeInputProps}
+              />
            </div>
          )}
        </div>
-        <div className="mx-auto mt-4 block w-max min-w-[18rem] md:hidden">
+        <div className="mx-auto mt-4 block md:hidden" style={{ minWidth: "400px" }}>
          {method === MfaMethod.EMAIL && (
-            <ReactCodeInput
-              name=""
-              inputMode="tel"
-              type="text"
-              fields={6}
-              onChange={setMfaCode}
-              className="mb-2 mt-2"
-              {...codeInputPropsPhone}
-            />
+            <div className="flex justify-center">
+              <ReactCodeInput
+                name=""
+                inputMode="tel"
+                type="text"
+                fields={6}
+                onChange={setMfaCode}
+                className="mb-2 mt-2"
+                {...codeInputPropsPhone}
+              />
+            </div>
          )}
          {method === MfaMethod.TOTP && (
-            <div className="mb-4 mt-2">
-              <Input value={mfaCode} onChange={(e) => setMfaCode(e.target.value)} />
+            <div className="mb-6 mt-4 flex justify-center">
+              <ReactCodeInput
+                key={showRecoveryCodeInput ? "recovery-mobile" : "totp-mobile"}
+                name=""
+                inputMode="tel"
+                type="text"
+                fields={showRecoveryCodeInput ? 8 : 6}
+                onChange={setMfaCode}
+                className="mb-2"
+                {...codeInputPropsPhone}
+              />
            </div>
          )}
        </div>
        {typeof triesLeft === "number" && (
          <Error text={`Invalid code. You have ${triesLeft} attempt(s) remaining.`} />
        )}
-        <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
-          <div className="text-l w-full py-1 text-lg">
-            <Button
-              size="sm"
-              type="submit"
-              isFullWidth
-              className="h-14"
-              colorSchema="primary"
-              variant="outline_bg"
-              isLoading={isLoading}
-            >
-              {String(t("mfa.verify"))}
-            </Button>
-          </div>
+        <div className="mx-auto mt-6 flex w-full max-w-sm flex-col items-center justify-center text-center">
+          <Button
+            size="md"
+            type="submit"
+            isFullWidth
+            className="h-11 rounded-lg font-medium shadow-sm transition-all duration-200 hover:shadow-md"
+            colorSchema="primary"
+            variant="outline_bg"
+            isLoading={isLoading}
+            isDisabled={!isCodeComplete || (typeof triesLeft === "number" && triesLeft <= 0)}
+          >
+            {String(t("mfa.verify"))}
+          </Button>
        </div>
      </form>
      {method === MfaMethod.TOTP && (
-        <div className="mt-2 flex flex-row justify-center text-sm text-bunker-400">
-          <Link to="/verify-email">
-            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
-              Lost your recovery codes? Reset your account
-            </span>
-          </Link>
+        <div className="mt-6 flex flex-col items-center gap-4 text-sm">
+          <button
+            type="button"
+            onClick={() => {
+              setShowRecoveryCodeInput(!showRecoveryCodeInput);
+              setMfaCode("");
+            }}
+            className="text-bunker-400 transition-colors duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
+          >
+            {showRecoveryCodeInput ? "Use authenticator code" : "Use a recovery code"}
+          </button>
+          <div className="text-center text-sm">
+            <Tooltip
+              position="bottom"
+              content={
+                <div className="max-w-xs text-center text-xs">
+                  {isInfisicalCloud() ? (
+                    <>
+                      <div className="mb-2">Account Recovery Required</div>
+                      <div className="mb-2 text-gray-300">
+                        Contact support with valid proof of account ownership to initiate recovery
+                      </div>
+                      <div className="mt-1">support@infisical.com</div>
+                    </>
+                  ) : (
+                    <>
+                      <div className="mb-2">Account Recovery Required</div>
+                      <div className="text-gray-300">
+                        Contact your instance administrator with valid proof of account ownership to
+                        initiate recovery
+                      </div>
+                    </>
+                  )}
+                </div>
+              }
+            >
+              <span className="cursor-help text-bunker-400 transition-colors duration-200 hover:text-bunker-200">
+                Lost your recovery codes?
+              </span>
+            </Tooltip>
+          </div>
        </div>
      )}
      {method === MfaMethod.EMAIL && (
@@ -0,0 +1,111 @@
+import { useState } from "react";
+import { faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, Modal, ModalContent } from "../v2";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  recoveryCodes: string[];
+  onDownloadComplete: () => void;
+};
+
+export const RecoveryCodesDownload = ({
+  isOpen,
+  onClose,
+  recoveryCodes,
+  onDownloadComplete
+}: Props) => {
+  const [hasDownloaded, setHasDownloaded] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const downloadRecoveryCodes = () => {
+    const content = [...recoveryCodes].join("\n");
+
+    const blob = new Blob([content], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `infisical-recovery-codes-${new Date().toISOString().split("T")[0]}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    setHasDownloaded(true);
+  };
+
+  const copyToClipboard = async () => {
+    const text = recoveryCodes.join("\n");
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy recovery codes:", err);
+    }
+  };
+
+  const handleClose = () => {
+    if (hasDownloaded) {
+      onDownloadComplete();
+      onClose();
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={hasDownloaded ? handleClose : () => {}}>
+      <ModalContent title="Recovery Codes" className="max-w-md">
+        <div className="space-y-4">
+          <div className="rounded border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
+            Save these codes securely. Each can only be used once.
+          </div>
+
+          <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+            <div className="grid grid-cols-2 gap-x-6 gap-y-2 font-mono text-sm">
+              {recoveryCodes.map((code, index) => (
+                <div key={code} className="flex items-center text-mineshaft-200">
+                  <span className="w-8 text-right text-mineshaft-400">{index + 1}.</span>
+                  <span className="pl-2">{code}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex gap-3">
+            <Button
+              onClick={downloadRecoveryCodes}
+              className="flex flex-1 items-center justify-center gap-2"
+              colorSchema="primary"
+              variant="solid"
+            >
+              <FontAwesomeIcon icon={faDownload} className="mr-2 h-4 w-4" />
+              Download
+            </Button>
+
+            <Button
+              onClick={copyToClipboard}
+              className="flex flex-1 items-center justify-center gap-2"
+              colorSchema="secondary"
+              variant="outline"
+            >
+              <FontAwesomeIcon icon={faCopy} className="mr-2 h-4 w-4" />
+              {copied ? "Copied!" : "Copy"}
+            </Button>
+          </div>
+
+          {hasDownloaded ? (
+            <p className="text-center text-xs text-mineshaft-400">
+              Recovery codes downloaded. You can now close this modal.
+            </p>
+          ) : (
+            <p className="text-center text-xs text-mineshaft-400">
+              Download the recovery codes to continue.
+            </p>
+          )}
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -7,6 +7,7 @@ import { useVerifyUserTotpRegistration } from "@app/hooks/api/users/mutation";

 import { createNotification } from "../notifications";
 import { Button, ContentLoader, Input } from "../v2";
+import { RecoveryCodesDownload } from "./RecoveryCodesDownload";

 type Props = {
  onComplete?: () => Promise<void>;
@@ -19,20 +20,39 @@ const TotpRegistration = ({ onComplete, shouldCenterQr }: Props) => {
    useVerifyUserTotpRegistration();
  const [qrCodeUrl, setQrCodeUrl] = useState("");
  const [totp, setTotp] = useState("");
+  const [showRecoveryModal, setShowRecoveryModal] = useState(false);
+  const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);

  const handleTotpVerify = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
-    await verifyUserTotp({
-      totp
-    });
+    try {
+      const result = await verifyUserTotp({
+        totp
+      });

-    createNotification({
-      text: "Successfully configured mobile authenticator",
-      type: "success"
-    });
+      createNotification({
+        text: "Successfully configured mobile authenticator",
+        type: "success"
+      });

+      if (result.recoveryCodes && result.recoveryCodes.length > 0) {
+        setRecoveryCodes(result.recoveryCodes);
+        setShowRecoveryModal(true);
+      } else if (onComplete) {
+        onComplete();
+      }
+    } catch {
+      createNotification({
+        text: "Failed to verify TOTP code",
+        type: "error"
+      });
+    }
+  };
+
+  const handleRecoveryDownloadComplete = async () => {
+    setShowRecoveryModal(false);
    if (onComplete) {
-      onComplete();
+      await onComplete();
    }
  };

@@ -52,28 +72,37 @@ const TotpRegistration = ({ onComplete, shouldCenterQr }: Props) => {
  }

  return (
-    <div className="flex max-w-lg flex-col text-bunker-200">
-      <div className="mb-8">
-        1. Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR
-        code.
-      </div>
-      <div className={twMerge("mb-8 flex items-center", shouldCenterQr && "justify-center")}>
-        <img src={qrCodeUrl} alt="registration-qr" />
-      </div>
-      <form onSubmit={handleTotpVerify}>
-        <div className="mb-4">2. Enter the resulting verification code</div>
-        <div className="mb-4 flex flex-row gap-2">
-          <Input
-            onChange={(e) => setTotp(e.target.value)}
-            value={totp}
-            placeholder="Verification code"
-          />
-          <Button isLoading={isVerifyLoading} type="submit">
-            Enable MFA
-          </Button>
+    <>
+      <div className="flex max-w-lg flex-col text-bunker-200">
+        <div className="mb-8">
+          1. Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR
+          code.
        </div>
-      </form>
-    </div>
+        <div className={twMerge("mb-8 flex items-center", shouldCenterQr && "justify-center")}>
+          <img src={qrCodeUrl} alt="registration-qr" />
+        </div>
+        <form onSubmit={handleTotpVerify}>
+          <div className="mb-4">2. Enter the resulting verification code</div>
+          <div className="mb-4 flex flex-row gap-2">
+            <Input
+              onChange={(e) => setTotp(e.target.value)}
+              value={totp}
+              placeholder="Verification code"
+            />
+            <Button isLoading={isVerifyLoading} type="submit">
+              Enable MFA
+            </Button>
+          </div>
+        </form>
+      </div>
+
+      <RecoveryCodesDownload
+        isOpen={showRecoveryModal}
+        onClose={() => setShowRecoveryModal(false)}
+        recoveryCodes={recoveryCodes}
+        onDownloadComplete={handleRecoveryDownloadComplete}
+      />
+    </>
  );
 };

@@ -0,0 +1,38 @@
+import { CredentialDisplay } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay";
+
+import { ViewRotationGeneratedCredentialsDisplay } from "./shared";
+import { TRedisCredentialsRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2/types/redis-credentials-rotation";
+
+type Props = {
+  generatedCredentialsResponse: TRedisCredentialsRotationGeneratedCredentialsResponse;
+};
+
+export const ViewRedisCredentialsRotationGeneratedCredentials = ({
+  generatedCredentialsResponse: { generatedCredentials, activeIndex }
+}: Props) => {
+  const inactiveIndex = activeIndex === 0 ? 1 : 0;
+
+  const activeCredentials = generatedCredentials[activeIndex];
+  const inactiveCredentials = generatedCredentials[inactiveIndex];
+
+  return (
+    <ViewRotationGeneratedCredentialsDisplay
+      activeCredentials={
+        <>
+          <CredentialDisplay label="Username">{activeCredentials?.username}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Password">
+            {activeCredentials?.password}
+          </CredentialDisplay>
+        </>
+      }
+      inactiveCredentials={
+        <>
+          <CredentialDisplay label="Username">{inactiveCredentials?.username}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Password">
+            {inactiveCredentials?.password}
+          </CredentialDisplay>
+        </>
+      }
+    />
+  );
+};
@@ -23,6 +23,7 @@ import {
 import { ViewSqlCredentialsRotationGeneratedCredentials } from "./shared";
 import { ViewAwsIamUserSecretRotationGeneratedCredentials } from "./ViewAwsIamUserSecretRotationGeneratedCredentials";
 import { ViewOktaClientSecretRotationGeneratedCredentials } from "./ViewOktaClientSecretRotationGeneratedCredentials";
+import { ViewRedisCredentialsRotationGeneratedCredentials } from "./ViewRedisCredentialsRotationGeneratedCredentials";

 type Props = {
  secretRotation?: TSecretRotationV2;
@@ -107,6 +108,13 @@ const Content = ({ secretRotation }: ContentProps) => {
        />
      );
      break;
+    case SecretRotation.RedisCredentials:
+      Component = (
+        <ViewRedisCredentialsRotationGeneratedCredentials
+          generatedCredentialsResponse={generatedCredentialsResponse}
+        />
+      );
+      break;
    default:
      throw new Error("Unhandled View Generated Credential Rotation Type");
  }
@@ -0,0 +1,197 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FormControl, Input } from "@app/components/v2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import { DEFAULT_PASSWORD_REQUIREMENTS } from "../schemas/shared";
+
+export const RedisCredentialsRotationParametersFields = () => {
+  const { control } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.RedisCredentials;
+    }
+  >();
+
+  return (
+    <>
+      <div>
+        <Controller
+          control={control}
+          name="parameters.permissionScope"
+          defaultValue={""}
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              tooltipClassName="max-w-[40rem] w-full"
+              tooltipText={
+                <div className="flex flex-col gap-4">
+                  <p>
+                    This is the access control permissions that will be set for the issued Redis
+                    users. The format must be a valid Redis ACL pattern.
+                  </p>
+                  <p>
+                    The default value is{" "}
+                    <code className="rounded bg-mineshaft-700 px-1 py-0.5 font-mono font-medium text-bunker-300">
+                      ~* +@all
+                    </code>
+                    . You can modify it to suit your needs.
+                  </p>
+                  <p>
+                    For more information, please refer to the{" "}
+                    <a
+                      className="font-medium text-primary-500 underline hover:text-primary-600"
+                      href="https://redis.io/docs/latest/operate/oss_and_stack/management/security/acl/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Redis ACL documentation
+                    </a>
+                    .
+                  </p>
+                </div>
+              }
+              label="Permission Scope"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input {...field} placeholder="~* +@read @write" />
+            </FormControl>
+          )}
+        />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">Password Requirements</span>
+        </div>
+        <div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded border border-mineshaft-600 bg-mineshaft-700 px-3 pt-3">
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.length"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.length}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Password Length"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The length of the password to generate"
+              >
+                <Input
+                  type="number"
+                  min={1}
+                  max={250}
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.required.digits"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.required.digits}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Digit Count"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="Minimum number of digits"
+              >
+                <Input
+                  type="number"
+                  min={0}
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.required.lowercase"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.required.lowercase}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Lowercase Character Count"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="Minimum number of lowercase characters"
+              >
+                <Input
+                  type="number"
+                  min={0}
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.required.uppercase"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.required.uppercase}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Uppercase Character Count"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="Minimum number of uppercase characters"
+              >
+                <Input
+                  type="number"
+                  min={0}
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.required.symbols"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.required.symbols}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Symbol Count"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="Minimum number of symbols"
+              >
+                <Input
+                  type="number"
+                  min={0}
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="parameters.passwordRequirements.allowedSymbols"
+            defaultValue={DEFAULT_PASSWORD_REQUIREMENTS.allowedSymbols}
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Symbols"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="Symbols to use in generated password"
+              >
+                <Input
+                  placeholder="-_.~!*"
+                  size="sm"
+                  {...field}
+                  onChange={(e) => field.onChange(e.target.value)}
+                />
+              </FormControl>
+            )}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
@@ -9,6 +9,7 @@ import { AzureClientSecretRotationParametersFields } from "./AzureClientSecretRo
 import { LdapPasswordRotationParametersFields } from "./LdapPasswordRotationParametersFields";
 import { OktaClientSecretRotationParametersFields } from "./OktaClientSecretRotationParametersFields";
 import { SqlCredentialsRotationParametersFields } from "./shared";
+import { RedisCredentialsRotationParametersFields } from "./RedisCredentialsRotationParametersFields";

 const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
  [SecretRotation.PostgresCredentials]: SqlCredentialsRotationParametersFields,
@@ -19,7 +20,8 @@ const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
  [SecretRotation.AzureClientSecret]: AzureClientSecretRotationParametersFields,
  [SecretRotation.LdapPassword]: LdapPasswordRotationParametersFields,
  [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationParametersFields,
-  [SecretRotation.OktaClientSecret]: OktaClientSecretRotationParametersFields
+  [SecretRotation.OktaClientSecret]: OktaClientSecretRotationParametersFields,
+  [SecretRotation.RedisCredentials]: RedisCredentialsRotationParametersFields
 };

 export const SecretRotationV2ParametersFields = () => {
@@ -0,0 +1,50 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretRotationReviewSection } from "./shared";
+
+export const RedisCredentialsRotationReviewFields = () => {
+  const { watch } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.RedisCredentials;
+    }
+  >();
+
+  const [parameters, { username, password }] = watch(["parameters", "secretsMapping"]);
+
+  const { passwordRequirements, permissionScope } = parameters;
+  return (
+    <>
+      <SecretRotationReviewSection label="Parameters">
+        <GenericFieldLabel label="Permission Scope">{permissionScope}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+      {passwordRequirements && (
+        <SecretRotationReviewSection label="Password Requirements">
+          <GenericFieldLabel label="Length">{passwordRequirements.length}</GenericFieldLabel>
+          <GenericFieldLabel label="Minimum Digits">
+            {passwordRequirements.required.digits}
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Minimum Lowercase Characters">
+            {passwordRequirements.required.lowercase}
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Minimum Uppercase Characters">
+            {passwordRequirements.required.uppercase}
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Minimum Symbols">
+            {passwordRequirements.required.symbols}
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Allowed Symbols">
+            {passwordRequirements.allowedSymbols}
+          </GenericFieldLabel>
+        </SecretRotationReviewSection>
+      )}
+      <SecretRotationReviewSection label="Secrets Mapping">
+        <GenericFieldLabel label="Username">{username}</GenericFieldLabel>
+        <GenericFieldLabel label="Password">{password}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+    </>
+  );
+};
@@ -12,6 +12,7 @@ import { AzureClientSecretRotationReviewFields } from "./AzureClientSecretRotati
 import { LdapPasswordRotationReviewFields } from "./LdapPasswordRotationReviewFields";
 import { OktaClientSecretRotationReviewFields } from "./OktaClientSecretRotationReviewFields";
 import { SqlCredentialsRotationReviewFields } from "./shared";
+import { RedisCredentialsRotationReviewFields } from "./RedisCredentialsRotationReviewFields";

 const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
  [SecretRotation.PostgresCredentials]: SqlCredentialsRotationReviewFields,
@@ -22,7 +23,8 @@ const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
  [SecretRotation.AzureClientSecret]: AzureClientSecretRotationReviewFields,
  [SecretRotation.LdapPassword]: LdapPasswordRotationReviewFields,
  [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationReviewFields,
-  [SecretRotation.OktaClientSecret]: OktaClientSecretRotationReviewFields
+  [SecretRotation.OktaClientSecret]: OktaClientSecretRotationReviewFields,
+  [SecretRotation.RedisCredentials]: RedisCredentialsRotationReviewFields
 };

 export const SecretRotationV2ReviewFields = () => {
@@ -0,0 +1,58 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FormControl, Input } from "@app/components/v2";
+import { SecretRotation, useSecretRotationV2Option } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretsMappingTable } from "./shared";
+
+export const RedisCredentialsRotationSecretsMappingFields = () => {
+  const { control } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.RedisCredentials;
+    }
+  >();
+
+  const { rotationOption } = useSecretRotationV2Option(SecretRotation.RedisCredentials);
+
+  const items = [
+    {
+      name: "Username",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.username}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.username"
+        />
+      )
+    },
+    {
+      name: "Password",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.password}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.password"
+        />
+      )
+    }
+  ];
+
+  return <SecretsMappingTable items={items} />;
+};
@@ -9,6 +9,7 @@ import { AzureClientSecretRotationSecretsMappingFields } from "./AzureClientSecr
 import { LdapPasswordRotationSecretsMappingFields } from "./LdapPasswordRotationSecretsMappingFields";
 import { OktaClientSecretRotationSecretsMappingFields } from "./OktaClientSecretRotationSecretsMappingFields";
 import { SqlCredentialsRotationSecretsMappingFields } from "./shared";
+import { RedisCredentialsRotationSecretsMappingFields } from "./RedisCredentialsRotationSecretsMappingFields";

 const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
  [SecretRotation.PostgresCredentials]: SqlCredentialsRotationSecretsMappingFields,
@@ -19,7 +20,8 @@ const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
  [SecretRotation.AzureClientSecret]: AzureClientSecretRotationSecretsMappingFields,
  [SecretRotation.LdapPassword]: LdapPasswordRotationSecretsMappingFields,
  [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationSecretsMappingFields,
-  [SecretRotation.OktaClientSecret]: OktaClientSecretRotationSecretsMappingFields
+  [SecretRotation.OktaClientSecret]: OktaClientSecretRotationSecretsMappingFields,
+  [SecretRotation.RedisCredentials]: RedisCredentialsRotationSecretsMappingFields
 };

 export const SecretRotationV2SecretsMappingFields = () => {
@@ -12,6 +12,7 @@ import { LdapPasswordRotationMethod } from "@app/hooks/api/secretRotationsV2/typ

 import { OktaClientSecretRotationSchema } from "./okta-client-secret-rotation-schema";
 import { OracleDBCredentialsRotationSchema } from "./oracledb-credentials-rotation-schema";
+import { RedisCredentialsRotationSchema } from "./redis-credentials-rotation-schema";

 export const SecretRotationV2FormSchema = (isUpdate: boolean) =>
  z
@@ -25,7 +26,8 @@ export const SecretRotationV2FormSchema = (isUpdate: boolean) =>
        OracleDBCredentialsRotationSchema,
        LdapPasswordRotationSchema,
        AwsIamUserSecretRotationSchema,
-        OktaClientSecretRotationSchema
+        OktaClientSecretRotationSchema,
+        RedisCredentialsRotationSchema
      ]),
      z.object({ id: z.string().optional() })
    )
@@ -0,0 +1,20 @@
+import { z } from "zod";
+
+import { BaseSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/base-secret-rotation-v2-schema";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+import { PasswordRequirementsSchema } from "./shared";
+
+export const RedisCredentialsRotationSchema = z
+  .object({
+    type: z.literal(SecretRotation.RedisCredentials),
+    parameters: z.object({
+      passwordRequirements: PasswordRequirementsSchema.optional(),
+      permissionScope: z.string().trim().min(1, "Permission scope is required")
+    }),
+    secretsMapping: z.object({
+      username: z.string().trim().min(1, "Username required"),
+      password: z.string().trim().min(1, "Password required")
+    })
+  })
+  .merge(BaseSecretRotationSchema);
@@ -12,6 +12,7 @@ type Props = {
  isReadOnly?: boolean;
  autoCapitalization?: boolean;
  containerClassName?: string;
+  warning?: ReactNode;
 };

 const inputVariants = cva(
@@ -84,6 +85,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
      size = "md",
      isReadOnly,
      autoCapitalization,
+      warning,
      ...props
    },
    ref
@@ -116,10 +118,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
          onInput={handleInput}
          className={twMerge(
            leftIcon ? "pl-10" : "pl-2.5",
-            rightIcon ? "pr-10" : "pr-2.5",
+            rightIcon || warning ? "pr-10" : "pr-2.5",
            inputVariants({ className, isError, size, isRounded, variant })
          )}
        />
+        {Boolean(warning) && !rightIcon && warning}
        {rightIcon && <span className="absolute right-0 mr-3">{rightIcon}</span>}
      </div>
    );