firebase UIのSNSログインボタンをカスタマイズする方法 firebase-auth

https://github.com/firebase/firebaseui-web#customizing-firebaseui-for-authentication

firebase UIめちゃめちゃ便利ですよね。OAuthの実装をせずに、SNSアカウントを使ったユーザー認証を簡単に行うことができます。

しかしこのfirebase UI、各種SNSボタンのスタイルを変更することはできません

Customizing FirebaseUI for authentication

Currently, FirebaseUI does not offer customization out of the box. However, the HTML around the widget is not affected by it so you can display everything you want around the widget container.

GitHub – firebase/firebaseui-web: FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.

↑firebase UIを使ったSNSログインボタンは、このデザインの見た目から変更することができないのです。

オリジナルのボタン作りたい

サービスの全体的な見た目を考慮すると、デフォルトstyleでは物足りないと感じてしまいます。今回は、firebase UIのSNSボタンデザインを力ずくで変更する方法についてご紹介します。

解決策

firebase UIでレンダリングされるHTML要素を直接叩きます。

  1. firebaseUIを読み込む
  2. SNSボタンのclass名を調べる
  3. buttonを自分で実装する
  4. buttonのonClickイベントでclass要素を直接叩く
  5. firebaseUIを隠す

1 firebaseUIを読み込む

https://firebase.google.com/docs/auth/web/firebaseui?hl=ja

ドキュメントに従って

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

をHTML要素に埋め込みます。

2 SNSボタンのclass名を調べる

chromeのconsoleから実際にレンダリングされるSNSボタンのid,class名を調べてください。例えばGoogleアカウントのSNSボタンには

'firebaseui-idp-google'

というclass名がついています。これを一旦どこかにメモっておいてください。

3 buttonを自分で実装する

続いて自分でボタンを実装します。これは作りたいオリジナルデザインのボタンになります。

4 buttonのonClickイベントでclass要素を直接叩く

3で作ったボタンのonClickイベントで、先ほどメモしたSNSボタンのclass要素を直接クリックする処理を書きます。先ほどの例でいうと、

document.getElementsByClassName('firebaseui-idp-google')[0].click()

onClickのタイミングで↑をすると、オリジナルのボタンをクリックしたというユーザー体験を、実質firebaseUIのボタンをクリックしたことにできます

5 firebaseUIを隠す

最後に、オリジナルボタンを表示したらfirebase UIのボタンが見えなくなるようにしなければいけません。

<div id="firebaseui-auth-container" style="display: none" />

firebase UIの要素を↑のように変えて、昔のボタンが表示されないようにしましょう!