https://github.com/itswisdomagain/firebase-for-web-beginner
Slides and source code for the Intro to Firebase for Web developers hangout organized by GDG Port Harcourt. 30 - 09 - 2017.
https://github.com/itswisdomagain/firebase-for-web-beginner
firebase firebase-auth firebase-database firebase-hosting gdg gdg-port-harcourt
Last synced: about 2 months ago
JSON representation
Slides and source code for the Intro to Firebase for Web developers hangout organized by GDG Port Harcourt. 30 - 09 - 2017.
- Host: GitHub
- URL: https://github.com/itswisdomagain/firebase-for-web-beginner
- Owner: itswisdomagain
- Created: 2017-10-02T07:35:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-02T10:03:35.000Z (over 8 years ago)
- Last Synced: 2025-07-18T18:30:22.072Z (12 months ago)
- Topics: firebase, firebase-auth, firebase-database, firebase-hosting, gdg, gdg-port-harcourt
- Language: JavaScript
- Size: 3.61 MB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://intro-to-firebase-web.firebaseapp.com)
## Following along
- Begin with the starter-code
- Have a go at the slides
- Learn more by reading the [Firebase Documentation](https://firebase.google.com/docs/auth/)
## 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](https://firebase.google.com/docs/auth/web/password-auth#create_a_password-based_account)
## 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](https://firebase.google.com/docs/auth/web/password-auth#sign_in_a_user_with_an_email_address_and_password)
## 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](https://firebase.google.com/docs/auth/web/google-signin)
## 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