# Login Credentials Generator – in JavaScript

**Date:** 2015-09-27  
**Author:** Kees C. Bakker  
**Categories:** JavaScript  
**Tags:** Html  
**Original:** https://keestalkstech.com/login-credentials-generator-in-javascript/

![Login Credentials Generator – in JavaScript](https://keestalkstech.com/wp-content/uploads/2015/09/castles-616573_1280.jpg)

---

Many small applications need to store user credentials, but it's hard to create a good username/password infrastructure. What if you could just use a small XML file with credentials that don't actually stores the password, but just a [hash](https://www.wikiwand.com/en/Cryptographic_hash_function#Password_verification) and some [salt](https://www.wikiwand.com/en/Salt_(cryptography)).

For a small cloud project I ended up creating such a solution. This blog explains how to generate the credentials that can be stored in the XML. The aim is to make a solution that works on the client using JavaScript.

## Program

The program looks like this:

## Techniques

In this solution we use the following techniques:

## Frameworks

Never code what you don't need. I used the following JavaScript frameworks to make coding easier:

I'm using a CDN to get the includes:

```html
<script src="//code.jquery.com/jquery-compat-git.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/core.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/sha256-min.js"></script>
```

## A string randomizer

We need a randomizer to create salt and generate passwords. We’ll be using the following function:

```js
var randomString = function (length, nonAlpha) {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  if (nonAlpha) {
    possible += '_+-!@#$%^*()/*`~={}|\][;:,./?';
  }

  for (var i = 0; i < length; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  return text;
}
```

If we use this function to generate salt, we should generate longer salt, because the entropy of the JavaScript generator isn’t that great.

## A model

Let’s create a model . It will be the heart of the application:

```js
var PasswordModel = function () {

  var _this = this;
  this.userName = ko.observable('');
  this.password = ko.observable('');
  this.roles = ko.observable('');

  this.salt = ko.computed(function () {
    //generate new salt on password/username update
    var u = _this.userName();
    var p = _this.password();
    return randomString(24, true);
  });

  this.hash = ko.computed(function () {
    var h = _this.salt() + _this.password();
    return CryptoJS.SHA256(h);
  });

  this.xml = ko.computed(function () {

    var xml = $('<user />');
    xml.attr('name', _this.userName());
    xml.attr('roles', _this.roles());
    xml.attr('salt', _this.salt());
    xml.attr('hash', _this.hash());

    return xml.wrap('<div/>').parent().html();
  });

  //generate a new alpha-numeric password
  this.generateNewPassword = function () {
    var password = randomString(16, false);
    _this.password(password);
  };

  this.generateNewPassword();
}
```

## A user interface

Next we'll need to create a simple user interface and let Knockout do the rest:

```html
<div class="row">
  <label>
    <span>Username:</span>
    <input data-bind="value: userName, valueUpdate: 'afterkeydown'" class="value" autocomplete="off" />
  </label>
</div>
<div class="row">
  <label>
    <span>Password:</span>
    <input data-bind="value: password, valueUpdate: 'afterkeydown'" class="value" autocomplete="off" />
  </label>
</div>
<div class="row">
  <label>
    <span />
    <button type="checkbox" data-bind="click: generateNewPassword">Generate new password</button>
  </label>
</div>
<div class="row">
  <label>
    <span>Roles:</span>
    <input data-bind="value: roles, valueUpdate: 'afterkeydown'" class="value" />
  </label>
</div>
<div class="row">
  <label>
    <span>XML:</span>
    <code data-bind="text: xml" class="value" />
  </label>
</div>
```

Knockout binding:

```js
$(document).ready(function () {
	var model = new Model();
	ko.applyBindings(model);
});
```

## Wrap-up

So that's it. It's quite easy to make and host yourself, [check GitHub](https://github.com/KeesCBakker/JavaScriptPasswordGenerator). But you're always welcome to use my generator: [KeesTalksTech Password Generator](http://keestalkstechapps.azurewebsites.net/passwordgenerator/).