### Mail/PW認証を追加したい

Firebaseを使用してWebのリアルタイムチャットを作成しています。  
Firebaseが展開しているサンプルコード（[Friendly
Chat](https://codelabs.developers.google.com/codelabs/firebase-
web/#0)）をベースにしています。  
[サンプルコード](https://github.com/firebase/friendlychat-
web/tree/master/web)では、Google認証が実装されているのですが、Mail/PW認証を追加したいと考えています。  
公式で展開されているMail/PW認証のコードを追加したのですが、認証がうまくいきません。

公式の認証コード  
<https://firebase.google.com/docs/auth/web/start?hl=ja>

### 発生している問題

上記リンク先のコードをもとに、下記の通り記載しているのですが、  
Mail/PW認証のリンクに遷移できません。  
具体的には、Webページ上のsignInボタンを押下してもポップアップが表示されず、Google認証もML/PW認証もできません。

### 該当のソースコード

```

    function createUser(){
      firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // ...
        });
    }
    
    function signIn() {
      // TODO 1: Sign in Firebase with credential from the Google user.
      var provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithPopup(provider);
      firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
      // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
      // ...
      });
    }
    
    （省略）
    
    var signInButtonElement = document.getElementById('sign-in');
    var signOutButtonElement = document.getElementById('sign-out');
    var signInSnackbarElement = document.getElementById('must-signin-snackbar');
    
    // Saves message on form submit.
    messageFormElement.addEventListener('submit', onMessageFormSubmit);
    signOutButtonElement.addEventListener('click', signOut);
    signInButtonElement.addEventListener('click', signIn);
    
    
```

```

      <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
        <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
          <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
            <h3><i class="material-icons">chat_bubble_outline</i> Snoopath</h3>
          </div>
          <div id="user-container">
            <div hidden id="user-pic"></div>
            <div hidden id="user-name"></div>
            <button hidden id="sign-out" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
              Sign-out
            </button>
            <button hidden id="sign-in" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
              <i class="material-icons">account_circle</i>Sign-in with Google
            </button>
          </div>
        </div>
      </header>
    
    
```

### 問題の発生した環境

・JaveScript  
・Firebase
CC BY-SA 4.0
2019-07-09T14:46:52.647
56521
2019-07-09T14:46:52.647
2020-06-17T08:14:45.997
-1
35040
question
javascript firebase
ML/PWのログイン認証を実装したい