😢

FireAuthにTwitterログインを実装する際に躓いた

2022/03/17に公開

概要

FireAuthでTwitterログインの実装を初めて行ったので
そこで詰まったことをまとめておこうと思います。

まず、Twitterログインを実装するに当たって
以下のdeveloperページでアカウントを作成（Twitterアカウント使用）をする必要があります。
https://developer.twitter.com/en

その上で登録に必要なアカウントに対し、有効な電話番号とEmailアドレスが必要になります。

Twitter Developer上でProjectを作成します。
・App名
・現在いる国
・アプリの目的
・国への情報提供同意
などについて書いて作成します。

以下のようにAPI Keyを取得できるので、メモしておきましょう。
同じKeyをあとで確認できないので、必ず安全な場所に保管する必要があります。

作成されたProjectのダッシュボードに遷移できます。

左からPorjectを選択し、詳細を確認できます。

User Authentication Settingsから認証するための設定を行います。
最低限以下の項目を入力する必要があります。
・Callback URI / Redirect URL
・Website URL

callback URIは、Firebaseの認証の追加を行った時に用意されるcallback URIを入力しましょう。

（同時に、上記で取得したAPI KeyとSecret KeyもこのFireAuthに登録してしまいましょう）

次はアプリを作る理由や、アプリの概要を説明するところがあります。
400字程で英語で書く必要があるみたいです。
英語が苦手な場合などは、そこまで詳細に書かなくても良さそうですが
ある程度、目的や説明は書いた方が良さそうです。

晴れて登録が完了はしたはいいのですが
v2だと、このままでは認証を作ることができないです。
ログイン処理の段階で401エラー(invalid authentication)が返ってきてしまいます。

こちらの記事を参考にelevatedを申請すると使えるようになるらしいので、以下のページで申請を行います。
自分の場合、2、3時間くらいでApproveされました。
上記のアプリの概要や理由なども影響を受けるかもしれないです。

elevatedの申請をしないといけないというのはハマりポイントな気がします。
あとはFirebaseの公式通りのコードでログイン実装できるようになりました。

ハマったとは言え、ここまで簡単にログイン実装できるのはとても良いなと感じました。
Serverlessを使ったフロントエンドだけでの実装というのにも慣れてきたように思います。