Firebase Login- Alex Testing

Login to firebase, create account, etc.

by Alex Cowan

HTML

<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBWOdIjk2G0TjwOp37_f_hMU-x0XU17XYY",
    authDomain: "platform-to-application-demo.firebaseapp.com",
    databaseURL: "https://platform-to-application-demo.firebaseio.com",
    projectId: "platform-to-application-demo",
    storageBucket: "platform-to-application-demo.appspot.com",
    messagingSenderId: "808228645988"
  };
  firebase.initializeApp(config);
</script>

<h3>Custom Login</h3>

<!-- allows us to easily switch between login and registration -->
<input type='checkbox' id='form-switch'>
<!-- **AC: write this up that this is a fake/invisible checkbox -->

<!-- LOGIN -->
<!-- onsubmit="return false" will stop the form submission but allow us to pick up the submission in JQuery with $('#login-form').submit(), otherwise JSFiddle can break. 
**JB: Is there anything special you have to do w/ the post to encrypt the credentials or that just happens w/ SSL on HTTPS?
**JB: did some google'ing and I think I get it but could we quickly step through the HTML, CSS that transitions the forms?
-->

<!-- Login -->
<form id='login-form' method='post' onsubmit="return false">
  <input type="text" placeholder="Email" id="login_email" required>
  <input type="password" placeholder="Password" id="login_pwd" required>
  <button type='submit'>Login</button>
  <label for='form-switch'><span>Register</span></label>
</form>

<!-- Registration -->
<form id='register-form' method='post' onsubmit="return false">
  <input type="text" placeholder="Email" id="register_email" required>
  <input type="password" placeholder="Password" id="register_pwd" required>
  <input type="password" placeholder="Confirm Password" id="register_re_pwd" required>
  <button type='submit'>Register</button>
  <label for='form-switch'>Already Member ? <b>Sign In..</b></label>
</form>

CSS

form {
  margin:0 auto;
  width:300px
}
h3 {
  font-family:sans-serif;
  text-align:center;
}
input {
  margin-bottom:3px;
  padding:10px;
  width: 100%;
  border:1px solid #CCC
}
button {
  padding:10px;
  cursor:pointer;
}
label {
  cursor:pointer;
  font-family:sans-serif;
}
/* Affects only the element explicitly ID'ed as said element */
#form-switch {
  display:none;
}
#register-form {
  display:none
}
#form-switch:checked~#register-form {
  display:block;
}
#form-switch:checked~#login-form {
  display:none;
}

JavaScript

// "listener function", listens for the login form to be submitted
$('#login-form').submit(function(){
	// pass the login email and pwd to our login handler function (below)
	login_user($('#login_email').val(), $('#login_pwd').val());
});

// "handler function" for logins, called by our "listener" above
function login_user(email, pwd) {
	console.log("attempting to login user " + email); // for testing
  
  // use the Firebase API to sign in the user
  firebase.auth().signInWithEmailAndPassword(email, pwd).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      alert("Login Error: " + errorMessage);
    });
} 
//**JB: This login function doesn't case handle with the firebase.auth().signOut().then(... function as does https://jsfiddle.net/j193bab0/37/; probably I'm missing something, but what do you see as the diff. between these implementations?

// "observer function" for Firebase login (runs as the page loads and on login/logout)
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
  	alert("Successfully signed in user " + user.email);
    // go ahead and log out the user, prevents from staying signed in indefinitely
		//**JB: probably a dumb question, but could we step through the trigger events for this next line?
    firebase.auth().signOut().then(function() {
    	// Sign-out successful.
    	alert("Successfully signed out user " + user.email);
      // Return to login screen
      $('#form-switch').prop('checked', false);
    }).catch(function(error) {
      // Handle Errors
      var errorCode = error.code;
      var errorMessage = error.message;
      alert("Sign Out Error: " + errorMessage);
    });
  }
});

// listener function for registration form submissions
$('#register-form').submit(function(){
	// pass the registration data to our register function (below)
	register_user($('#register_email').val(), 
  	$('#register_pwd').val(),
   ...