expo, react native ,typescript, firebaseでfacebook loginを実装してみる

対象者

・firebaseでプロジェクトの作成をした後

・facebook for developpersページで APP_IDとAPP_SECRETを取得

・APP_IDとAPP_SECRETをfirebaseに登録ずみ

手順

expoの以下公式のドキュメントを参考にしています。
https://docs.expo.io/versions/latest/sdk/facebook/

まずはexpoから提供されているfacebookのAPIを取り込みます

expo install expo-facebook

そして実装を行います。ほぼExpo公式のものを変わりません。

async function logIn() {
  try {
    await Facebook.initializeAsync('<APP_ID>');
    const res = await Facebook.logInWithReadPermissionsAsync({
      permissions: ['public_profile'],
    });
    if (res.type === 'success') {
      const credential = firebase.auth.FacebookAuthProvider.credential(token);
      firebase.auth().signInWithCredential(credential).catch(error => console.log(error))
    } else {
      // type === 'cancel'
    }
  } catch ({ message }) {
    alert(`Facebook Login Error: ${message}`);
  }
}

基本的にはこちらの方法でログインまでできるかと思います。ただ一点注意があって、facebookログインは開発中はできない模様です。
開発中にfacebookログインを試すと、こんなエラーに遭遇します。

Possible Unhandled Promise Rejection (id: 0):
[Error: Unsuccessful debug_token response from Facebook: {"error":{"message":"(#100) The App_id in the input_token did not match the Viewing App","type":"OAuthException","code":100,"fbtrace_id":"********"}}]

一見APP_idが入力間違いかと思えますが、どっこい。仕様のようです。
https://github.com/expo/expo/issues/8226#issuecomment-639068957
こちらによると、開発中だと、デフォルトでFacobook独自のAPP_IDとして適用されてしまうのです。これを回避するには、スタンドアロンモードでビルドする必要があります。

しかし、ビルドの前にapp.jsonに記載事項があります。 https://developers.facebook.com/docs/facebook-login/ios （こちらのページで対象情報を取得できます）。以下3点です。

app.json

{
    ~省略~
    "facebookAppId": "<APPID>",
    "facebookDisplayName": "<displayName>",
    "facebookScheme": "<Scheme>"
}

記載を終えたら、iosの場合、こちらのコマンドでビルドしましょう。(androidは公式で確認してみてください！)

expo buid:ios

あとはsimulatorで起動してみると、facebookでログインできるはず！！！
にしても、開発中にログインできないのはつらい。。。