React + FirebaseでTwitter認証の情報をfirestoreに保存する

firebaseでサービスを作るときに多くの場合twitterやgoogleなどのOAuthを使って、認証を作ると思います。その際にソーシャルの情報(例えばユーザーネームだったり説明文だったり)をそのままサービスに使いまわしたい時があります。それを実現するためにはfirestoreにusersテーブルを作って、認証時に返ってくるレスポンスデータを保存しておく必要があります。
今回はtwitter認証の情報を元にfirestoreにデータを保存していきます。コードはReactを想定しています。

twitter認証するためのコード

ここでは単純なtwitter認証を実装しています。認証方法については省略しますので、わからない方は公式のドキュメントを参照してください。
twitter認証に関するドキュメント
firebase.google.com

ここでは単純にtwitterの認証をして返ってくるデータをconsoleで見れるようにしてあります。

const onTwitterLogin = () => {
  const provider = new firebase.auth.TwitterAuthProvider();
  firebase
    .auth()
    .signInWithPopup(provider)
    .then(res=> {
      cosole.log(res);
    })
    .catch(err => {
      console.log(err);
    });
};

それではブラウザのcosoleでレスポンスデータをみてみましょう。twitterのプロフィール情報や、jwtトークン、access tokenなどの情報が入っています。ここから必要な情報だけをとって、firestoreに保存していきましょう。

firestoreにユーザー情報を保存するコード

だいたいこんな感じのコードになりました。firestoreにデータを保存したい場合はfirestore.setを使います。

  const onTwitterLogin = () => {
    const provider = new firebase.auth.TwitterAuthProvider();
    const firestore = firebase.firestore();
    firebase
      .auth()
      .signInWithPopup(provider)
      .then((res) => {
        return firestore
          .collection('users')
          .doc()
          .set({
            uid: res.user.uid,
            displayName: res.user.displayName,
            photoURL: res.user.photoURL、
　　　 userID: res.additionalUserInfo.username,
          });
      })
      .then(() => {
        console.log('success');
      })
      .catch(err => {
        console.log(err);
      });

自分のuserIDをドキュメントIDにしたい

例えば個別のユーザーページがあったとして、ランダムで生成されたドキュメントIDではなくユーザーのIDにしたい場合があります。その場合は.doc()にuserIDを指定します。

.doc(res.additionalUserInfo.username)

すると、自分のuserIDがドキュメントIDになります。