[Flutter]AWS Cognito Hosted UIでSignInした後リダイレクトはできてもトークンが取得できなかった

概要

Flutterでweb開発を行っており、ユーザ認証機能をつけようとAWS Cognitoを用いています。

環境

• Flutter 3.10.2
• amplify_flutter: 1.3.2
• amplify_auth_cognito: 1.3.2
• locahlhost:xxxxでホスティングしたローカル開発中

問題

ユーザプール作成やHosted UI認証画面の表示まではうまくいっていましたが、SignIn成功後にリダイレクトは成功するものの、リダイレクト後に認証情報を取得できないという問題にぶつかりました。
詳細には説明しませんが、大まかな登場人物は以下です。

# Amplifyのconfig
await Amplify.addPlugin(AmplifyAuthCognito());
await Amplify.configure(amplifyconfig);

# 認証画面の表示
await Amplify.Auth.signInWithWebUI();

# セッション情報取得
await Amplify.Auth.fetchAuthSession();

原因

原因はFlutter webのルートUrlがhttp://localhost:xxxx/#/である一方で、リダイレクト時のUriは指定したコールバックUrlにアクセストークンをパラメータとして保持させたhttp://localhost:xxxx/?code=yyyyy&state=zzzzであり、http://localhost:xxxx/へのアクセスが自動的にhttp://localhost:xxxx/#/へ再リダイレクトされてしまったために上記のパラメータが失われたためでした。

解決

flutter_web_pluginsのsetUrlStrategy(PathUrlStrategy());を実行することで、ルートUrlをhttp://localhost:xxxx/#/からhttp://localhost:xxxx/に変更することが可能となり、原因となっていた再リダイレクトを発生させることがなくなり、問題を解消しました。
参考にしたページ→https://note.com/hatchoutschool/n/na16d86f9441e

変更前(main.dart)
void main() {
  runApp(MyApp());
}

変更前(pubspec.yaml)
dependencies:
  flutter:
    sdk: flutter

変更後(main.dart)
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
void main() {
  runApp(MyApp());
}

変更後(pubspec.yaml)
dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter

解決策（失敗）

コールバックUrlをhttp://localhost:xxxx/#/に指定すれば原因となったリダイレクトが発生しなくなると考えましたが、コールバックUrlにフラグメントコンポーネントである#を含ませることができないとのことでこの解決策は失敗に終わりました。→公式ドキュメント