Firebase Authentication in JavaScript: Google, GitHub, Twitter and Email Login

Firebase Authentication Implementation

The following onDeviceReady function handles user authentication, including social login with Google, GitHub and Twitter, email and password registration, email login, session monitoring and sign-out.

function onDeviceReady() {
  // Function for the login button
  // Launch Google sign-in
  if (document.querySelector('#button-login-google')) {
    document.querySelector('#button-login-google').addEventListener('click', function() {
      const provider = new GoogleAuthProvider(auth);
      signInWithRedirect(auth, provider);
    });
  }
  if (document.querySelector('#button-login-github')) {
    document.querySelector('#button-login-github').addEventListener('click', function() {
      const provider = new GithubAuthProvider(auth);
      signInWithRedirect(auth, provider);
    });
  }
  if (document.querySelector('#button-login-twitter')) {
    document.querySelector('#button-login-twitter').addEventListener('click', function() {
      const provider = new TwitterAuthProvider(auth);
      signInWithRedirect(auth, provider);
    });
    // Get the results of the sign-in session with any of the three methods
    getRedirectResult(auth).then((result) => {
      const user = result.user;
      console.log(user);
      let usuario = user.email !== null ? user.email.slice(0, user.email.indexOf('@')).replace('.', '') : user.reloadUserInfo.screenName;
      var name = user.displayName;

      let root_ref = ref(db, 'users/' + usuario);
      set(root_ref, {
        nombre: name,
        usuario: usuario
      });
    }).catch((error) => {
      console.error('Error getting the redirect result:', error);
    });
  }

  // REGISTER A USER
  if (document.getElementById('register')) {
    document.getElementById('register').addEventListener('click', function(e) {
      e.preventDefault();
      const email = document.getElementById('correo').value;
      const passwd = document.getElementById('passwd').value;
      createUserWithEmailAndPassword(auth, email, passwd)
        .then((userCredential) => {
          // Signed up
          const user = userCredential.user;
          let nombre = user.email.slice(0, user.email.indexOf('@')).replace('.', '');
          set(ref(db, 'users/' + user.uid), {
            email: user.email,
            nombre: nombre
          }).then(() => {
            console.log('Data written successfully to the database');
            window.location.replace('../index.html');
          }).catch((error) => {
            console.error('Error writing to the database:', error);
          });
        })
        .catch((error) => {
          const errorCode = error.code;
          const errorMessage = error.message;
          console.log(errorCode);
          console.log(errorMessage);
        });
    });
  }

  if (document.getElementById('log-in')) {
    document.getElementById('log-in').addEventListener('click', function() {
      const email = document.getElementById('correoL').value;
      const passwd = document.getElementById('passwdL').value;
      signInWithEmailAndPassword(auth, email, passwd)
        .then(userCredential => {
          user = userCredential.user;
        })
        .catch((error) => {
          const errorCode = error.code;
          const errorMessage = error.message;
          console.log(errorCode, errorMessage);
        });
    });
  }

  // METHOD RUN EACH TIME THE USER'S LOGIN STATE CHANGES
  onAuthStateChanged(auth, (user) => {
    if (user) {
      console.log(user);
      document.getElementById('Sin-login').setAttribute('class', 'ocultar');
      document.getElementById('Logeado').setAttribute('class', 'mb-4 border-bottom');
      if (user.photoURL) {
        document.getElementById('fotousu').src = user.photoURL;
        if (document.getElementById('perfil')) {
          document.getElementById('fotoP').src = user.photoURL;
          document.getElementById('Nombre').textContent = user.displayName;
        }
      } else {
        document.getElementById('fotousu').src = '../../img/usuario.png';
        if (document.getElementById('perfil')) {
          document.getElementById('fotoP').src = '../../img/usuario.png';
          document.getElementById('Nombre').textContent = user.displayName;
        }
      }
      const uid = user.uid;
      // ...
    } else {
      console.log('Not logged in');
    }
  });

  // SIGN OUT THE USER
  if (document.getElementById('cerrarSesion')) {
    document.getElementById('cerrarSesion').addEventListener('click', function() {
      auth.signOut();
      window.location.replace('../index.html');
      document.getElementById('Sin-login').setAttribute('class', 'mb-4 border-bottom');
      document.getElementById('Logeado').setAttribute('class', 'ocultar');
    });
  }
  if (document.getElementById('cerrarSesion2')) {
    document.getElementById('cerrarSesion2').addEventListener('click', function() {
      auth.signOut();
      window.location.replace('../index.html');
    });
  }
}