react native expoでfairebaseを使ってFacebookログインをする。
概要
タイトル通りでそこらじゅうに記事あるじゃん、って感じなんですけどうまくいかないんですよね。色々試したんでまとめます。
expo SDK44
firebase 9.6.11
expo-facebook 12.1.1
大前提
ブラウザやQRコードからスマホのExpo GO経由で起動したアプリでは動かすことができません。standaloneでbuildしたアプリでしか動かないので注意してください。
eas build --profile preview --platform ios
で実機で試しました。iosのシミュレーターで試す場合は"simulator": trueが必要です。
試してませんがexpo buildでも動くはず。
expo build:ios
コード
// app.config.ts(app.json)
...
facebookScheme: "fb[FACEBOOK APP ID]",
facebookAppId: "[FACEBOOK APP ID]",
facebookDisplayName: "[FACEBOOK APP NAME]"
}
}
import { FacebookAuthProvider, signInWithCredential } from "firebase/auth";
import * as Facebook from 'expo-facebook';
import Constants from 'expo-constants';
import { auth } from './firebase';
<Button onPress={e => {
Facebook.initializeAsync({appId: Constants.manifest?.facebookAppId}).then(() => {
return Facebook.logInWithReadPermissionsAsync({ permissions: ['public_profile', 'email'] })
}).then(result => {
if(result.type == 'success'){
const credential = FacebookAuthProvider.credential(result.token);
return signInWithCredential(auth, credential)
}
return;
}).catch(error => {
console.log('error', error)
})
}}>
Facebookでログイン
</Button>
解説
Expo GO経由で起動したアプリだと下記のエラーが出ます。
FirebaseError: Firebase: 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":"Aw6Cd98alCiqYT9wtlw940V"}} (auth/invalid-credential).
Expo GO経由で起動したアプリだと、Expo GOのFacebookAppIDが飛んで、FacebookからはExpo GOがログインを試みたように見えるようですね。
firebaseのコンソールに登録した自分のアプリとは当然FacebookAppIDが違うのでThe App_id in the input_token did not match the Viewing Appとなります。
ビルドしたアプリで実行すると自分のFacebookAppIDが飛ぶのですが、最初コードに示したapp.jsonの記述はなしで
Facebook.initializeAsync({appId: "[FACEBOOK APP ID]", appName: "[[FACEBOOK APP NAME]]"})
とinitializeAsyncに渡していたのですがこれだと下記のエラーでログインできません。
Error: fb[FACEBOOK APP ID] is not registered as a URL scheme. Please add it in your Info.plist
何度もビルドして試した結果、最低限app.jsonに下記の二つの設定が必要なようです。
// app.config.ts(app.json)
...
facebookScheme: "fb[FACEBOOK APP ID]",
facebookDisplayName: "[FACEBOOK APP NAME]"
}
}
どうせapp.jsonに必要ならここで全部管理した方がいいと思い、FB関連の設置をここに移動し、コードをFacebook.initializeAsync({})としてみたけど、appIdだけは引数に渡さないとダメでした。
Error: No FacebookAppId configured, required for initialization. Please ensure that you're either providing `appId` to `initializeAsync` as an argument or inside Info.plist.
書き出されたアプリのInfo.plistはコンテキストメニューからShow package contentsで確認できますが、正しいFacebookAppIdが書き出されているにもかかわらず上記のエラーでした。これだけはinitializeAsyncの引数に渡す必要があります。
ということで示したコードに落ち着きました。
なんか、色々エラーメッセージやドキュメントとは違う仕様のようです。なんでこんなややこしいねん。
参考URL
公式ドキュメント
ちなみに、このfirebaseの公式にあるsignInWithRedirectやsignInWithPopupはブラウザのみでExpoからは使えません。expo-facebookとfirebaseのsignInWithCredentialを組み合わせてログインします。
参考になったエントリー
Discussion