HTMLファイル１つでFirebaseのGithub認証 #GitHub

HTML

index.html

<!DOCTYPE html>
<body>
  <p id="message"><!-- hello, *** --></p>
  <button id="signin">signin</button>
  <button id="signout">signout</button>

  <!-- 依存 -->
  <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-auth.js"></script>

  <!-- メイン処理 -->
  <script>
document.addEventListener('DOMContentLoaded', () => {
  const config = {
    apiKey: '<api-key>',
    authDomain: '<project-name>.firebaseapp.com'
  };
  firebase.initializeApp(config);

  const provider = new firebase.auth.GithubAuthProvider();

  /**
   * `firebase.auth().signInWithRedirect`から戻ってきた時に
   * 問題なければ`then`で`user`や`accessToken`が渡ってくる
   */
  (async () => {
    try {
      const {user, credential} = await firebase.auth().getRedirectResult();
      /* 何か... */
    } catch (err) {
      /* エラー時の処理 */
    }
  })();

  /**
   * ログインユーザーが変わったら発火
   */
  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      document.getElementById('message').innerHTML = `hello, ${user.displayName}`;

      /**
       * ログイン中なのでログアウトできるように
       */
      document.getElementById('signout').addEventListener('click', async () => {
        try {
          await firebase.auth().signOut();
        } catch (_) {
          /* エラー時の処理 */
        }
      });
    } else {
      document.getElementById('message').innerText = '';

      /**
       * ログインまだなので、クリックでログインできるように
       */
      document.getElementById('signin').addEventListener('click', () => {
        firebase.auth().signInWithRedirect(provider);
      });
    }
  });
});
  </script>
</body>

Gif

ちょっと補足

依存

ここでは認証しか使ってないのでファイルサイズを減らすために個別に読み込むようにしてますが、Firebaseが提供する機能をすべて使いたい場合は、

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

だけでもいけます。これは、

<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-messaging.js"></script>