firebase authentication UIをNuxt.jsで使ってみる

firebase authentication UI を使うときに、エラーが出たりしてハマったので、authentication UIを使うまでの手順を残しておきたいと思います。

Nuxt.jsのプロジェクト作成

npm init nuxt-app firebase-authUI

必要なパッケージのインストール

firebase authentication UI を利用していく上で、firebase と firebaseuiのパッケージを使うのでインストールします。

npm install firebase firebaseui

Nuxtでfirebase authentication UIを使っていく

firebaseのプロジェクトを作っておく

今回はfirebaseを使うということで、API keyが必要になってきます。
firebase consoleから、firebase CLIのどちらでも良いのでプロジェクトを作成しておいてください。

~/plugins に firebase.jsを作成する。

import firebase from 'firebase'

if(firebase.apps.length === 0){
    firebase.initializeApp(
        {
            //各自のAPI key
            apiKey: "**************",
            authDomain: "****************",
            projectId: "************",
            storageBucket: "***********",
            messagingSenderId: "*************",
            appId: "************",
            measurementId: "***********"   
        }
    )
}

export default firebase

firebase authentication UI の呼び出し

<template>
  <div>
    <div id="firebase-authui"></div>
  </div>
</template>

<script>
import firebase from '~/plugins/firebase'
import 'firebaseui/dist/firebaseui.css'

export default{
  mounted(){
    const firebaseui = require("firebaseui");

    //firebaseuiの設定
    const uiConfig = {
      //signin成功後に遷移先
      signInSuccessUrl:'/', 
      //signin方法
      signInOptions:[
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ]
    }

    //再度アクセスした時に、もう一度 new するとerrorが出るため分岐
    if(firebaseui.auth.AuthUI.getInstance()){
      const ui = firebaseui.auth.AuthUI.getInstance();
      ui.start('#firebase-authui', uiConfig);
    }
    else{
      const ui = new firebaseui.auth.AuthUI(firebase.auth());
      ui.start('#firebase-authui', uiConfig);
    }
  }
}
</script>

ここでアクセスしてみると、下のようなログイン画面が作られている。

ただ、Sign in with Googleをクリックしてみるとわかるが、まだ動作しない。
動作させるにはサインインメソッドを有効化する必要がある。