Open16

SupabaseでTwitterログインを頑張ってます。

いせりゅーいせりゅー

やりたいこと

  • Twitterログインを個人開発のアプリでできるようにしたい
いせりゅーいせりゅー

App infoについて

とりあえず、後で設定できそうだから一番自由度の高いものを選択

Callback URI / Redirect URL

  • Supabase側で設定しているURL

Website URL

  • ポートフォリオのサイトのURL

Organization name

  • FoodGram

Terms of service

いせりゅーいせりゅー

進捗

AppInfoを登録したら、「Keys and tokens」の欄が追加されたぞい。
以下の情報を取得

  • API KEY
  • API Key Secret

いせりゅーいせりゅー

Supabase側で「Auth Providers」からTwitterを登録してみる

必要な情報

  • API KEY
    • 上で作ったものを入れる
  • API Key Secret
    • 上で作ったものを入れる
  • Callback URL (for OAuth)
    • すでに設定されていそうなため不要そう
いせりゅーいせりゅー

Flutter側でコードを書いてみる

-　サンプルを元に記載。Webアプリではないため、Webに関する記載を削除

auth_service.dart
   Future<Result<bool, String>> loginTwitter() async {
    try {
      final authResponse = await supabase.auth.signInWithOAuth(
        OAuthProvider.twitter,
        redirectTo: Env.redirectUrl,
        authScreenLaunchMode: LaunchMode.externalApplication,
      );
      return Success(authResponse);
    } on AuthException catch (authError) {
      logger.e('Twitter login failed: ${authError.message}');
      return Failure(authError.message);
    }
  }
いせりゅーいせりゅー
  • ViewModel側で以下の記載を行う.
authentification_view_mode.dart
   Future<void> loginTwitter(BuildContext context) async {
    primaryFocus?.unfocus();
    final result = await ref.read(authServiceProvider).loginTwitter();
    await result.when(
      success: (_) async {
        state = state.copyWith(loginStatus: L10n.of(context).loginSuccessful);
      },
      failure: (error) {
        logger.e(error);
        SnackBarHelper().openErrorSnackBar(
          context,
          L10n.of(context).loginError,
          L10n.of(context).error,
        );
      },
    );
  }
}
いせりゅーいせりゅー

View側で以下の記載を行う

authentification.dart
TwitterAuthButton(
  onPressed: () => controller.loginTwitter(context),
  style: AuthenticationStyle.authButtonStyle(buttonWidth),
),
いせりゅーいせりゅー

現状
リダイレクト周りでわログイン開かないっぽいからそのあたりをじっくりと見て正しいものに差し替えられればうまく行きそう。

TH TH
いせりゅーいせりゅー

URLをあれこれ弄ってみた

やったこと

  • TwitterのCallback URLをいかに変更
    • https://<Project URL>/auth/v1/callback
  • Supabae側のRedirect URLを以下の内容を追加
    • <Project URL>/auth/v1/callback
  • iOSのCFBundleURLSchemesに追加
			<key>CFBundleURLSchemes</key>
			<array>
            <string><Project UR></string>
			</array>

なんか変わったけど別のエラーが発生中。進歩だい

TH TH TH
いせりゅーいせりゅー

エラーの原因を探る

{"message":"No API key found in request","hint":"No `apikey` request header or url param was found."}

Issuesを見た感じ解決策がありそう
https://github.com/orgs/supabase/discussions/16241

サイト URL (認証 --> サイト構成) にプロトコルを含めるだけで済みました。
これなしではエラーhttps://が表示されていましたがNo apikey request header or url param was found、これを使用すると正常に動作します :)

いせりゅーいせりゅー

なんか動いた!

やってみたこと

  • Redirect URLsを追加
    • com.foodgram.scheme://auth/callback
  • Flutter側のリダイレクトを修正
    • com.foodgram.scheme://auth/callback
  • info.plistに追記
    • com.foodgram.scheme

けどアプリに戻っても変わらず

いせりゅーいせりゅー

現状のエラー

Unhandled Exception: AuthException(message: Error getting user email from external provider, statusCode: unexpected_failure, errorCode: server_error)

やってみたこと

  • Twittter DeveloperのRequest email from usersをオンにしてみた。
いせりゅーいせりゅー

やったことまとめ

Twitter Developer

アプリの登録をする

  • Callback URI / Redirect URLを追加する

Supabase

  • Redirect URLsを追加
    • com.foodgram.scheme://auth/callback
  • Twitterをenabledして、以下の記載を追加
    • APIKEY
    • API secret KEY

Flutter

 Future<Result<bool, String>> loginTwitter() async {
    try {
      final authResponse = await supabase.auth.signInWithOAuth(
        OAuthProvider.twitter,
        redirectTo: 'com.foodgram.scheme://auth/callback',
        authScreenLaunchMode: LaunchMode.externalApplication,
      );
      return Success(authResponse);
    } on AuthException catch (authError) {
      logger.e('Twitter login failed: ${authError.message}');
      return Failure(authError.message);
    }
  }
info.plist
<string>com.foodgram.scheme</string>