Nuxtでfirebase authentication UIの日本語化

firebase authentication UIの日本語化をやっていきます。
ほとんど、firebase authentication UI を使う方法をほとんど同じなんで、すぐできるのではないでしょうか。

まずは日本語化の前にfirebase authentication UI を使えるようにしなければなりません。
まだの方はこちらの記事をご覧ください。

firebase auth UI の日本語化

firebase authentication UIを日本語化するには auth UIを使うときにインストールしたfirebaseuiでなく、firebaseui-jaをインストールする必要があります。
(firebaseuiはアンインストールしてもOK)

npm install firebaseui-ja

あとはfirebaseuiを使っていたところをfirebaseui-jaに置き換えます。

例えば

require('firebaseui') → require('firebaseui-ja')

import 'firebaseui/dist/firebaseui.css' → import 'firebaseui-ja/dist/firebaseui.css'

などです。

見てみると日本語化されています！！

コードのまとめ

import firebase from 'firebase/app'
if(firebase.apps.length === 0){
    firebase.initializeApp(
        {
            apiKey: "AIzaSyCEkOx7J1k33QEs_cqn0Z2ocVN8iXzUkp8",
            authDomain: "fir-authui-9f07c.firebaseapp.com",
            projectId: "fir-authui-9f07c",
            storageBucket: "fir-authui-9f07c.appspot.com",
            messagingSenderId: "277729373844",
            appId: "1:277729373844:web:27b3e51a6c6c4fb8e60e81"
        }
    )
}

export default firebase

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

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

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

    //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>