Simple Login with Firebase

http://stackoverflow.com/questions/15167981/how-do-i-use-firebase-simple-login-with-email-password/15167983#15167983 http://stackoverflow.com/questions/16267020/firebase-simple-login-does-not-return-a-user-object

by Satheesh Kumar

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/v0/firebase-auth-client.js"></script>
<div id="dialog-register" title="Register new user">
    <form>
        <fieldset>
            <label for="name">Email</label>
            <input type="text" name="email" id="register-email" class="text ui-widget-content ui-corner-all" />
            <label for="password">Password</label>
            <input type="password" name="password" id="register-password" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>
<div id="dialog-login" title="Login user">
    <form>
        <fieldset>
            <label for="name">Email</label>
            <input type="text" name="email" id="login-email" class="text ui-widget-content ui-corner-all" />
            <label for="password">Password</label>
            <input type="password" name="password" id="login-password" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>
<button id="opener-register">Register</button>
<button id="opener-login">Login</button>
<button id="opener-logout">Logout</button>
<br />
<input id="data" />

JavaScript

// this is derived from
// http://stackoverflow.com/questions/15167981/how-do-i-use-firebase-simple-login-with-email-password/15167983#15167983


// CHANGE THIS to your own firebase
var ref = new Firebase("https://xxx.firebaseio.com");
// then go to your firebase console, click the auth tab, scroll down to 
// authentication providers, and enable 'email/password'
// Now enter this in the 'Auth' tab to the left.
/*
{
  "rules": {
    "users": {
      "$userid": {
        ".read": "auth.id == $userid",
        ".write": "auth.id == $userid"
      }
    }
  }
}
*/
//

// global user (is this a good thing?)
myUser = -1;

$(function () {
    $("#dialog-register").dialog({
        autoOpen: false,
        buttons: {
            "ok": function () {

                var email = $("#register-email").val();
                var password = $("#register-password").val();
                authClient.createUser(email, password, function (error, user) {
                    if (!error) {
                        console.log('logging new registered user');
                        doLogin(email, password);
                    } else {
                        alert(error);
                    }
                });

                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $("#dialog-login").dialog({
        autoOpen: false,
        buttons: {
            "ok": function () {
                console.log('trying to login: ' + $("#login-email").val());

                var email = $("#login-email").val();
                var password = $("#login-password").val();

                doLogin(email, password);
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $("#opener-register").click(function () {
        $("#dialog-register").dialog("open");
    });

   ...