JSFiddle - React, Tailwind, and code Playground

by stefek99

HTML

<script src="http://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.3.0/firebase-simple-login.js"></script>
<h3>Data from 'user'</h3>
<pre id="log1"></pre>

<h3>Data from 'auth'</h3>
<pre id="log2"></pre>

<a href="#" onclick="auth.login('facebook')">auth with Facebook</a>
<!-- I agree: 'user' does contain ID and provider -->

<a href="#" onclick="logAuth()">display 'auth' variable</a>

<!-- BUT auth variable does NOT contain ID nor provider -->

<!--
https://www.firebase.com/docs/security/simple-login-facebook.html

Specifically, the auth variable will contain the following values:

provider - The authentication method used, in this case: 'facebook' (string).
id - The user's Facebook id (string).
uid - A unique id combining the provider and id, intended as the unique key for user data (string).
-->

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://seconds.firebaseio.com");

// (no var) making 'auth' global
auth = new FirebaseSimpleLogin(fb, function(err, user) {
   logUser(err||user);
});

function logUser(obj) {
   if( obj.val ) { obj = obj.val(); }
   $('#log1').text(obj? JSON.stringify(obj, null, 2) : obj+'');
}

logAuth = function() {
    $('#log2').text(JSON.stringify(auth, null, 2));
    alert("ID? provider? " + auth.id + " " + auth.provider);
}