【iOS】react-native-firebaseライブラリでGoogleサインインを実装する

はじめに

react-native-firebaseの公式ドキュメントにもGoogle公式ドキュメントにも纏まった手順が載っていなかったので記載しておきます。

前提

Androidは動作確認できてないのでiOS環境のみ記載しています。動作確認が出来次第、Androidの手順も追記する予定です。（ハマりどころがなければ追記はしません笑）

react-native-firebaseライブラリはネイティブコードを使用しており、動作確認を行うにはカスタム開発ビルドを使用する必要があります。Expo環境で使用する場合はFirebase JavaScript SDKが使えますが、今回の手順の対象ではありません。

インストール

npm i @react-native-firebase/auth
npm i @react-native-google-signin/google-signin

react-native-firebase自体の初期設定は公式ドキュメントの手順を参考にしてください。

FirebaseコンソールからGoogle認証を有効化

Authenticationのページの「ログイン方法」タブから追加します。
「新しいプロバイダを追加」ボタンがあるのでそちらから作成できます。
認証を有効化する過程でGoogleService-Info.plistをダウンロードするボタンを押してローカルに保存しておきます。

GoogleService-Info.plistを更新

保存したGoogleService-Info.plistをプロジェクトで使用してあるそれと置き換えます。

Info.plistを更新

GoogleService-Info.plistに追加されている項目を、Info.plistにも追加する。（値は同じでもキー名はGIDClientIDであることに注意！）

GoogleService-Info.plist

<key>CLIENT_ID</key>
<string>XXXXX</string>

Info.plist

 <key>GIDClientID</key>
 <string>xxxxx</string>

ここが今回記事を書こうと思ったキッカケの落とし穴なのですが、Info.plistを更新しないと、下記のようなエラーが出てます。

[CoreFoundation] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'No active configuration.  Make sure
GIDClientID is set in Info.plist.'

GoogleService-Info.plist更新したのになんでや！と思いましたが、そこはエラー通りこっちも更新しないとダメなようです。

Prebuild

iosディレクトリのGoogleService-Info.plistにも修正内容を反映します。

npx expo prebuild

実装

ソースコードはドキュメントに書いてあるものをそのまま使えばOKです。
一応載せておきます。

使用する側のコンポーネント.tsx

import React from 'react';
import { Button } from 'react-native';

function GoogleSignIn() {
  return (
    <Button
      title="Google Sign-In"
      onPress={() => onGoogleButtonPress().then(() => console.log('Signed in with Google!'))}
    />
  );
}

使用される関数.tx

import auth from '@react-native-firebase/auth';
import { GoogleSignin } from '@react-native-google-signin/google-signin';

async function onGoogleButtonPress() {
  // Check if your device supports Google Play
  await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
  // Get the users ID token
  const { idToken } = await GoogleSignin.signIn();

  // Create a Google credential with the token
  const googleCredential = auth.GoogleAuthProvider.credential(idToken);

  // Sign-in the user with the credential
  return auth().signInWithCredential(googleCredential);
}

Run

npx expo run:ios

動作確認

ボタンを押してGoogleサインイン画面が表示されたらOK！