JSFiddle - React, Tailwind, and code Playground

by t2t2

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<form id="form">
  <label>
    Password:
    <input id="password" type="password">
  </label>
  <label>
    Salt:
    <input id="salt" type="text">
  </label>
  <label>
    Challenge:
    <input id="challenge" type="text">
  </label>
  <button type="submit">Generate</button>
  <p>
    Authentication response: <span id="result"></span>
  </p>
</form>

CSS

label {
  display: block;
}

JavaScript

document.getElementById('form').addEventListener('submit', event => {
	event.preventDefault()

	const password = document.getElementById('password').value
	const salt = document.getElementById('salt').value
	const challenge = document.getElementById('challenge').value
  
  const authHash = CryptoJS.enc.Base64.stringify(
  	CryptoJS.SHA256(password + salt)
  )
  const result = CryptoJS.enc.Base64.stringify(
  	CryptoJS.SHA256(authHash + challenge)
  )

  document.getElementById('result').innerText = result
})