JSFiddle - React, Tailwind, and code Playground

by dhana36

HTML

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/pbkdf2.js"></script>
<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/src/enc-base64.js"></script>
<fieldset>
    <legend>Create Password Hash</legend>password:
    <input id="new-password" type="text">
    <button id="create-password">Create</button>
    <div id="create-results"></div>
</fieldset>
<fieldset>
    <legend>Validate Password</legend>password:
    <input id="password" type="text">
    <button id="validate-password">Validate</button>
    <div id="validate-results"></div>
</fieldset>

JavaScript

var savedPassword = '1000:WFT3ySZZDlLocaZob33g4f0dn3OxlRj8:Gpo9dPECFvEKr3iViXUDjH17cHIc+Ojw'; // password is 'test'

var DELIMITER = ':',
    SALT_BYTES = 128 / 8,
    HASH_BYTES = 128 / 32,
    PBKDF2_ITERATIONS = 1000,
    ITERATION_INDEX = 0,
    SALT_INDEX = 1,
    PBKDF2_INDEX = 2;

var savedPasswordHash = '1000:HVKPwC80I5+kbhUZOSmTjTuOKPACvR2s:06xBMoXrQrejqTOPi3BgDB8lsRyvWZAR';

$('button#create-password').click(function () {
    var password = $('#new-password').val();
    if (!password || password.length == 0) {
        alert('You must enter a password to create!');
        return;
    }

    var saltObj = CryptoJS.lib.WordArray.random(SALT_BYTES);
    var salt = saltObj.toString(CryptoJS.enc.Base64);
    
    var hashObj = CryptoJS.PBKDF2(password, salt, {
        keySize: HASH_BYTES,
        iterations: PBKDF2_ITERATIONS
    });
    var hash = hashObj.toString(CryptoJS.enc.Base64).substr(0, 32);

    savedPasswordHash = [PBKDF2_ITERATIONS, salt, hash].join(DELIMITER);

    $('div#create-results').html('password: ' + password + '<br>hash: ' + savedPasswordHash);
});

$('button#validate-password').click(function () {
    
    var password = $('#password').val();
    if (!password || password.length == 0) {
        alert('Enter the password to validate!');
        return;
    }
    if (!savedPasswordHash || savedPasswordHash.length == 0) {
        alert('First create a password!');
        return;
    }

    var isValid = validatePassword(password, savedPasswordHash);
    $('div#validate-results').append('<br><b>Is valid: ' + isValid + '</b>');
});

function validatePassword(password, goodHash) {
    //alert(password+ "   /n" +goodHash)
    // Unpack hash params from goodHash
    var hashParts = goodHash.split(DELIMITER);
    
    var iterations = hashParts[0];
    var salt = hashParts[1];
    
    var hashObj = CryptoJS.enc.Base64.parse(hashParts[2]);
    var hash = hashObj.toString(CryptoJS.enc.Base64);

    // Now hash the password
    var testHashObj =...