How do i check if an email address exists when user signup (Angularjs and Firebase)

Question

I am currently working on a project thats using firebase and angularjs and i want my application to check if an email already exists everytime a user try to create an account.

here is HTML markup:

<div class="well text-center">
  <h1 class="text-info"><i class="fa fa-group socio_icon"></i></h1>
    <h1>Blog title</h1>
    <p class="lead">Slogan goes here</p>

    <form name="signup_form" novalidate autocomplete="off">
        <p>
          <div class="input-group input-group-lg" ng-class="{'has-error': signup_form.fullnames.$dirty && signup_form.fullnames.$invalid , 'has-success': signup_form.fullnames.$valid}">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input type="text" class="form-control" placeholder="Enter full names" name="fullnames" ng-model="signup.form" ng-minlength=5 ng-maxlength=45 required />
                <span class="input-group-addon valid" ng-show="signup_form.fullnames.$dirty && signup_form.fullnames.$valid"><i class="fa fa-check-circle text-success"></i></span>
                <span class="input-group-addon valid" ng-show="signup_form.fullnames.$dirty && signup_form.fullnames.$invalid"><i class="fa fa-exclamation-circle text-warning"></i></span>
          </div>
            </p>

          <p>
          <div class="input-group input-group-lg" ng-class="{'has-error': signup_form.email.$dirty && signup_form.email.$invalid , 'has-success': signup_form.email.$valid}">
                <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                <input type="email" class="form-control" placeholder="Enter email address" name="email" ng-model="signup.email" ng-minlength=5 ng-maxlength=45 required />
                <span class="input-group-addon valid" ng-show="signup_form.email.$dirty && signup_form.email.$valid"><i class="fa fa-check-circle text-success"></i></span>
                <span class="input-group-addon valid" ng-show="signup_form.email.$dirty && signup_form.email.$invalid"><i class="fa fa-exclamation-circle text-warning"></i></span>
            </p>

          <p>
          <div class="input-group input-group-lg" ng-class="{'has-error': signup_form.password1.$dirty && signup_form.password1.$invalid , 'has-success': signup_form.password1.$valid}">
                <span class="input-group-addon"><i class="fa fa-lock"></i></i></span>
                <input type="password" class="form-control" placeholder="Enter password" name="password1" ng-model="password1" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" ng-minlength=6 ng-maxlength=45 required />
                <span class="input-group-addon valid" ng-show="signup_form.password1.$dirty && signup_form.password1.$valid"><i class="fa fa-check-circle text-success"></i></span>
                <span class="input-group-addon valid" ng-show="signup_form.password1.$dirty && signup_form.password1.$invalid"><i class="fa fa-exclamation-circle text-warning"></i></span>
          </div>

            </p>

            <p>
          <div class="input-group input-group-lg" ng-class="{'has-error': signup_form.password2.$dirty && signup_form.password2.$invalid , 'has-success': signup_form.password2.$valid}">
                <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                <input type="password" class="form-control" id="password2" name="password2" ng-model="password2" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required placeholder="Re-enter password"/>
                <span class="input-group-addon valid" ng-show="signup_form.password2.$dirty && signup_form.password2.$valid"><i class="fa fa-check-circle text-success"></i></span>
                <span class="input-group-addon valid" ng-show="signup_form.password2.$dirty && signup_form.password2.$invalid"><i class="fa fa-exclamation-circle text-warning"></i></span>
          </div>

      </p>
      <p>
        <button type="submit" ng-disabled="signup_form.$invalid" class="btn btn-primary btn-lg btn-block">Singup and enjoy!
        </button>
      </p>
    </form>
</div>

and the js looks like this:

'use strict';

angular.module('myApp')
  .controller('MainCtrl', function ($scope) {

    var ref = new Firebase('https://myfirebase.firebaseio.com/');


  });

Answer 1

The typical method for checking existence of records in Firebase is to use an index. Since firebase does not certain characters in references , you will need to escape the email first.

Since this is a common question I have a gist showing how to do this .

The "gist", to forgive a pun, is that you need to create an index whenever you create users, and then check that index:

var fb = new Firebase(URL);

function isDuplicateEmail(email, callback) {
  fb.child('email_index/'+escapeEmail(email)).once('value', function(snap) {
     callback( snap.val() !== null );
  });
}

function updateUser(user_id, email) {
   fb.child('user/'+user_id).set({email: email});
   fb.child('email_index/'+escapeEmail(email)).set(user_id);
}

function escapeEmail(email) {
  return (email || '').replace('.', ',');
}