どうもー、
新年あけましておめでとうございます🎍
2021年の書き初めならぬ、技術記事書き初め。
ドイツでフリーランスのフルスタックエンジニアと、「オーダーメイド感覚プログラミング学習サービス | Lilac（ライレック）」の開発と運営、講師をしているArisaです。
主には自分のブログとnoteに発信してきましたが、2021年からQiitaの投稿を再開していきたいと思います。
Lilacの教材閲覧のためのwebアプリケーション開発をしているのですが、ログイン機能を今実装中です。
が、少々Firebase Authenticationがはまりやすかったので、備忘録、メンテナンスのために書いておきたいと思います。
ざっと調べた感じ、結構みんな落ちるポイントが似ていたので、自分なりにもまとめてみました。
基本はFirebase Authenticationの公式ドキュメントに沿って書いています。
状況
- FirebaseUIを使って、マジックリンクでログインできる機能の実装中
Firebase Authenticationの公式ドキュメントに書いてあるとおり、書き進めていくと以下のエラーが出た。
Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)
Error: An AuthUI instance already exists for the key "[DEFAULT]"
環境
- macOS Catalina 10.15.7
- Chrome Canary Version 89.0.4374.0
- Docz（Gatsby.js x TypeScript）
- Firebase Authentication
firebase と firebaseui をnpmモジュールで導入。
バージョンはそれぞれ以下です。
"dependencies": {
"firebase": "^8.1.1",
"firebaseui": "^4.7.1",
}
Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)
解決策
公式ドキュメントで以下のようになっていたのですが、
// TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
// ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
どうも初期化の記述が以下のようにある方が良いと、GithubのissueやStackoverflowを見ても皆さん言っている。
// TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
// ...
};
// Initialize Firebase
// 👇
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
初期化を1回以上すると起こるのだとかで、結構皆さんはまっていた様子でした。
参考にしたソース
- Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)
- Firebase公式ドキュメント: Easily add sign-in to your Web app with FirebaseUI
- FirebaseUI for Web — Auth
Error: An AuthUI instance already exists for the key "[DEFAULT]"
解決策
公式ドキュメントでこうなっていたのを
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
こう変更。
export const Login = () => {
const firebaseConfig = {
// コンフィグ
};
// firebase.initializeApp(firebaseConfig)で初期化
}
// Initialize the FirebaseUI Widget using Firebase.
const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth());
反映結果
ログイン前は「Loading...」を表示させるようにして、ログイン後は、プライバシーポリシーなどのリンクを表示します。
まだスタイルはほぼ手をつけていないので、Doczさんのforkリポジトリにしか見えませんが、スタイルは後でまずは機能優先なのであしからず🙏
Before Login
記入したメールアドレス宛にマジックリンクが届くので、クリックすると以下の画面になり、ログイン完了。
After Login
参考にしたソース
まとめ
Doczを使っているので、以下の問題に直面していました。
- Gatsby の TypeScript対応
- Docz が Gatsbyベースでできていることを過信して、Gatsbyプラグインで対応できると信じ込んでいた（TSとの相性悪いのに気がつくのに時間かかり過ぎた）
- Firebase Authenticationの公式ドキュメントに直行せず、quick start的なソースからみて回ったのが、かえって情報に惑わされた
でも結果的にできたのでめでたし。
Doczを使っている人やプロジェクトをあまりまだ見かけないので、もしDocz（TS）でFirebase Authenticationでログイン機能実装したいって人がいれば、参考になれば嬉しいです。
まだまだエンジニアとして成長したいので、「こうした方がいいよ」というアドバイスなどがあれば、コメントしていただけるととても喜びます🙏