Merge pull request #1925 from Infisical/feat/add-captcha

feat: added captcha to password login

.env.example

@@ -63,3 +63,7 @@ CLIENT_SECRET_GITHUB_LOGIN=
 
 CLIENT_ID_GITLAB_LOGIN=
 CLIENT_SECRET_GITLAB_LOGIN=
+
+CAPTCHA_SECRET=
+
+NEXT_PUBLIC_CAPTCHA_SITE_KEY=

Dockerfile.standalone-infisical

@@ -1,6 +1,7 @@
 ARG POSTHOG_HOST=https://app.posthog.com
 ARG POSTHOG_API_KEY=posthog-api-key
 ARG INTERCOM_ID=intercom-id
+ARG CAPTCHA_SITE_KEY=captcha-site-key
 
 FROM  node:20-alpine AS base
 
@@ -34,7 +35,9 @@ ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
 ARG INTERCOM_ID
 ENV NEXT_PUBLIC_INTERCOM_ID $INTERCOM_ID
 ARG INFISICAL_PLATFORM_VERSION
-ENV NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION $INFISICAL_PLATFORM_VERSION 
+ENV NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION $INFISICAL_PLATFORM_VERSION
+ARG CAPTCHA_SITE_KEY
+ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY $CAPTCHA_SITE_KEY 
 
 # Build
 RUN npm run build
@@ -110,6 +113,9 @@ ENV NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY \
 ARG INTERCOM_ID=intercom-id
 ENV NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID \
   BAKED_NEXT_PUBLIC_INTERCOM_ID=$INTERCOM_ID
+ARG CAPTCHA_SITE_KEY
+ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY \
+  BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY
 
 WORKDIR / 
 

backend/src/db/migrations/20240606073539_add-consecutive-failed-password-attempts-user.ts

@@ -0,0 +1,29 @@
+import { Knex } from "knex";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasConsecutiveFailedPasswordAttempts = await knex.schema.hasColumn(
+    TableName.Users,
+    "consecutiveFailedPasswordAttempts"
+  );
+
+  await knex.schema.alterTable(TableName.Users, (tb) => {
+    if (!hasConsecutiveFailedPasswordAttempts) {
+      tb.integer("consecutiveFailedPasswordAttempts").defaultTo(0);
+    }
+  });
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasConsecutiveFailedPasswordAttempts = await knex.schema.hasColumn(
+    TableName.Users,
+    "consecutiveFailedPasswordAttempts"
+  );
+
+  await knex.schema.alterTable(TableName.Users, (tb) => {
+    if (hasConsecutiveFailedPasswordAttempts) {
+      tb.dropColumn("consecutiveFailedPasswordAttempts");
+    }
+  });
+}

backend/src/db/schemas/users.ts

@@ -25,7 +25,8 @@ export const UsersSchema = z.object({
   isEmailVerified: z.boolean().default(false).nullable().optional(),
   consecutiveFailedMfaAttempts: z.number().default(0).nullable().optional(),
   isLocked: z.boolean().default(false).nullable().optional(),
-  temporaryLockDateEnd: z.date().nullable().optional()
+  temporaryLockDateEnd: z.date().nullable().optional(),
+  consecutiveFailedPasswordAttempts: z.number().default(0).nullable().optional()
 });
 
 export type TUsers = z.infer<typeof UsersSchema>;

backend/src/lib/config/env.ts

@@ -120,7 +120,8 @@ const envSchema = z
       .transform((val) => val === "true")
       .optional(),
     INFISICAL_CLOUD: zodStrBool.default("false"),
