Very Simple Introduction to Firebase Authentication and Database for Web

This is the source code for the Intro to Firebase for Web developers hangout organzied by GDG Port Harcourt on September 30th, 2017. It includes the basic html, css and js files to get you started, the slides presented and the final complete version.

Check out the DEMO of the complete version

Following along

• Begin with the starter-code
• Have a go at the slides
• Learn more by reading the Firebase Documentation

Register with Email and Password

firebase.auth().createUserWithEmailAndPassword(email, password)
.then(function(result) {
  // this function is called if the registration was successful
  console.log(user);
  alert('Yay! Your registration was successful!');
})
.catch(function(error) {
  // this catch function is triggered if registration fails
  var errorCode = error.code;
  var errorMessage = error.message;
  alert(errorMessage);
});

Learn more from the Firebase Documentation

Login with Email and Password

firebase.auth().signInWithEmailAndPassword(email, password)
.then(function(result) {
  // this function is called if the login attempt was successful
  console.log(user);
  alert('Yay! Your log in was successful!');
})
.catch(function(error) {
  // this catch function is triggered if login attempt fails
  var errorCode = error.code;
  var errorMessage = error.message;
  alert(errorMessage);
});

Learn more from the Firebase Documentation

Login with Google

The following code will fail if you are running your site by directly opening the file with your browser. A requirement for logging users in through the federated providers (e.g. Google) is to run your site through a server.

To fix this challenge, refer to the Firebase Hosting slide to learn how to set up your site for hosting on Firebase. Then instead of running fireabse deploy, run firebase serve

You'll be given a localhost:port url to test your site with. Google login should work now!

var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
  alert('You have been signed in successfully!');
})
.catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
  alert(errorMessage);
});

Learn more from the Firebase Docs

Sign out completely

firebase.auth().signOut()
.then(function(result) {
  // Sign-out successful
  alert('You have been signed out!');
})
.catch(function(error) {
  // an error occured
  var errorCode = error.code;
  var errorMessage = error.message;
  alert(errorMessage);
});

Expect a couple more updates