Working with Firebase and First Time Users

Determining when to do something the first time is simple...


Working with Firebase and First Time Users

I’ve recently started using Firebase more and more. One of the first challenges I had was the ability to tell if a user just signed up or not. It seems like an easy problem, and I have solved it time and time again on the “back end”. However with Firebase you techincally are not managing a back end, so you have to do everything in the front end logic.

At first I was just simply saying to update the data of a user everytime they visited the profile page. However this could potentially use more data and bandwidth on my Firebase than I wanted to. Since I am currently using the free version of Firebase, this becomes more of an issue.

I decided that we I would just do a simple database check first instead of pushing all the data each time.

The Solution

Let’s get into the code. This is all in JavaScript

var ref = new Firebase('https://your-app.firebaseIO-demo.com/');

First we set our firebase reference.


function getUser(authData) {
    switch(authData.provider) {
        case 'password':
           return authData.password.email;
         case 'twitter':
           return authData.twitter.username;
         case 'facebook':
           return authData.facebook.email;
         case 'google':
           return authData.google.email;
         case 'github':
           return authData.github.username;
    }    
}

Next, I want to setup a function for retrieving the user’s id. This is a simple switch statement that I use all over my site. It’s good to remember that if your going to be using a function on multiple pages then you should include it in some sort of common.js JavaScript file. This file can be included on any page you use these common JavaScript functions in.


var authData = ref.getAuth();
var userid = getUser(authData);

Alright here we get the authorization data from Firebase for the current user, and then run it through the getUser function to store the userid.


function userFirstTimeCallback(userId, exists) {
  if (exists) {
    alert('user ' + userId + ' exists!');
    // Do something here you want to do for non-firstime users...
  } else {
    alert('user ' + userId + ' does not exist!');
    // Do something here you want to do for first time users (Store data in database?)
  }
}

This is the function that we are going to call with the boolean value of whether or not the user exists. Then in here we can do what we want. For example on my site I store data to the database if they are new, but not if they are a returning user.


function checkForFirstTime(userId) {
  usersRef.child('users').child(userId).once('value', function(snapshot) {
    var exists = (snapshot.val() !== null);
    userFirstTimeCallback(userId, exists);
  });
}

Here is the meat. This function simply calls the Firebase reference and sees if the user exists. Then we pass that data to the callback function.

Simple yet efficient, and hopefully will save me just a little bit of bandwidth.

To see the full code check out: https://gist.github.com/shadowcodex/dcfe7d11b2e8cb0ca51d

About The Author:

Shannon Duncan

Shannon Duncan is the Founder and Author at Unrestricted Coding. He mentors and teaches people of all ages how to code and enjoy the art of programming. Find him on twitter, linked-in, and github.

Have you used Firebase? How was the experience? Share your feedback with us in the comment section below!