-    MAINTENANCE_MODE: zodStrBool.default("false")
+    MAINTENANCE_MODE: zodStrBool.default("false"),
+    CAPTCHA_SECRET: zpStr(z.string().optional())
   })
   .transform((data) => ({
     ...data,

backend/src/server/routes/v3/login-router.ts

@@ -80,7 +80,8 @@ export const registerLoginRouter = async (server: FastifyZodProvider) => {
       body: z.object({
         email: z.string().trim(),
         providerAuthToken: z.string().trim().optional(),
-        clientProof: z.string().trim()
+        clientProof: z.string().trim(),
+        captchaToken: z.string().trim().optional()
       }),
       response: {
         200: z.discriminatedUnion("mfaEnabled", [
@@ -106,6 +107,7 @@ export const registerLoginRouter = async (server: FastifyZodProvider) => {
       const appCfg = getConfig();
 
       const data = await server.services.login.loginExchangeClientProof({
+        captchaToken: req.body.captchaToken,
         email: req.body.email,
         ip: req.realIp,
         userAgent,

backend/src/services/auth/auth-login-service.ts

@@ -3,6 +3,7 @@ import jwt from "jsonwebtoken";
 import { TUsers, UserDeviceSchema } from "@app/db/schemas";
 import { isAuthMethodSaml } from "@app/ee/services/permission/permission-fns";
 import { getConfig } from "@app/lib/config/env";
+import { request } from "@app/lib/config/request";
 import { generateSrpServerKey, srpCheckClientProof } from "@app/lib/crypto";
 import { BadRequestError, DatabaseError, UnauthorizedError } from "@app/lib/errors";
 import { getServerCfg } from "@app/services/super-admin/super-admin-service";
@@ -176,12 +177,16 @@ export const authLoginServiceFactory = ({
     clientProof,
     ip,
     userAgent,
-    providerAuthToken
+    providerAuthToken,
+    captchaToken
   }: TLoginClientProofDTO) => {
+    const appCfg = getConfig();
+
     const userEnc = await userDAL.findUserEncKeyByUsername({
       username: email
     });
     if (!userEnc) throw new Error("Failed to find user");
+    const user = await userDAL.findById(userEnc.userId);
     const cfg = getConfig();
 
     let authMethod = AuthMethod.EMAIL;
@@ -196,6 +201,31 @@ export const authLoginServiceFactory = ({
       }
     }
 
+    if (
+      user.consecutiveFailedPasswordAttempts &&
+      user.consecutiveFailedPasswordAttempts >= 10 &&
+      Boolean(appCfg.CAPTCHA_SECRET)
+    ) {
+      if (!captchaToken) {
+        throw new BadRequestError({
+          name: "Captcha Required",
+          message: "Accomplish the required captcha by logging in via Web"
+        });
+      }
+
+      // validate captcha token
+      const response = await request.postForm<{ success: boolean }>("https://api.hcaptcha.com/siteverify", {
+        response: captchaToken,
+        secret: appCfg.CAPTCHA_SECRET
+      });
+
+      if (!response.data.success) {
+        throw new BadRequestError({
+          name: "Invalid Captcha"
+        });
+      }
+    }
+
     if (!userEnc.serverPrivateKey || !userEnc.clientPublicKey) throw new Error("Failed to authenticate. Try again?");
     const isValidClientProof = await srpCheckClientProof(
       userEnc.salt,
@@ -204,15 +234,31 @@ export const authLoginServiceFactory = ({
       userEnc.clientPublicKey,
       clientProof
     );
-    if (!isValidClientProof) throw new Error("Failed to authenticate. Try again?");
+
+    if (!isValidClientProof) {
+      await userDAL.update(
+        { id: userEnc.userId },
+        {
+          $incr: {
+            consecutiveFailedPasswordAttempts: 1
+          }
+        }
+      );
+
+      throw new Error("Failed to authenticate. Try again?");
+    }
 
     await userDAL.updateUserEncryptionByUserId(userEnc.userId, {
       serverPrivateKey: null,
       clientPublicKey: null
     });
+
+    await userDAL.updateById(userEnc.userId, {
+      consecutiveFailedPasswordAttempts: 0
+    });
+
     // send multi factor auth token if they it enabled
     if (userEnc.isMfaEnabled && userEnc.email) {
-      const user = await userDAL.findById(userEnc.userId);
       enforceUserLockStatus(Boolean(user.isLocked), user.temporaryLockDateEnd);
 
       const mfaToken = jwt.sign(

backend/src/services/auth/auth-login-type.ts

@@ -12,6 +12,7 @@ export type TLoginClientProofDTO = {
   providerAuthToken?: string;
   ip: string;
   userAgent: string;
+  captchaToken?: string;
 };
 
 export type TVerifyMfaTokenDTO = {

frontend/Dockerfile

@@ -2,6 +2,7 @@ ARG POSTHOG_HOST=https://app.posthog.com
 ARG POSTHOG_API_KEY=posthog-api-key
 ARG INTERCOM_ID=intercom-id
 ARG NEXT_INFISICAL_PLATFORM_VERSION=next-infisical-platform-version
+ARG CAPTCHA_SITE_KEY=captcha-site-key
 
 FROM node:16-alpine AS deps
 # Install dependencies only when needed. Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
@@ -31,6 +32,8 @@ ARG POSTHOG_API_KEY
 ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
 ARG INTERCOM_ID
 ENV NEXT_PUBLIC_INTERCOM_ID $INTERCOM_ID
+ARG CAPTCHA_SITE_KEY
+ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY $CAPTCHA_SITE_KEY
 
 # Build
 RUN npm run build
@@ -57,7 +60,9 @@ ENV NEXT_PUBLIC_SAML_ORG_SLUG=$SAML_ORG_SLUG \
     BAKED_NEXT_PUBLIC_SAML_ORG_SLUG=$SAML_ORG_SLUG
 ARG NEXT_INFISICAL_PLATFORM_VERSION
 ENV NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION=$NEXT_INFISICAL_PLATFORM_VERSION 
-
+ARG CAPTCHA_SITE_KEY
+ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY \
+    BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY
 COPY --chown=nextjs:nodejs --chmod=555 scripts ./scripts
 COPY --from=builder /app/public ./public
 RUN chown nextjs:nodejs ./public/data

frontend/next.config.js

@@ -1,13 +1,12 @@
-
 const path = require("path");
 
 const ContentSecurityPolicy = `
 	default-src 'self';
-	script-src 'self' https://app.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com 'unsafe-inline' 'unsafe-eval';
+	script-src 'self' https://app.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com https://hcaptcha.com https://*.hcaptcha.com 'unsafe-inline' 'unsafe-eval';
-	style-src 'self' https://rsms.me 'unsafe-inline';
+	style-src 'self' https://rsms.me 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com;
 	child-src https://api.stripe.com;
-	frame-src https://js.stripe.com/ https://api.stripe.com https://www.youtube.com/;
+	frame-src https://js.stripe.com/ https://api.stripe.com https://www.youtube.com/ https://hcaptcha.com https://*.hcaptcha.com;
-	connect-src 'self' wss://nexus-websocket-a.intercom.io https://api-iam.intercom.io https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://api.stripe.com https://api.pwnedpasswords.com http://127.0.0.1:*;
+	connect-src 'self' wss://nexus-websocket-a.intercom.io https://api-iam.intercom.io https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://api.stripe.com https://api.pwnedpasswords.com http://127.0.0.1:* https://hcaptcha.com https://*.hcaptcha.com;
 	img-src 'self' https://static.intercomassets.com https://js.intercomcdn.com https://downloads.intercomcdn.com https://*.stripe.com https://i.ytimg.com/ data:;
 	media-src https://js.intercomcdn.com;
 	font-src 'self' https://fonts.intercomcdn.com/ https://maxcdn.bootstrapcdn.com https://rsms.me https://fonts.gstatic.com;  

frontend/package-lock.json

@@ -4,7 +4,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
       "dependencies": {
         "@casl/ability": "^6.5.0",
         "@casl/react": "^3.1.0",
@@ -19,6 +18,7 @@
         "@fortawesome/free-regular-svg-icons": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@hcaptcha/react-hcaptcha": "^1.10.1",
         "@headlessui/react": "^1.7.7",
         "@hookform/resolvers": "^2.9.10",
         "@octokit/rest": "^19.0.7",
@@ -3200,6 +3200,24 @@
         "react": ">=16.3"
       }
     },
+    "node_modules/@hcaptcha/loader": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@hcaptcha/loader/-/loader-1.2.4.tgz",
+      "integrity": "sha512-3MNrIy/nWBfyVVvMPBKdKrX7BeadgiimW0AL/a/8TohNtJqxoySKgTJEXOQvYwlHemQpUzFrIsK74ody7JiMYw=="
+    },
+    "node_modules/@hcaptcha/react-hcaptcha": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@hcaptcha/react-hcaptcha/-/react-hcaptcha-1.10.1.tgz",
+      "integrity": "sha512-P0en4gEZAecah7Pt3WIaJO2gFlaLZKkI0+Tfdg8fNqsDxqT9VytZWSkH4WAkiPRULK1QcGgUZK+J56MXYmPifw==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.9",
+        "@hcaptcha/loader": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/@headlessui/react": {
       "version": "1.7.18",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@hcaptcha/react-hcaptcha": "^1.10.1",
     "@headlessui/react": "^1.7.7",
     "@hookform/resolvers": "^2.9.10",
     "@octokit/rest": "^19.0.7",

frontend/scripts/initialize-standalone-build.sh

@@ -4,6 +4,8 @@ scripts/replace-standalone-build-variable.sh "$BAKED_NEXT_PUBLIC_POSTHOG_API_KEY
 
 scripts/replace-standalone-build-variable.sh "$BAKED_NEXT_PUBLIC_INTERCOM_ID" "$NEXT_PUBLIC_INTERCOM_ID"
 
+scripts/replace-standalone-build-variable.sh "$BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY" "$NEXT_PUBLIC_CAPTCHA_SITE_KEY"
+
 if [ "$TELEMETRY_ENABLED" != "false" ]; then
     echo "Telemetry is enabled"
     scripts/set-standalone-build-telemetry.sh true

frontend/scripts/start.sh

@@ -6,6 +6,8 @@ scripts/replace-variable.sh "$BAKED_NEXT_PUBLIC_INTERCOM_ID" "$NEXT_PUBLIC_INTER
 
 scripts/replace-variable.sh "$BAKED_NEXT_SAML_ORG_SLUG" "$NEXT_PUBLIC_SAML_ORG_SLUG"
 
+scripts/replace-variable.sh "$BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY" "$NEXT_PUBLIC_CAPTCHA_SITE_KEY"
+
 if [ "$TELEMETRY_ENABLED" != "false" ]; then
     echo "Telemetry is enabled"
     scripts/set-telemetry.sh true

frontend/src/components/utilities/attemptCliLogin.ts

@@ -30,11 +30,13 @@ export interface IsCliLoginSuccessful {
 const attemptLogin = async ({
   email,
   password,
-  providerAuthToken
+  providerAuthToken,
+  captchaToken
 }: {
   email: string;
   password: string;
   providerAuthToken?: string;
+  captchaToken?: string;
 }): Promise<IsCliLoginSuccessful> => {
   const telemetry = new Telemetry().getInstance();
   return new Promise((resolve, reject) => {
@@ -70,7 +72,8 @@ const attemptLogin = async ({
           } = await login2({
             email,
             clientProof,
-            providerAuthToken
+            providerAuthToken,
+            captchaToken
           });
           if (mfaEnabled) {
             // case: MFA is enabled

frontend/src/components/utilities/attemptLogin.ts

@@ -22,11 +22,13 @@ interface IsLoginSuccessful {
 const attemptLogin = async ({
   email,
   password,
-  providerAuthToken
+  providerAuthToken,
+  captchaToken
 }: {
   email: string;
   password: string;
   providerAuthToken?: string;
+  captchaToken?: string;
 }): Promise<IsLoginSuccessful> => {
   const telemetry = new Telemetry().getInstance();
   // eslint-disable-next-line new-cap
@@ -58,6 +60,7 @@ const attemptLogin = async ({
     iv,
     tag
   } = await login2({
+    captchaToken,
     email,
     clientProof,
     providerAuthToken

frontend/src/components/utilities/config/index.ts

@@ -2,5 +2,6 @@ const ENV = process.env.NEXT_PUBLIC_ENV! || "development"; // investigate
 const POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY!;
 const POSTHOG_HOST = process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const INTERCOMid = process.env.NEXT_PUBLIC_INTERCOMid!;
+const CAPTCHA_SITE_KEY = process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY!;
 
-export { ENV, INTERCOMid, POSTHOG_API_KEY, POSTHOG_HOST };
+export { CAPTCHA_SITE_KEY, ENV, INTERCOMid, POSTHOG_API_KEY, POSTHOG_HOST };

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

@@ -30,6 +30,7 @@ export type Login1DTO = {
 };
 
 export type Login2DTO = {
+  captchaToken?: string;
   email: string;
   clientProof: string;
   providerAuthToken?: string;

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

@@ -1,15 +1,17 @@
-import { FormEvent, useEffect, useState } from "react";
+import { FormEvent, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
 
 import Error from "@app/components/basic/Error";
 import { createNotification } from "@app/components/notifications";
 import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
 import attemptLogin from "@app/components/utilities/attemptLogin";
+import { CAPTCHA_SITE_KEY } from "@app/components/utilities/config";
 import { Button, Input } from "@app/components/v2";
 import { useServerConfig } from "@app/context";
 import { useFetchServerStatus } from "@app/hooks/api";
@@ -32,6 +34,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   const [loginError, setLoginError] = useState(false);
   const { config } = useServerConfig();
   const queryParams = new URLSearchParams(window.location.search);
+  const [captchaToken, setCaptchaToken] = useState("");
+  const [shouldShowCaptcha, setShouldShowCaptcha] = useState(false);
+  const captchaRef = useRef<HCaptcha>(null);
   const { data: serverDetails } = useFetchServerStatus();
 
   useEffect(() => {
@@ -56,7 +61,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
         // attemptCliLogin
         const isCliLoginSuccessful = await attemptCliLogin({
           email: email.toLowerCase(),
-          password
+          password,
+          captchaToken
         });
 
         if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
@@ -78,7 +84,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
       } else {
         const isLoginSuccessful = await attemptLogin({
           email: email.toLowerCase(),
-          password
+          password,
+          captchaToken
         });
 
         if (isLoginSuccessful && isLoginSuccessful.success) {
@@ -112,6 +119,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
         return;
       }
 
+      if (err.response.data.error === "Captcha Required") {
+        setShouldShowCaptcha(true);
+        setIsLoading(false);
+        return;
+      }
+
       setLoginError(true);
       createNotification({
         text: "Login unsuccessful. Double-check your credentials and try again.",
@@ -119,6 +132,11 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
       });
     }
 
+    if (captchaRef.current) {
+      captchaRef.current.resetCaptcha();
+    }
+
+    setCaptchaToken("");
     setIsLoading(false);
   };
 
@@ -240,8 +258,19 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
           className="select:-webkit-autofill:focus h-10"
         />
       </div>
+      {shouldShowCaptcha && (
+        <div className="mt-4">
+          <HCaptcha
+            theme="dark"
+            sitekey={CAPTCHA_SITE_KEY}
+            onVerify={(token) => setCaptchaToken(token)}
+            ref={captchaRef}
+          />
+        </div>
+      )}
       <div className="mt-3 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Button
+          disabled={shouldShowCaptcha && captchaToken === ""}
           type="submit"
           size="sm"
           isFullWidth

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

@@ -1,13 +1,15 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
 import axios from "axios";
 import jwt_decode from "jwt-decode";
 
 import { createNotification } from "@app/components/notifications";
 import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
 import attemptLogin from "@app/components/utilities/attemptLogin";
+import { CAPTCHA_SITE_KEY } from "@app/components/utilities/config";
 import { Button, Input } from "@app/components/v2";
 import { useUpdateUserAuthMethods } from "@app/hooks/api";
 import { useSelectOrganization } from "@app/hooks/api/auth/queries";
@@ -41,6 +43,10 @@ export const PasswordStep = ({
     providerAuthToken
   ) as any;
 
+  const [captchaToken, setCaptchaToken] = useState("");
+  const [shouldShowCaptcha, setShouldShowCaptcha] = useState(false);
+  const captchaRef = useRef<HCaptcha>(null);
+
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
@@ -51,7 +57,8 @@ export const PasswordStep = ({
         const isCliLoginSuccessful = await attemptCliLogin({
           email,
           password,
-          providerAuthToken
+          providerAuthToken,
+          captchaToken
         });
 
         if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
@@ -99,7 +106,8 @@ export const PasswordStep = ({
         const loginAttempt = await attemptLogin({
           email,
           password,
-          providerAuthToken
+          providerAuthToken,
+          captchaToken
         });
 
         if (loginAttempt && loginAttempt.success) {
@@ -158,11 +166,21 @@ export const PasswordStep = ({
         return;
       }
 
+      if (err.response.data.error === "Captcha Required") {
+        setShouldShowCaptcha(true);
+        return;
+      }
+
       createNotification({
         text: "Login unsuccessful. Double-check your master password and try again.",
         type: "error"
       });
     }
+
+    if (captchaRef.current) {
+      captchaRef.current.resetCaptcha();
+    }
+    setCaptchaToken("");
   };
 
   return (
@@ -194,8 +212,19 @@ export const PasswordStep = ({
           />
         </div>
       </div>
+      {shouldShowCaptcha && (
+        <div className="mx-auto mt-4 flex w-full min-w-[22rem] items-center justify-center lg:w-1/6">
+          <HCaptcha
+            theme="dark"
+            sitekey={CAPTCHA_SITE_KEY}
+            onVerify={(token) => setCaptchaToken(token)}
+            ref={captchaRef}
+          />
+        </div>
+      )}
       <div className="mx-auto mt-4 flex w-1/4 w-full min-w-[22rem] items-center justify-center rounded-md text-center lg:w-1/6">
         <Button
+          disabled={shouldShowCaptcha && captchaToken === ""}
           type="submit"
           colorSchema="primary"
           variant="outline_bg"