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
- Begin with the starter-code
- Have a go at the slides
- Learn more by reading the Firebase Documentation
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
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
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
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);
});