JSFiddle - React, Tailwind, and code Playground

by Kato Richardson

HTML

<script src="http://cdn.firebase.com/js/client/1.0.2/firebase.js"></script>
<script src="http://cdn.firebase.com/js/client/1.0.2/firebase-simple-login.js"></script>
<h3>SO Question </h3>

<pre id="data"></pre>

CSS

pre {
    padding: 20px;
    font-size: 16px;
    line-height: 20px;
    background-color: #fafafa;
    border: 1px solid #999;
    display: block;
    border-radius: 10px;
}
.error {
    color: red;
}

JavaScript

var fb = new Firebase("https://kato-sandbox.firebaseio.com/so21350736");

var userSessionsRef = fb.child('userSessions');

var userSession;
var auth = new FirebaseSimpleLogin(userSessionsRef, function (error, user) {
    if (error) {
        console.log('login', error);
    } else if (user) {
        console.log('logged in', user);
        console.log('set', {
            user_id: user.id,
            provider: user.provider
        });
        userSessionsRef.child(user.id).set({
            user_id: user.id,
            provider: user.provider,
            created: Firebase.ServerValue.TIMESTAMP
        }, function (err) {
            if (err) {
                console.warn('SET FAILED');
                console.error(err);
            } else {
                console.log('done', arguments);               
                userSession = userSessionsRef.child(user.id);
                userSession.onDisconnect().remove(); 
                userSession.once('value', logData);
            }
        });
    }
});
auth.login('anonymous');

function logData(obj) {
    if (obj.val) {
        obj = obj.val();
    }
    return log(obj ? JSON.stringify(obj, null, 2) : obj + '');
}

function log(txt) {
    $('#data').text(txt);
}