Zenn
⛳

Flutter ✖︎ Supabase Auth Google Sign In セットアップ

に公開
Flutter
auth
Supabase
tech

iOS

セットアップ

ステップ1

【 Authentication 】 → 【 Sign/Providers 】 → 【 Google 】の順番でタップ

ステップ2

  • Enable Sign in with Google を ON にする
  • Client IDs を入力
  • Client Secret (for OAuth) を入力
  • Skip nonce checks を ON にする

Client IDs 取得方法

そもそも Client IDs は何？？

GPT曰く下記の通りです。

Supabase における Client ID は、Google などの OAuth プロバイダーと Supabase アプリを連携する際に、Google Cloud Console で作成された OAuth 2.0 クライアントの 一意の識別子（= client_id）です。

どこから取得するのか？

Client IDs：下記スクショの「クライアント ID」
Client Secret (for OAuth)：下記スクショの「クライアント シークレット」

実装コード

<key>GIDClientID</key>
<!-- TODO Replace this value: -->
<!-- Copied from GoogleService-Info.plist key CLIENT_ID -->
<string>[YOUR IOS CLIENT ID]</string>
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- TODO Replace this value: -->
      <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
      <string>ここに REVERSED_CLIENT_ID を入れる</string>
    </array>
  </dict>
</array>

YOUR IOS CLIENT ID はどこから取得するのか

下記の赤枠のクライアントID

REVERSED_CLIENT_ID はどこから取得するのか

下記の赤枠からダウンロードすると取得できる

取得すると下記のような plist ファイルが取得できるので
KEY が REVERSED_CLIENT_ID の箇所から取得できる

実装コード

info.plist の設定

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CLIENT_ID</key>
	<string>210004489619-a0q875me2e9ra1i1vg9m772noadqkocq.apps.googleusercontent.com</string>
	<key>REVERSED_CLIENT_ID</key>
	<string>com.googleusercontent.apps.210004489619-a0q875me2e9ra1i1vg9m772noadqkocq</string>
	<key>PLIST_VERSION</key>
	<string>1</string>
	<key>BUNDLE_ID</key>
	<string>com.quuuuuuuuu.ale.dev</string>
</dict>
</plist>

Flutter側のコード

import 'package:google_sign_in/google_sign_in.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

...
Future<void> _nativeGoogleSignIn() async {
  /// TODO: update the Web client ID with your own.
  ///
  /// Web Client ID that you registered with Google Cloud.
  const webClientId = 'my-web.apps.googleusercontent.com';

  /// TODO: update the iOS client ID with your own.
  ///
  /// iOS Client ID that you registered with Google Cloud.
  const iosClientId = 'my-ios.apps.googleusercontent.com';

  final GoogleSignIn googleSignIn = GoogleSignIn(
    clientId: iosClientId,
    serverClientId: webClientId,
  );
  final googleUser = await googleSignIn.signIn();
  final googleAuth = await googleUser!.authentication;
  final accessToken = googleAuth.accessToken;
  final idToken = googleAuth.idToken;

  if (accessToken == null) {
    throw 'No Access Token found.';
  }
  if (idToken == null) {
    throw 'No ID Token found.';
  }

  await supabase.auth.signInWithIdToken(
    provider: OAuthProvider.google,
    idToken: idToken,
    accessToken: accessToken,
  );
}
...

Android

SHA-1 の取得

MAC は下記から取得する（windowsは知らん）

keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

SHA-1 の入力

赤枠の箇所にSHA-1を入力する

Discussion