How do I use Firebase Simple Login with email & password

Anant picture Anant · Mar 1, 2013 · Viewed 32.2k times · Source

Firebase Simple login provides an email/password option, how do I use it? Starting from from creating a user, storing data for that user, to logging them in and out.

Answer

Anant picture Anant · Mar 1, 2013

There are three distinct steps to be performed (let's assume you have jQuery):

1. Set up your callback

var ref = new Firebase("https://demo.firebaseio-demo.com");
var authClient = new FirebaseAuthClient(ref, function(error, user) {
  if (error) {
    alert(error);
    return;
  }
  if (user) {
    // User is already logged in.
    doLogin(user);
  } else {
    // User is logged out.
    showLoginBox();
  }
});

2. User registration

function showLoginBox() {
  ...
  // Do whatever DOM operations you need to show the login/registration box.
  $("#registerButton").on("click", function() {
    var email = $("#email").val();
    var password = $("#password").val();
    authClient.createUser(email, password, function(error,  user) {
      if (!error) {
        doLogin(user);
      } else {
        alert(error);
      }
    });
  });
}

3. User login

function showLoginBox() {
  ...
  // Do whatever DOM operations you need to show the login/registration box.
  $("#loginButton").on("click", function() {
    authClient.login("password", {
      email: $("#email").val(),
      password: $("#password").val(),
      rememberMe: $("#rememberCheckbox").val()
    });
  });
}

When the login completes successfully, the call you registered in step 1 will be called with the correct user object, at which point we call doLogin(user) which is a method you will have to implement.

The structure of the user data is very simple. It is an object containing the following properties:

email: Email address of the user id: Unique numeric (auto-incrementing) ID for the user

FirebaseAuthClient will automatically authenticate your firebsae for you, not further action is required. You can now use something like the following in your security rules:

{
  "rules": {
    "users": {
      "$userid": {
        ".read": "auth.uid == $userid",
        ".write": "auth.uid == $userid"
      }
    }
  }
}

This means, if my User ID is 42, only I can write or read at example.firebaseio-demo.com/users/42 - when I am logged in - and no-one else.

Note that Simple Login does not store any additional information about the user other than their ID and email. If you want to store additional data about the user, you must do so yourself (probably in the success callback for createUser). You can store this data as you normally would store any data in Firebase - just be careful about who can read or write to this data!