arnellebalane/index.html

## index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/4.2.0/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/4.2.0/firebase-auth.js"></script>
    <script defer src="/__/firebase/4.2.0/firebase-database.js"></script>
    <script defer src="/__/firebase/4.2.0/firebase-messaging.js"></script>
    <script defer src="/__/firebase/4.2.0/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>
    <script defer src="index.js"></script>

    <style>
      .hidden {
        display: none;
      }

      img {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <h1>Firebase Demo</h1>

    <div class="userinfo hidden">
      <img src="" alt="">
      <h2></h2>
    </div>

    <form class="hidden">
      <input type="text" name="message">
      <button>Send</button>
    </form>

    <ul class="hidden"></ul>

    <button class="auth-btn">Login with Google</button>
  </body>
</html>

## index.js
const auth = firebase.auth();
const database = firebase.database();

auth.onAuthStateChanged(function(user) {
    if (user) {
        document.querySelector('.userinfo img').src = user.photoURL;
        document.querySelector('.userinfo h2').textContent = user.displayName;
        document.querySelector('.userinfo').classList.remove('hidden');
        document.querySelector('form').classList.remove('hidden');
        document.querySelector('ul').classList.remove('hidden');
        authBtn.textContent = 'Logout';
    } else {
        document.querySelector('.userinfo').classList.add('hidden');
        document.querySelector('form').classList.add('hidden');
        document.querySelector('ul').classList.add('hidden');
        authBtn.textContent = 'Login with Google';
    }
});

const authBtn = document.querySelector('.auth-btn');

authBtn.onclick = function() {
    if (auth.currentUser) {
        auth.signOut();
    } else {
        const provider = new firebase.auth.GoogleAuthProvider();
        auth.signInWithPopup(provider);
    }
};

const form = document.querySelector('form');

form.onsubmit = function(e) {
    e.preventDefault();
    const message = this.message.value;
    database.ref('messages').push({
        message: message
    });
    this.message.value = '';
};

const ul = document.querySelector('ul');

database.ref('messages').on('child_added', function(snapshot) {
    const data = snapshot.val();
    const li = document.createElement('li');
    li.textContent = data.message;
    ul.appendChild(li);
});

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Welcome to Firebase Hosting</title>

	<!-- update the version number as needed -->
	<script defer src="/__/firebase/4.2.0/firebase-app.js"></script>
	<!-- include only the Firebase features as you need -->
	<script defer src="/__/firebase/4.2.0/firebase-auth.js"></script>
	<script defer src="/__/firebase/4.2.0/firebase-database.js"></script>
	<script defer src="/__/firebase/4.2.0/firebase-messaging.js"></script>
	<script defer src="/__/firebase/4.2.0/firebase-storage.js"></script>
	<!-- initialize the SDK after all desired features are loaded -->
	<script defer src="/__/firebase/init.js"></script>
	<script defer src="index.js"></script>

	<style>
	.hidden {
	display: none;
	}

	img {
	width: 100px;
	height: 100px;
	}
	</style>
	</head>
	<body>
	<h1>Firebase Demo</h1>

	<div class="userinfo hidden">
	<img src="" alt="">
	<h2></h2>
	</div>

	<form class="hidden">
	<input type="text" name="message">
	<button>Send</button>
	</form>

	<ul class="hidden"></ul>

	<button class="auth-btn">Login with Google</button>
	</body>
	</html>
	const auth = firebase.auth();
	const database = firebase.database();

	auth.onAuthStateChanged(function(user) {
	if (user) {
	document.querySelector('.userinfo img').src = user.photoURL;
	document.querySelector('.userinfo h2').textContent = user.displayName;
	document.querySelector('.userinfo').classList.remove('hidden');
	document.querySelector('form').classList.remove('hidden');
	document.querySelector('ul').classList.remove('hidden');
	authBtn.textContent = 'Logout';
	} else {
	document.querySelector('.userinfo').classList.add('hidden');
	document.querySelector('form').classList.add('hidden');
	document.querySelector('ul').classList.add('hidden');
	authBtn.textContent = 'Login with Google';
	}
	});

	const authBtn = document.querySelector('.auth-btn');

	authBtn.onclick = function() {
	if (auth.currentUser) {
	auth.signOut();
	} else {
	const provider = new firebase.auth.GoogleAuthProvider();
	auth.signInWithPopup(provider);
	}
	};

	const form = document.querySelector('form');

	form.onsubmit = function(e) {
	e.preventDefault();
	const message = this.message.value;
	database.ref('messages').push({
	message: message
	});
	this.message.value = '';
	};

	const ul = document.querySelector('ul');

	database.ref('messages').on('child_added', function(snapshot) {
	const data = snapshot.val();
	const li = document.createElement('li');
	li.textContent = data.message;
	ul.appendChild(li);
	});