Expoアプリ最新化②:Expo SDK52でGoogleログインを実装

過去にExpoでGoogleログインを実装したが、Expo SDK52では実装方法が変わっていたため、改めて記事にまとめる。

www.wheatandcat.me

PR

github.com

実装

使用するライブラリ

前回の実装からの移行方法を記載する。元の実装については以下の記事を参照。

www.wheatandcat.me

Expo SDK48の時点ではexpo-auth-sessionにexpo-auth-session/providers/googleが存在し、それを使用していた。

docs.expo.dev

現在、この実装方法は廃止され、@react-native-google-signin/google-signinを使用した方法が推奨されている。

react-native-google-signin.github.io

フィンガープリントの設定

ローカル環境のSHA-1は以下のコマンドで取得可能。

$ cd android
$ ./gradlew signingReport

出力の中にあるAlias: androiddebugkeyのSHA1の値を確認し、FirebaseのプロジェクトのAndroidアプリに設定する。

設定を誤ると、認証時に以下のエラーが発生する。

[com.google.android.gms.common.api.ApiException: DEVELOPER_ERROR]

コードの実装

初期設定

以下のコードでGoogle Sign-Inの初期設定を行う。webClientIdにはFirebaseコンソールのAuthentication→ログイン方法→Googleを選択すると表示されるウェブクライアント IDを設定。

■ hooks/useFirebaseAuth.tsx

  useEffect(() => {
    GoogleSignin.configure({
      webClientId: Constants.expoConfig?.extra?.WEB_GOOGLE_CLIENT_ID,
      offlineAccess: true,
    });
  }, []);

Googleログインの実装

以下のコードでGoogleログインを行い、認証情報を取得する。

■ hooks/useFirebaseAuth.tsx

  const onGoogleLogin = useCallback(async () => {
    try {
      const response = await GoogleSignin.signIn();

      const googleCredential = GoogleAuthProvider.credential(
        response.data.idToken,
      );

      firebaseLogin(googleCredential);
    } catch (e) {
      console.log("error:", e);
      Alert.alert("ログインに失敗しました");
      errorCallback?.();
    }
  }, [firebaseLogin, errorCallback]);