Create or test Firebase tokens

Create Firebase tokens for use in testing, REST URLs or just for admiring their beauty.

by Firebase

HTML

<script src="http://static.firebase.com/v0/firebase.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Base64/0.2.0/base64.min.js"></script>
<script src="https://rawgit.com/firebase/firebase-token-generator-node/master/dist/firebase-token-generator.js"></script>
<h2>Token Generator</h2>

<p>Create Firebase tokens for use in testing, REST URLs, or just for admiring their beauty. Test them against your Firebase instance.</p>
<fieldset>
    <legend>Create a Token</legend>
    <form id="createToken">
        <label for="secret">secret:</label>
        <input type="text" id="secret" />
        <label for="uid">uid:</label>
        <input type="text" id="uid" value="kato" />
        <label for="data">json data:</label>
        <textarea id="data" cols=50 rows=6></textarea>
        <fieldset class="collapsible active">
            <legend><a href="#">more options</a></legend>
            <label for="expires">expires:</label>
            <input type="text" id="expires" value="+30 days" placeholder="+30 days" /> <a href="#max">max</a>
            <label for="notBefore">notBefore:</label>
            <input type="text" id="notBefore" value="" placeholder="+0 minutes" />
            <label><input id="admin" type="checkbox" /> admin</label>
            <label><input id="debug" type="checkbox" /> debug</label>
       </fieldset>
       <button type="submit">create token</button>
    </form>
</fieldset>
<fieldset>
    <legend>Read/try a Token</legend>
    <form id="testToken">
        <label>https://
            <input type="text" id="instance" placeholder="instance" />.firebaseio.com</label>
        <label for="token">token:</label>
        <textarea id="token" cols=50 rows=6></textarea>
        <button type="submit">test token</button>
    </form>
</fieldset>
<br />
<pre id="log"></pre>

<br />
<div>You can put any value into the json data you want and it will appear as...

CSS

label, button {
    display: block;
    margin-top: 8px;
}
body > fieldset {
    float: left;
    min-width: 250px;
    margin: 10px;
}

fieldset.collapsible {
    overflow: hidden;
    position: relative;
    border: none;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

fieldset.collapsible legend {
    text-align: right;
    position: absolute;
    bottom: 0px;
    right: 20px;
}

fieldset.collapsible legend a:after {
    content: "+";
}

pre {
    padding: 10px;
    font-size: 16px;
    border-radius: 15px;
    background-color: #fafafa;
    border: 1px solid #999;
    max-width: 95%;
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-all;
}
br {
    clear: both;
}
.error {
    color: red;
}

JavaScript

$('#createToken').on('submit', createToken);
$('#testToken').on('submit', testToken);
$('#data').on('keyup change', validateJson);
$('#uid').on('keyup change', setJsonId);

$('#createToken')
    .on('submit', createToken)
    .find('input,textarea')
    .on('keyup change', setCreateButton)
    .on('keyup change', logCreateFormat);
$('#testToken')
    .on('submit', testToken)
    .find('input,textarea')
    .on('keyup change', setTestButton);

$('fieldset.collapsible legend a').click(function(e) {
   e.preventDefault();
   toggleMoreInfo($(this).closest('fieldset'));
});

$('a[href="#max"]').click(function(e) {
    e.preventDefault();
    $('#expires').val('+9999999 days');
});

toggleMoreInfo($('fieldset.collapsible'));
setCreateButton();
setTestButton();
setJsonId();
logCreateFormat();

function setCreateButton() {
    var b = !$('#secret').val();
    $('#createToken').find('button').prop('disabled', b);
}

function setTestButton() {
    var b = !$('#instance').val() || !$('#token').val();
    $('#testToken').find('button').prop('disabled', b);
}

function setJsonId() {
    var uid = $('#uid').val();
    var out = $('#data').val();
    try {
        var json = JSON.parse(out || '{}');
        json.uid = uid;
        out = JSON.stringify(json, null, 2);
    } catch (e) {
        logErr(e);
    }
    $('#data').val(out);
}

function validateJson() {
    log('');
    var data = parseData();
    if( data !== false ) {
       logCreateFormat();
    }
}

function createToken(e) {
    e.preventDefault();
    var secret = $('#secret').val();
    var data = parseData();
    if( data !== false ) {
        var props = getAdminProps();
        var tokGen = new FirebaseTokenGenerator(secret);
        var token = tokGen.createToken(data, props);
        log(token);
        $('#token').val(token);
        selectLog();
    }
    return false;
}

function getAdminProps() {
    var exp = parseDate($('#expires').val());
    var notBefore = parseDate($('#notBefore').val());
    var...