Authenticate with Firebase in JavaScript

Today i will create a login authentication with Google firebase in Javascript it is very easy with freebase to create login authentication, register, Google Sign-in ,Facebook Login ,Twitter and GitHub, Phone number, Custom Auth System ,Anonymous Authentication , Passing State in Email Actions anything we want to create.To create authentication with firebase you have to create a account or you can your gmail account and then create no sequel database and get the details of database like i have in my html document.
Demo

JavaScript of App

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        console.log('login')
        $('#modal1').closeModal();
        var user = firebase.auth().currentUser;
        if (user != null) {
            user = user.email
            document.getElementById('profile').textContent = user;
 $('.light-blue').css('display','block');
        }
         $('.light-blue').show()
    } else {
        $("#modal1").openModal({
            dismissible: false,
            opacity: 1
        })
        $('.light-blue').hide();
         }
});
document.getElementById('logOut').addEventListener('click', function() {
    firebase.auth().signOut().then(function() {
        alert('Are you sure you want to log Out?');
    }, function(error) {
        Materialize.toast(error.message, 4000)
    });
})
document.getElementById('login').addEventListener('click', function() {
    var email, password;
    email = document.getElementById('email').value;
    password = document.getElementById('password').value;
    if (email != '' && password != '') {
        firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
            Materialize.toast(error.message, 4000)
            Materialize.toast('Register First to login.', 4000);
        });
    } else {
        Materialize.toast('All fields are required for login.', 4000);
         Materialize.toast('Register First to login.', 4000);
    }
})
document.getElementById('register').addEventListener('click', function() {
    var email, password;
    email = document.getElementById('email').value;
    password = document.getElementById('password').value;
    if (email != '' && password != '') {
        firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
            Materialize.toast(error.message, 4000)
        });
    } else {
        Materialize.toast('All fields are required for registeration.', 4000);
    }
})

HTML of Application

<html>
<head>
 <title>The Materialize Dialogs Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">     
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<style>
.lean-overlay{
  background-color:#fff;
  z-index: 999;
 }
.loader {
  position: absolute;
  top :0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>
 <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>          
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
      <script>
$(window).load(function() {
  $(".preloader-wrapper").fadeOut();
});
      </script>
   </head>
   <body>
     <div class="preloader-wrapper big loader active">
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
        <div class="circle"></div>
      </div><div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>
<nav class="light-blue lighten-1" style="display:none;" role="navigation">
    <div class="nav-wrapper container">Demo
      <ul class="right hide-on-med-and-down">
        <li id="profile"></li>        
        <li>Log Out</li>
      </ul>
      </div>
  </nav>
       <div id="modal1" class="modal">
    <div class="modal-content">
        <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="password" type="password" class="validate">
          <label for="password">Password</label>
        </div>
      </div>
    </form>
  </div>
    </div>
    <div class="modal-footer">
              lockRegister
              lockLog In
    </div>
  </div>
   <script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyDHuWFreKpp1rCx9PoNJsxaJ02JURMihWE",
    authDomain: "authtest-e03e4.firebaseapp.com",
    databaseURL: "https://authtest-e03e4.firebaseio.com",
    projectId: "authtest-e03e4",
    storageBucket: "authtest-e03e4.appspot.com",
    messagingSenderId: "394185954740"
  };
  firebase.initializeApp(config);
</script>
	<script src="app.js">
	</script>
  </body>
</html>

Leave a Reply Cancel reply