react-native-nitro-google-signin について
React Native アプリで react-native-nitro-google-signin を使った Google サインインを設定するための、コーディングエージェント向けスキルです。プラットフォーム別の設定、サインイン手順、トークン処理、トラブルシューティングを案内します。
主な機能
- 01Expo とベア React Native の設定ガイド
- 02Google One Tap のサインインフロー
- 03トークンとスコープの処理に関する説明
- 04プラットフォーム設定とトラブルシューティング
活用シーン
- 01React Native アプリへの Google サインイン追加
- 02Expo またはベアプロジェクトでの設定
- 03プラットフォーム固有のサインイン障害の調査
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ react-native-nitro-google-sign-in/ google-signin --skill react-native-nitro-google-signinインストール後、Claude Code で/react-native-nitro-google-signinを入力して読み込まれたか確認します。
同梱ファイルexamples.mdreference.md
詳細
React Native Nitro Google Sign-In
エージェント用スキル(コーディングエージェントに最初にインストール)
npx skills add react-native-nitro-google-sign-in/google-signin -g -y
ドキュメント:https://react-native-nitro-google-sign-in.github.io/docs/agents/skill
パッケージのインストール
bun add react-native-nitro-google-signin react-native-nitro-modules
bundle exec pod install --project-directory="ios"
RN ≥ 0.76 が必要です。Expo Go は対象外です。expo-dev-client を使用してください。
ルール
| トピック | ルール |
|---|---|
| API | react-native-nitro-google-signin の GoogleOneTapSignIn |
| 最初に設定 | サインインの前に GoogleOneTapSignIn.configure({ webClientId }) を実行します |
serverAuthCode | configure() で offlineAccess: true が必要です。設定しない場合、常に null になります。requestScopes() は、オフラインアクセスなしでもデバイス上の API 用に accessToken を返します |
| バックエンド | すべての idToken をサーバーで検証します(sig、aud、iss、exp)。hostedDomain を使用する場合は、JWT の hd を検証します |
| iOS のオフライン認可 | サイレントな signIn() は serverAuthCode: null を返します。初回のコード取得には createAccount() を使用します |
revokeAccess | Android:メールアドレス/ID で指定します。iOS:現在のセッションのみ(ID が一致しない場合はエラーになります) |
getTokens | サインイン後に使用します。セッションがない場合は SIGN_IN_REQUIRED をスローします。iOS:401 の後に再試行する前に clearCachedAccessToken を呼び出します。Android:スコープが許可されている場合、バックグラウンドタスクでも動作します(Activity は不要です) |
getCurrentUser | 同期処理です。ユーザーと scopes、または null を返します。既存ユーザーに対して requestScopes を呼び出す前に、スコープを確認してください |
| フローの順序 | checkPlayServices → signIn → createAccount → presentExplicitSignIn |
Android の autoDetect | google-services.json と com.google.gms.google-services プラグインが必要です |
| iOS | GoogleService-Info.plist と REVERSED_CLIENT_ID の URL スキームが必要です |
| Expo | プラグイン react-native-nitro-google-signin を使用します。ネイティブ設定の後に expo prebuild を実行します |
| ネイティブ設定の変更後 | アプリを再ビルドしてください。Metro だけでは不十分です |
サインインフロー
import {
GoogleOneTapSignIn,
isNoSavedCredentialFoundResponse,
isSuccessResponse,
} from 'react-native-nitro-google-signin'
GoogleOneTapSignIn.configure({ webClientId: 'autoDetect' })
await GoogleOneTapSignIn.checkPlayServices()
let response = await GoogleOneTapSignIn.signIn()
if (isNoSavedCredentialFoundResponse(response)) {
response = await GoogleOneTapSignIn.createAccount()
}
if (isNoSavedCredentialFoundResponse(response)) {
response = await GoogleOneTapSignIn.presentExplicitSignIn()
}
if (isSuccessResponse(response)) {
const { user, idToken } = response.data
}
プラットフォーム別の選択肢
- Expo → プラグインと
app.config.jsのgoogleServicesFile→ reference.md#expo - Bare Android → SHA-1 と、必要に応じて Google Services プラグイン → reference.md#android
- Bare iOS → plist と URL スキーム → reference.md#ios
トラブルシューティング
| 症状 | 考えられる解決策 |
|---|---|
DEVELOPER_ERROR(Android) | OAuth クライアントの SHA-1 またはパッケージが間違っています |
アカウントを選択した後に type: 'cancelled' が発生する(Android のリリース版/Play) | Android OAuth クライアントに Play App Signing/リリース版の SHA-1 が設定されていません — トラブルシューティング |
default_web_client_id was not found | google-services.json と Gradle プラグインを追加してください |
| iOS のリダイレクトに失敗する | REVERSED_CLIENT_ID の URL スキームを修正してください。シーンのライフサイクルを使用するアプリでは、GIDSignIn.sharedInstance.handle(url) が SceneDelegate.swift に含まれていることを確認してください |
iOS 27 で起動時に UIApplicationEvaluateRuntimeIssueForNoSceneLifecycleAdoption がクラッシュする | Expo SDK 57:ios: { enableSceneSupport: true } を設定した expo-build-properties を追加してください(SDK 58 以降ではデフォルト)。Bare RN:UIApplicationSceneManifest と SceneDelegate.swift を追加してください — トラブルシューティング |
pod install/Expo の prebuild で AppCheckCore/RecaptchaInterop の問題が発生する(または Firebase App Check と競合する) | Expo:パッケージをアップグレードし、prebuild --clean を実行してください(プラグインがモジュラーヘッダーを追加し、AppCheckCore の < 11.3 への固定はありません)。Bare:AppCheckCore/GoogleUtilities/RecaptchaInterop を :modular_headers => true で追加してください — トラブルシューティング |
| Nitro が見つからない | 開発クライアントを再ビルドするか、bundle exec pod install --project-directory="ios" を実行してください |
| Android のボタンはレイアウトされるが、何も表示されない | パッケージをアップグレードし(プロセス内のブランディングボタン)、ネイティブアプリを再ビルドしてください |
| デバッグではサインインできるが、リリースでは失敗する | コンシューマー向け ProGuard ルールはライブラリに含まれています。-keep androidx.** は使用しないでください。assembleRelease をテストしてください。また、リリース版/Play の SHA-1 も確認してください(上記の「アカウントを選択した後に発生する問題」を参照) |
詳細
- reference.md — API、Expo/bare のセットアップ、エラー
- examples.md — コピーして使えるスニペット
- ドキュメント:https://react-native-nitro-google-sign-in.github.io/
コメント
Markdown 対応