Help us understand the problem. What is going on with this article?

【React】Firebase Authで、アカウントに複数のプロバイダを紐付ける

Firebase Authentication、とても便利ですよね。

今回、Firebase Authenticationを使って、Googleログインしたアカウントに対して、電話番号を紐付けます。

Firebaseの準備

Fireabse Authの設定方法はこちら
ログイン方法として、電話番号Google有効にしておいてください。

googleアカウントでの認証

まずはgoogleアカウントで認証させます。
signInWithPopupというメソッドを使います。

電話番号での認証

次に、電話番号での認証です。
reCAPTCHAの設定がちょっとめんどくさいので注意しましょう。
signInWithPhoneNumberというメソッドを使います。

アカウントに複数の認証プロバイダをリンク

ここまで完了したら、
currentUserに対して、linkAndRetrieveDataWithCredentialというメソッドを使い、アカウントに複数の認証プロバイダをリンクさせることができます。

以下のようになっていればOKです。
スクリーンショット 2019-07-13 16.34.45.png

とても簡単に実装することができました。
2要素認証とかも簡単に実現できますね。

今回作成したソースコードをgithutbで公開しています。こちらから
(めっちゃ無駄ですが、アーキテクチャとして、Reduxを採用しています。。。
ちょっと前にリリースされたhooks APIに対応した機能を使ってみたくて...)

参考: 公式ドキュメント

以上です。

katsuomi
Nagoya Univ B4, software Engineer
https://katsuomi.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした