Nuxt.jSでfirebaseui-webを使ってログインするメモ

前提
pages/index.vue
components/FirebaseAuth.vue
.env
確認
参考

前提

nuxt プロジェクト作成
firebase ログイン・プロジェクト作成
npm -S install firebase firebaseui @nuxtjs/dotenv

pages/index.vue

<template>
  <div class="row">
    <div class="col s12 m7">
      <FirebaseAuth/>
    </div>
  </div>
</template>

<script>
import FirebaseAuth from '~/components/FirebaseAuth.vue'

export default {
  components: {
    Card,
    FirebaseAuth,
  }
}
</script>

components/FirebaseAuth.vue

<template>
  <div id="firebaseui-auth-container"/>
</template>

<script>
import firebase from "firebase";
import 'firebase/auth'

const uiConfig = {
  signInSuccessUrl: '/',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  ],
};

const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  databaseURL: process.env.DATABASE_URL,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSender_Id: process.env.MESSAGING_SENDER_ID,

}
export default {
  mounted() {
    if (!firebase.apps.length && process.browser) {
      require('firebaseui/dist/firebaseui.css');
      const firebaseui = require('firebaseui');
      firebase.initializeApp(firebaseConfig);
      const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth());
      ui.start("#firebaseui-auth-container", uiConfig);
    }
  },
}
</script>

import * as firebaseui from 'firebaseui' とかするとエラーになるので require で firebaseui の js と css を読み込む

.env

API_KEY="hogehoge"
AUTH_DOMAIN="hoge-11234.firebaseapp.com"
DATABASE_URL="https://hoge-11234.firebaseio.com"
PROJECT_ID="hoge-11234"
STORAGE_BUCKET="hoge-11234.appspot.com"
MESSAGING_SENDER_ID="1234567890"