Search code examples
firebasefirebase-realtime-databasefirebase-authenticationfirebase-hosting

Firebase - Web Chat App sign in button doesn't work

I use windows 8. I would like to build an app using this guide.. On 7 step, I change main.js file. My file content is below :

FriendlyChat.prototype.initFirebase = function() {
  this.auth = firebase.auth();
  this.database = firebase.database();
  this.storage = firebase.storage();
  this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};


FriendlyChat.prototype.signIn = function(googleUser) {

   var provider = new firebase.auth.GoogleAuthProvider();
  this.auth.signInWithPopup(provider);
};

FriendlyChat.prototype.signOut = function() {
  this.auth.signOut();
};

FriendlyChat.prototype.onAuthStateChanged = function(user) {
if (user) { // User is signed in!
  var profilePicUrl = user.photoURL; // Only change these two lines!
  var userName = user.displayName;   // Only change these two lines!
  ....
}

FriendlyChat.prototype.checkSignedInWithMessage = function() {
  if (this.auth.currentUser) {
    return true;
  }
  ....

I create a project using firebase console. I click "Add Firebase to your web app" and click the snippet. I paste it to index.html file. The file content is below :

<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAbtFJIZZxExBZec5XjsIE6p_TK4x-NDLE",
    authDomain: "xxx-65704.firebaseapp.com",
    databaseURL: "https://xxx-65704.firebaseio.com",
    storageBucket: "xxx-65704.appspot.com",
  };
  firebase.initializeApp(config);
</script>    
<script src="scripts/main.js"></script>    
</body>

I run "firebase serve" command on cmd terminal. I open localhost:/5000and the page is below :

enter image description here

It doesn't display web chat. So I open we-start/index.html, I click "Sign in With Google". But I cannot sign in. I don't know how to fix this problem. What is my mistake?

Solution

  • Below initializations works for me.

    {

  "hosting": {
    "public": "./",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}