Logged in user information does not appear using Firebase!

Question

I’m developing a web-app! In this case, a chat, however, a chat with new and cool functions!

I’m doing it just for learning and fun!

In the app, I’m using Firebase, to create Logins, Notifications etc!

My question is: I am not able to show the user information on the site!

Pages

---

• Index:

<div class="ui secondary  menu">
    <button onclick="window.location.href = '/';" class="ui inverted button">Home </button>

    <div class="right menu">
        <button id="sair-but" class="ui inverted button">Sair </button>
    </div>
</div>

<br>
<br>
<br>

<center>

    <div class="ui container">

        <div class="ui negative message" style="display: none;">
            <i class="close icon"></i>
            <div class="header">Você não está logado! </div>
            <p>Você precisa estar logado para enviar mensagens. </p>
        </div>

        <!-- Logue-se -->
        <div id="logue-se">
            <h1>Logue-se usando suas redes sociais:</h1>

            <!--  Botoes de login -->
            <button class="ui google plus button" id="login-but"><i class="google icon"></i> Google </button>

        </div>

        <div id="perfil">

            <img class="ui medium circular image" id="img-perfil" width="100px" height="100px">

            <h2 id="name"></h2>

        </div>
    </div>

</center>



<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

<script src="login.js"></script>

---

• Login.js:

  $("#login-but").click(function() {

      var provider = new firebase.auth.GoogleAuthProvider();
      provider.addScope('https://www.googleapis.com/auth/plus.login');

      firebase.auth().signInWithRedirect(provider);
      firebase.auth().getRedirectResult().then(function(result) {
          if (result.credential) {
              // 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;
      }).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;
          // ...
      });

  });

  var user = firebase.auth().currentUser;

  if (user != null) {
      user.providerData.forEach(function(profile) {
          console.log("Sign-in provider: " + profile.providerId);
          console.log("  Provider-specific UID: " + profile.uid);
          console.log("  Name: " + profile.displayName);
          console.log("  Email: " + profile.email);
          console.log("  Photo URL: " + profile.photoURL);
      });
  }

  // Logout
  $("#sair-but").click(function() {
      firebase.auth().signOut().then(function() {
          // Sign-out successful.
      }, function(error) {
          // An error happened.
      });

  });

---

In case my question is still not very clear, please let me know!

Always when I try to get user information, it doesn’t make a mistake. It simply doesn’t do anything! It’s like the user isn’t logged in.

I want to make a system that when the user is not logged in! The div appears logue-se.

And if you’re logged in, his photo and his name appear below!

Answer 1

First you have to start the application with

firebase.initializeApp({
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
  });

then you have to add (at least) the auth script, since you are using it, in firabse.auth().

<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-auth.js"></script>

And, of course, don’t forget to refer to jQuery (in the example you don’t have it either). Finally, if you put one console.log(error) in the role of .catch() it will be easy for you to continue to understand what is going on :)