Nuxt.jsでFirebase Authを使ってみる

2021/05/30

#Vue.js/Nuxt.js

個人プロジェクトでNuxt.jsでFirebase Authを使うことになったので備忘録として書きます。

初期設定


ライブラリのインストール

npm install --save firebase


Firebaseの初期化
plugins/firebase.js

import firebase from "firebase";
if (firebase.apps.length === 0) {
firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
});
}
export default firebase;


*「Firebaseのコンソール」→「プロジェクトを設定」→「マイアプリ」から取得できるキーなどに書き換えてください。


ログインページの作成


今回はGoogleログインで実装します。
Authenticationの設定からGoogleを有効化します。

pages/login.vue

<template>
  <div class="top">
      <h1>ログイン</h1>
      <button @click="google">Googleアカウントでログイン</button>
  </div>
</template>

<style scoped>
</style>

<script>
import firebase from "~/plugins/firebase.js";

export default {
  methods: {
    google: function() {
      var provider = new firebase.auth.GoogleAuthProvider();
      provider.addScope("https://www.googleapis.com/auth/contacts.readonly");
      firebase.auth().languageCode = "ja";
      firebase
        .auth()
        .signInWithPopup(provider)
        .then(result => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;

          var token = credential.accessToken;
          var user = result.user;
         this.$router.push("/userpage");         
        })
        .catch(error => {
          var errorCode = error.code;
          var errorMessage = error.message;
          var email = error.email;
          var credential = error.credential;
          alert("認証に失敗しました")
          // ...
        });
    },
  }
};
</script>


ログイン状態を確認する

import firebase from "@/plugins/firebase.js";
export default {
  mounted: function() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        console.log(user)
      } else {
        fire_this.$router.push("/login");
      }
    });
  }
};


ログインした状態でページを表示するとコンソールにユーザー情報が出力されます。


関連記事:Vue.js/Nuxt.js

Nuxt.js + microCMS + Nuxt Contentでブログを作り直してみた

Vue.js/Nuxt.js

[Nuxt.js]動的なルーティングを含めてgenerateする方法

Vue.js/Nuxt.js

[Nuxt.js]nuxt.config.jsに環境変数を定義してプログラムから読み込む方法

Vue.js/Nuxt.js