nuxtの環境でFirebaseを使用出来るようにする

既にfirebaseプロジェクトは作成済みのプロジェクトにFirebase JavaScript SDK をインストールしたいと思います。

Firebase JavaScript SDK をインストール

• Firebase SDKとは

  Firebase Admin SDK は、Cloud Firestore と他のいくつかの Firebase プロダクト（Firebase Auth や Firebase Cloud Messaging など）へのアクセスを単一のライブラリにまとめたものです。 https://firebase.google.com/docs/firestore/client/libraries?hl=ja

• インストール

yarn add firebase save

Add Firebase to your JavaScript project

Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオン - Qiita

この状態で立ち上げたらモジュールが無いエラーが発生

• とりあえずyarnしてみるもNG

• この記事を参考に個別installを試すもNG

Nuxt × Firebaseの環境を作ったときにcore-jsまわりで怒られたこと - mitsuのぶろぐ

yarn add @firebase/auth
yarn add @firebase/firestore
yarn add @firebase/app

• エラーメッセージに表示されていたnpm install を試すもNG

コマンド

npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable

エラーメッセージ

npm ERR! code ENOLOCAL
npm ERR! Could not install from "core-js/modules/es6.array.find" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nakaokeisuke/.npm/_logs/2020-07-09T00_09_28_405Z-debug.log

どうやらcore-jsのverの違いによるものっぽい

NuxtとFirebaseでcore-jsのエラー - nulltempのブログ

yarn add core-js@^3

がNG・・・世の中の記事だと3に上げると書いてあるが俺の場合はむしろ2なのでは・・・？

yarn add core-js@^2

これで解決！！！ package.jsonの変更履歴を確認すると元々core-jsが入って無かったよう・・・

firebase login

firebase init

• 既存のプロジェクトを選択

nuxt内でFirebaseを初期化

plugin/firebaseConfig.jsの作成

import firebase from 'firebase'

firebase.initializeApp(
  {
    apiKey: "api-key",
    authDomain: "project-id.firebaseapp.com",
    databaseURL: "https://project-id.firebaseio.com",
    projectId: "project-id",
    storageBucket: "project-id.appspot.com",
    messagingSenderId: "sender-id",
    appID: "app-id",
  }
);

export default firebase

app/middleware/authenticated.jsに以下の記載

import firebase from "~/plugins/firebaseConfig"
export default function ({ redirect, route }) {
  if (route.path !== "/user/sign-up" && route.path !== "/user/login") {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log(user)
      } else {
        return redirect("/user/login")
      }
    })
  }
}

nuxt.config.jsのrouterのmiddlewareに上記のauthenticatedを読み込ませる事でページ遷移前に処理を走らせる事が可能

  router: {
    middleware: ['authenticated'],
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, '@/pages/error.vue')
      })
    }
  }