[Flutter x Supabase] Supabaseでsign in with appleを実装してみる

こんにちは。いせりゅーです。
バタバタしており、なかなか記事を書けずにいました。そもそも個人開発すらできずにいました。ようやく落ち着けることができたので、少しずつ再開していこうと思います。

Sign in with Apple利用のためのセットアップ

詳しいセットアップ方法はこちらの記事を参考にさせていただきました。とてもわかりやすかったので掲載させてただきます🙇

実装に必要なPackageをインストール

• supabase_flutter
  • supabaseを使用するためのPackages

• sign_in_with_apple
  • appleログインのためのPackages

• crypto
  • SHA-256 ハッシュを計算するために使用

flutter pub add supabase_flutter
flutter pub add sign_in_with_apple
flutter pub add crypto

appleのログインの実装をする

Supabaseのドキュメントに沿って記載してみました。他にも変更したところがあると思うので、こちらで閲覧できます。

import 'package:crypto/crypto.dart';
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

Future<AuthResponse> signInWithApple() async {
  // Supabase SDK を使用してランダムな nonce を生成する
  // Nonce はセキュリティ目的で使用する
  final rawNonce = supabase.auth.generateRawNonce();
  // 生成された nonce を SHA-256 ハッシュ化する
  final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();

  // Appleのサインインウィジェットを表示し、ユーザーに認証を要求する
  // 指定されたスコープや nonce を含む認証情報を返す
  final credential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
    nonce: hashedNonce,
  );

  final idToken = credential.identityToken;
  if (idToken == null) {
    throw const AuthException(
        'Could not find ID Token from generated credential.',
    );
  }
  
  // 取得した ID トークンと nonce を使用して、Supabase を介してユーザーを認証する
  return signInWithIdToken(
    provider: OAuthProvider.apple,
    idToken: idToken,
    nonce: rawNonce,
  );
}

注意点

• 昔から使っていた方は、Postgres Versionのバージョンをあげないと以下のエラーが出るらしいです
• 解決策としては、Settings > Infrastructure > Upgrade Postgres Version to 15.1.1.16からアップグレードするとうまくいきました

AuthApiError: Bad ID token

詳しいリンク↓

Unacceptable audience in id_tokenのエラーになる

発生条件

• 同じメールアドレスを使用して、ログインをすると上のエラーが発生しました
• Appleログインを試みたとき

やってみたこと

• 「Apple でサインイン」をオフにして再度オンにした