feat(iam): add pwned password validation (#29)

* [ADD] pwned * [ADD] types sha1 * [REF] hibp integration * lint: use prettier and better wording --------- Co-authored-by: Gustavo Valverde <g.valverde02@gmail.com>
ogticrd · May 20, 2023 · 91ef75d · 91ef75d
1 parent 63c6b15
commit 91ef75d
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "cryptr": "^6.2.0",
     "eslint": "^8.40.0",
     "eslint-config-next": "13.2.3",
+    "hibp": "^13.0.0",
     "next": "13.2.3",
     "prop-types": ">=15.7.0",
     "react": "18.2.0",

diff --git a/src/components/elements/boxContentCenter/index.tsx b/src/components/elements/boxContentCenter/index.tsx
@@ -11,7 +11,7 @@ export default function BoxContentCenter({ children }: any) {
         alignItems: "center",
       }}
     >
-      <Box sx={{ width: "100%", maxWidth: "550px", padding: "0 10px" }}>
+      <Box sx={{ width: "100%", maxWidth: "560px", padding: "0 10px" }}>
         {children}
       </Box>
     </Box>

diff --git a/src/pages/api/pwned/[password].ts b/src/pages/api/pwned/[password].ts
@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from 'next/types';
+import { pwnedPassword } from 'hibp';
+import { Crypto } from '@/helpers';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<number | void>
+): Promise<void> {
+  const { token } = req.cookies;
+
+  if (token !== process.env.NEXT_PUBLIC_COOKIE_KEY) {
+    return res.status(401).send();
+  }
+
+  const { password } = req.query;
+
+  if (typeof password !== 'undefined') {
+    const passwordKey = Array.isArray(password) ? password[0] : password;
+    const data = await pwnedPassword(Crypto.decrypt(passwordKey));
+    res.status(200).json(data);
+  } else {
+    res.status(400);
+  }
+}
diff --git a/src/pages/register/index.tsx b/src/pages/register/index.tsx
@@ -9,7 +9,7 @@ export default function Index() {
       <CardAuth
         title="Registrar Cuenta Única Ciudadana"
         landing={LandingChica2}
-        landingWidth={290}
+        landingWidth={320}
         landingHeight={290}
       >
         <StepperRegister />

diff --git a/src/pages/register/stepper/step3.tsx b/src/pages/register/stepper/step3.tsx
@@ -5,7 +5,11 @@ import { useState } from 'react';
 import * as yup from 'yup';
 import axios from 'axios';
 
-import { AlertError, AlertWarning } from '@/components/elements/alert';
+import {
+  AlertError,
+  AlertErrorMessage,
+  AlertWarning,
+} from '@/components/elements/alert';
 import { GridContainer, GridItem } from '@/components/elements/grid';
 import LoadingBackdrop from '@/components/elements/loadingBackdrop';
 import PasswordLevel from '@/components/elements/passwordLevel';
@@ -42,14 +46,16 @@ const schema = yup.object({
 });
 
 export default function Step3({ handleNext, infoCedula }: any) {
+  const [loadingValidatingPassword, setLoadingValidatingPassword] =
+    useState(false);
   const [loading, setLoading] = useState(false);
   const [passwordLevel, setPasswordLevel] = useState<any>({});
+  const [isPwned, setIsPwned] = useState(false);
 
   const {
     register,
     handleSubmit,
     formState: { errors },
-    getValues,
     setValue,
   } = useForm<IFormInputs>({
     mode: 'onChange',
@@ -60,36 +66,58 @@ export default function Step3({ handleNext, infoCedula }: any) {
     const level = passwordStrength(password);
     setPasswordLevel(level);
     setValue('password', password);
+    setIsPwned(false);
   };
 
   const onSubmit = (data: IFormInputs) => {
+    if (isPwned) return;
     if (passwordLevel.id !== 3) return;
-    setLoading(true);
+    setLoadingValidatingPassword(true);
 
     const password = Crypto.encrypt(data.password);
 
-    axios
-      .post('/api/iam', {
-        email: data.email,
-        username: infoCedula.id,
-        password,
-      })
-      .then(() => {
-        handleNext();
-      })
-      .catch((err) => {
-        if (err?.response?.status === 409) {
-          AlertWarning('El correo electrónico ya está registrado.');
-        } else {
-          AlertError();
-        }
-      })
-      .finally(() => setLoading(false));
+    if (!isPwned) {
+      axios
+        .get(`/api/pwned/${password}`)
+        .then((res) => {
+          console.log(res);
+          const isPwnedIncludes = res.data === 0 ? false : true;
+          setIsPwned(isPwnedIncludes);
+          if (!isPwnedIncludes) {
+            setLoadingValidatingPassword(false);
+            setLoading(true);
+            axios
+              .post('/api/iam', {
+                email: data.email,
+                username: infoCedula.id,
+                password,
+              })
+              .then(() => {
+                handleNext();
+              })
+              .catch((err) => {
+                if (err?.response?.status === 409) {
+                  AlertWarning('El correo electrónico ya está registrado.');
+                } else {
+                  AlertError();
+                }
+              })
+              .finally(() => setLoading(false));
+          }
+        })
+        .catch(() => {
+          return AlertWarning('No pudimos validar si la contraseña es segura.');
+        })
+        .finally(() => setLoadingValidatingPassword(false));
+    }
   };
 
   return (
     <>
-      {loading && <LoadingBackdrop text="Estamos creando tu usuario..." />}
+      {loadingValidatingPassword && (
+        <LoadingBackdrop text="Estamos validando tu contraseña..." />
+      )}
+      {loading && <LoadingBackdrop text="Creando usuario..." />}
       <br />
       <TextBody textCenter bold>
         Para finalizar tu registro completa los siguientes campos:
@@ -166,10 +194,6 @@ export default function Step3({ handleNext, infoCedula }: any) {
               <InputApp
                 placeholder="*********"
                 type="password"
-                onPaste={(e) => {
-                  e.preventDefault();
-                  return false;
-                }}
                 autoComplete="off"
                 {...register('password')}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -189,31 +213,24 @@ export default function Step3({ handleNext, infoCedula }: any) {
               <InputApp
                 placeholder="*********"
                 type="password"
-                onCopy={(e) => {
-                  e.preventDefault();
-                  return false;
-                }}
                 autoComplete="off"
                 {...register('passwordConfirm')}
                 disabled={passwordLevel.id === 3 ? false : true}
               />
             </FormControlApp>
           </GridItem>
 
+          {isPwned && (
+            <GridItem md={12} lg={12}>
+              <AlertErrorMessage
+                type="warning"
+                message="Esta contraseña ha estado en filtraciones de datos, por eso no se considera segura. Te recomendamos eligir otra contraseña."
+              />
+            </GridItem>
+          )}
+
           <GridItem md={12} lg={12}>
-            <ButtonApp
-              submit
-              disabled={
-                Object.values(getValues()).every(
-                  (value: any) =>
-                    value !== null && value !== undefined && value !== ''
-                ) === false
-                  ? true
-                  : false
-              }
-            >
-              ACEPTAR Y CONFIRMAR
-            </ButtonApp>
+            <ButtonApp submit>CREAR CUENTA ÚNICA</ButtonApp>
           </GridItem>
         </GridContainer>
       </form>