Instantly Gain Your Users' Trust with Password Breach Detection in Signup Forms

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import sha1 from "sha1";

/**

* Checks if a password is safe using the HIBP API.
* @param password The password to check.
* @returns Promise<boolean> - `true` if the password is safe, `false` if it is compromised.
 */
export async function isPasswordSafety(password: string): Promise<boolean> {
  try {
    // Step 1: Hash the password using SHA1
    const hashedPassword = sha1(password);
    const prefix = hashedPassword.substring(0, 5); // First 5 characters of the hash
    const suffix = hashedPassword.substring(5); // Remaining characters of the hash

    // Step 2: Fetch data from HIBP API for the hash prefix
    const response = await fetch(`https://api.pwnedpasswords.com/range/${prefix}`);

    // Step 3: Check if the response is successful
    if (!response.ok) {
      throw new Error(`Failed to fetch: ${response.status} - ${response.statusText}`);
    }

    // Step 4: Extract the list of hashes and pawned counts
    const data = await response.text();
    const hashes = data.split("\n"); // Split response into individual hash entries

    // Step 5: Find the hash suffix in the returned list
    const foundEntry = hashes.find((hash) => {
      const [hashSuffix] = hash.split(":"); // Extract the hash suffix
      return hashSuffix.toLowerCase() === suffix.toLowerCase(); // Compare suffixes (case-insensitive)
    });

    // Step 6: Return true if no entry is found, otherwise false
    return foundEntry === undefined; // Safe if no match is found
  } catch (error) {
    console.error("Error checking password:", error);
    // Treat any error as a signal that the password might not be safe
    return false;
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

// usePasswordSafety.tsx

import { useState } from "react";
import sha1 from "sha1"; // need install sh1 as dependency

interface PawnedResult {
  status: "safe" | "pawned" | "error" | undefined;
  error: string | null; // Stores any error messages encountered during the process
  isLoading: boolean; // Tracks the loading state of the API request
  numberOfPawned: number; // Number of times the password has been pawned (extracted from the API response)
}

// Custom hook for checking if a password is compromised using the HIBP API
export function usePasswordSafety() {
  const [state, setState] = useState<PawnedResult>({
    status: undefined,
    error: null,
    isLoading: false,
    numberOfPawned: 0,
  });

  // Main function to check a password using the HIBP API
  const isPasswordSafety = async (password: string): Promise<void> => {
    setState((prev) => ({ ...prev, isLoading: true, error: null }));

    try {
      // Step 1: Hash the password using SHA1
      const hashedPassword = sha1(password);
      const prefix = hashedPassword.substring(0, 5); // Extract the first 5 characters of the hash
      const suffix = hashedPassword.substring(5); // Extract the remaining characters of the hash

      // Step 2: Make an API request to HIBP with the hash prefix
      const response = await fetch(
        `https://api.pwnedpasswords.com/range/${prefix}`
      );

      // Step 3: Handle non-OK responses
      if (!response.ok) {
        throw new Error(
          `Failed to fetch: ${response.status} - ${response.statusText}`
        );
      }

      // Step 4: Parse the API response as text (contains hash suffixes and pawned counts)
      const data = await response.text();
      const hashes = data.split("\n"); // Split the response into individual lines

      // Step 5: Find the user's hash suffix in the list of hashes
      const foundEntry = hashes.find((hash) => {
        const [hashSuffix] = hash.split(":"); // Split each line to isolate the hash suffix
        return hashSuffix.toLowerCase() === suffix.toLowerCase(); // Compare suffixes (case-insensitive)
      });

      // Step 6: Extract the number of times the password has been pawned
      const numberOfPawned = foundEntry
        ? parseInt(foundEntry.split(":")[1] || "0", 10) // Get the count after the ":"
        : 0;

      // Step 7: Update the state with the results (success case)

      setState({
        status: foundEntry === undefined ? "safe" : "pawned", // true is safe
        error: null,
        isLoading: false,
        numberOfPawned,
      });
    } catch (error) {
      // Step 8: Handle errors gracefully by updating the state
      const errorMessage =
        error instanceof Error ? error.message : "Unknown error occurred."; // Use a descriptive error message

      setState({
        status: "error", // Result is null due to the error
        error: errorMessage,
        isLoading: false,
        numberOfPawned: 0,
      });
    }
  };

  // Return the current state and the function to check passwords
  return { ...state, isPasswordSafety };
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

// SignUpForm.tsx

import { useForm } from "react-hook-form";
import PasswordShowBtn from "./components/PasswordShowBtn";
import { password_validation } from "./schema/password_validation";
import { usePasswordSafety } from "./hooks/usePasswordSafety";

interface IFormInput {
  password: string;
}

function App() {
  const [showPassword, setShowPassword] = useState(false);

  const { status, error, isLoading, numberOfPawned, isPasswordSafety } =
    usePasswordSafety();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IFormInput>({
    defaultValues: {
      password: "",
    },
  });

  const togglePasswordVisibility = () => {
    setShowPassword((prev) => !prev);
  };

  const onSubmit = async (data: IFormInput) => {
    // When the form is submitted, check the password with the API
    await isPasswordSafety(data.password);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <input
          type={showPassword ? "text" : "password"} // Toggle antara password dan text
          placeholder="Password"
          {...register("password", password_validation)}
          defaultValue=""
        />

        {errors.password && <p>{errors.password.message}</p>}

        <PasswordShowBtn type="button" onClick={togglePasswordVisibility}>
          {showPassword ? "Hide" : "Show"}
        </PasswordShowBtn>
      </div>

      <button disabled={isLoading} type="submit">
        {isLoading ? "Checking password..." : "Submit"}
      </button>

      {/* Show result or error */}
      {status === "pawned" && !isLoading && (
        <p>
          We found this password in a data leak {numberOfPawned} times. For
          peace of mind, we recommend choosing a new one. {`${status}`}
        </p>
      )}

      {status === "safe" && !isLoading && (
        <div> your password is health</div>
      )}

      {error && !isLoading && <p>Error: {error}</p>}
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

import (
 "bufio"
 "database/sql"
 "log"
 "os"
 "strings"

 _ "github.com/mattn/go-sqlite3"
)

func main() {
    // Open the text file containing the password hashes and their occurrences.
    file, err := os.Open("../data/hibp_example.txt")
    defer file.Close()

    db, err := sql.Open("sqlite3", "../data/hbip.db")
    defer db.Close()

    _, err = db.Exec(`CREATE TABLE IF NOT EXISTS pwned_passwords (
        prefix TEXT NOT NULL,
        suffix TEXT NOT NULL,
        occurrences INTEGER NOT NULL,
        PRIMARY KEY (prefix, suffix) 
    )`)

    // Begin a new database transaction to batch insert data for better performance.
    tx, err := db.Begin()

    // Prepare an SQL statement to insert or ignore duplicate records into the table.
    stmt, err := tx.Prepare("INSERT OR IGNORE INTO pwned_passwords (prefix, suffix, occurrences) VALUES (?, ?, ?)")
    defer stmt.Close()

    // Create a scanner to read the text file line by line.
    scanner := bufio.NewScanner(file)
    for scanner.Scan() {
        line := scanner.Text()
        parts := strings.Split(line, ":")

        // Skip lines that don't follow the expected format
        if len(parts) != 2 {
            continue
        }

        hash := parts[0]                    // The full hash value from the line
        count := parts[1]                   // The occurrence count from the line

        prefix := hash[:5]                  // Extract the first 5 characters as the prefix
        suffix := hash[5:]                  // Extract the remaining characters as the suffix

        _, err := stmt.Exec(prefix, suffix, count) 
        if err != nil {
            log.Printf("Failed to insert record: %v", err)
        }
    }

    // Commit the transaction to finalize the batch insert into the database.
    if err := tx.Commit(); err != nil {
        log.Fatalf("Failed to commit transaction: %v", err)
    }

    log.Println("Data conversion completed.")
}

1
2
3
4

// main.go

router := http.NewServeMux()
router.HandleFunc("/api/v1/hibp", handler.CheckHandler(db))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

package database

import (
 "database/sql"
 "fmt"
 _ "github.com/mattn/go-sqlite3"
)

type DB struct {
 *sql.DB
}

func InitDatabase(dbPath string) (*sql.DB, error) {
 if dbPath == "" {
  return nil, fmt.Errorf("database path is empty")
 }

 db, err := sql.Open("sqlite3", dbPath)
 if err != nil {
  return nil, fmt.Errorf("failed to open database: %v", err)
 }

 return db, nil
}

// finding suffix base on prefix
func GetSuffixesByPrefix(db *DB, prefix string) ([]string, error) {
 query := `SELECT suffix FROM hibp WHERE prefix = ?`
 rows, err := db.Query(query, prefix)
 if err != nil {
  return nil, fmt.Errorf("failed to query suffixes: %v", err)
 }
 defer rows.Close()

 var suffixes []string
 for rows.Next() {
  var suffix string
  if err := rows.Scan(&suffix); err != nil {
   return nil, fmt.Errorf("failed to scan suffix: %v", err)
  }
  suffixes = append(suffixes, suffix)
 }

 if err := rows.Err(); err != nil {
  return nil, fmt.Errorf("error iterating over rows: %v", err)
 }

 return suffixes, nil
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

package handler

import (
 "database/sql"
 "fmt"
 "net/http"
)

// query handler
func CheckHandler(db *sql.DB) http.HandlerFunc {
 return func(w http.ResponseWriter, r*http.Request) {
  if r.Method != http.MethodGet {
   http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
   return
  }

  // fetch prefix from url query
  prefix := r.URL.Query().Get("prefix")
  if len(prefix) != 5 {
   http.Error(w, "Prefix must be exactly 5 characters", http.StatusBadRequest)
   return
  }

  rows, err := db.Query("SELECT suffix, COUNT(*) FROM pwned_passwords WHERE prefix = ? GROUP BY suffix", prefix)
  if err != nil {
   http.Error(w, "Internal server error", http.StatusInternalServerError)
   return
  }

  defer rows.Close()

  var result string
  for rows.Next() {
   var suffix string
   var occurrences int
   if err := rows.Scan(&suffix, &occurrences); err != nil {
    http.Error(w, "Error scanning result", http.StatusInternalServerError)
    return
   }

   // Ensure only the suffix is returned
   result += fmt.Sprintf("%s:%d\n", suffix, occurrences)
  }

  if result == "" {
   w.WriteHeader(http.StatusNotFound)
   fmt.Fprint(w, "No suffix found")
   return
  }

  // returning text format as a response
  w.Header().Set("Content-Type", "text/plain")
  w.WriteHeader(http.StatusOK)
  fmt.Fprint(w, result)
 }
}