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をクリックしてみるとわかるが、まだ動作しない。
動作させるには サインインメソッドを有効化する必要がある。

firebase consoleでサインインメソッドを有効化する
firebase consoleのAuthenticationからSign-in methodにアクセスする。
すると大量にサインインメソッドがあるので、「メール/パスワード」と「Google」を有効にする。

Twitter等はAPIを申請したりするのが、面倒なので今回はメールとGoogleのみしかやりません。
Googleの「プロジェクトのサポートメール」は適宜設定してください。


Googleでログインしてみる
表示したfirebase auth UIでGoogleでログインを試してみると、ログインができるようになってる!

そしてログイン後にfirebase consoleのAuthenticationからUsersを見てみると、ユーザーとして登録されています!!!

コメント