backendもFirestoreに繋いでユーザー情報を保存するようにして、frontendを繋いだら、こんな感じになりました。

対象のpull request

ログイン追加 by wheatandcat · Pull Request #13 · wheatandcat/Peperomia · GitHub

expoの実装

今回はGoogle ログインを使用してFirebase Authを通すように実装しました。

blog.expo.io

基本的には↑の記事通りに実装すればOKですが以下微妙にハマるので注意

expo上で実行する場合はfirebase、GCPの認証情報共にバンドル名を「host.exp.exponent」にする
androidの署名証明書フィンガープリントは以下で発行

openssl rand -base64 32 | openssl sha1 -c

これで設定すればOKです。

まずは、app.jsonに追記

■app.json

    "ios": {
      "config": {
        "googleSignIn": {
          "reservedClientId": "*************"
        }
      }
    },
    "android": {
      "googleServicesFile": "./android/google-services.json",
    },

iOSには上記で作成したGoogleログイン認証のreservedClientIdを指定、androidは出力したgoogle-services.jsonのパスを指定

あとはFirebaseのアプリにクライアントIDを指定

■.env

GOOGLE_LOGIN_ANDROID_CLIENT_ID="**********************"
GOOGLE_LOGIN_IOS_CLIENT_ID="*************************"

あとはjsのコードは以下の感じでOK

■PeperomiaNative/src/containers/Auth.tsx

  onGoogleLogin = async () => {
    const androidClientId = process.env.GOOGLE_LOGIN_ANDROID_CLIENT_ID;
    const iosClientId = process.env.GOOGLE_LOGIN_IOS_CLIENT_ID;
    const result = await Google.logInAsync({
      behavior: "web",
      iosClientId,
      androidClientId,
      scopes: ["profile", "email"]
    });

    if (result.type === "success") {
      const { idToken, accessToken } = result;
      const credential = firebase.auth.GoogleAuthProvider.credential(
        idToken,
        accessToken
      );

      await firebase.auth().signInAndRetrieveDataWithCredential(credential);

      await this.setSession(true);
    }
  };

あとはフロントエンドを整えて完成