[Flutter] Supabase Google Login (Web, Andriod, IOS)

Flutter와 supabase로 google login을 하려는 분들에게 도움이 되기 위한 글입니다.

 

Supabase docs와 블로그를 참고했습니다.

Login with Google | Supabase Docs

 

 

간단하게 목차를 살펴보면 아래와 같습니다.

 

1. supabase 계정 생성 및 프로젝트 생성

  - google 인증 enable 변경

2. 구글 클라우드 플랫폼에 프로젝트 생성

  - client id web, andriod, ios 3개 필요

3. flutter에 supabase 연결

 

supabase 계정 생성은 및 프로젝트 생성은 구글 검색을 통해 정보를 얻기 쉬워 스킵하겠습니다.

 

Supabase Authentication

계정 생성 후 프로젝트를 만들었다면 Authentication에서 Sign in/up에서 google 인증을 Enabled 해야합니다.

 

그럼 아래와 같은 설정창이 나오게 됩니다.

구글 로그인 설정을 정상적으로 작동시키려면 아래 3가지 항목을 정확히 설정해야 합니다.

1️⃣ Client IDs

• Google Cloud Console에서 생성된 각 플랫폼별 클라이언트 ID를 사용해야 합니다.
• (예: iOS, Android, Web 각각의 클라이언트 ID 필요)

2️⃣ Client Secret

• Google Cloud Console → 사용자 인증 정보에서 웹 클라이언트(Web Client)의 Client Secret을 확인할 수 있습니다.
• (iOS 및 Android에서는 사용되지 않음)

3️⃣ CallBack URL (Redirect URI)

• Google Cloud Console → 웹 클라이언트 설정에서 올바른 리디렉션 URI를 입력해야 합니다.

 

 

 

구글 클라우드 플랫폼에서 Client Id 만들기

Google 클라우드 플랫폼

위 링크에 접속해서 프로젝트를 만들어야 합니다.

 

프로젝트 생성 후 사용자 인증정보페이지로 이동합니다.

 

 

사용자 인증 정보를 만드려면 OAuth 동의 화면을 구성해야 한다고 합니다.

구성한적이 없다면 만들어주면 됩니다.

 

 

입력정보를 입력하고 대상에서 외부로 선택하여 만들면 됩니다.

 

OAuth 동의 화면을 구성한 후, 클라이언트 ID를 생성할 수 있습니다.

클라이언트 ID 생성 (Web, Android, iOS)

저는 Web, Android, iOS 총 3개의 클라이언트 ID를 만들 것입니다.
(필요한 플랫폼만 선택하여 생성하셔도 됩니다.)

📌 Web 클라이언트 ID 생성

Web 클라이언트 ID를 만들 때 **"승인된 리디렉션 URI"**에
Supabase의 Google Enabled 설정에서 확인한 Callback URL (for OAuth) 값을 입력해야 합니다.

 

 

그럼이제 Supabase에 입력할 클라이언트 ID, 클라이언트 보안 비밀번호를 확인 할 수 있습니다.

 

위 정보를 아래 이미지에 표신된 1번, 2번에 넣어주면 됩니다.

 

그리고 나서 Andriod와 IOS 클라이언트도 만들어 줘야 합니다.

각 클랑이언트를 만들때 패키지명(번들 ID)은 build.gradle의 applicationId를 확인해서 넣으면 됩니다.

 

Andriod는 SHA-1인증을 해야하는데요 이것도 잘 정리된 블로그가 있어 링크만 남기겠습니다.

Google Developers Console API 사용하기 - OAuth 클라이언트 ID 만들기 서명 인증서 지문 추가하는 방법

 

IOS는 클라이언트 ID만들때 추가로 할 것은 없습니다.

 

안드로이드 클라이언트 ID

 

Supabase ClientIDs에 여러개의 클라이언트 ID 넣는 방법

• 안드로이드 클라이언트도 생성되면 클라리언트 ID를
• ,로 구분하여 띄어쓰기 없이 입력
• 위 규칙처럼 IOS 클라이언트 ID도 생성하여 입력하면 됩니다.

 

IOS의 URL 스키마

그런데 IOS는 설정해줘야할 것이 또 있는데요

IOS는 클라이언트를 생성하면 ID와 추가로 URI 스키마를 생성합니다.

이것을 ios/Runner/Info.plist에 추가하면 됩니다.

 

 

 

생성된 IOS 클라이언트를 클릭하면 수정 페이지가 나오는데

여기서 확인 할 수 있습니다.

 

 

Info.plist에 직접 추가

ios/Runner/Info.plist에 아래와 같이 추가

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string> 
    </array>
  </dict>
  
  // 
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string> your ios cliend redirect uri </string> 
    </array>
  </dict>
</array>

 

Flutter 코드

이제 docs에 나와있는 예제를 통해 로그인 하면 됩니다

꼭 IOS and Andriod 섹션에 코드를 사용해야합니다.

저는 Web ... 에있는 코드를 사용하다 시간을 많이 날렸습니다...

 

flutter 연결

아래 supabase url와 anonKey는 supabase의 project overview페이지 중간에서 확인할 수 있습니다.

import 'package:supabase_flutter/supabase_flutter.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_SUPABASE_ANON_KEY',
  );
  runApp(MyApp());
}

 

Google login

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,
  );
}
...