結論

フロントエンドとバックエンドが異なるサーバー間でデプロイされる場合、ドメインを統一する

具体的には以下のようにしました

フロント: Amplify 変更前(~~.amplify.com) → 変更後(app.example.com) 
バックエンド: EC2 (example.com)

LaravelでSanctumを使っている場合、
.envファイルでSANCTUM_STATEFUL_DOMAINSとSESSION_DOMAINの設定を行う

使用

Laravel
AWS Amplify
AWS Route 53

前提

SPA認証(クッキーベースのセッション)を使用
(具体的には、LaravelのSanctumパッケージを使用)

対処方法

1. サブドメイン設定: Amplifyでカスタムドメインを設定

Route 53でサブドメインを設定し、各DNSサーバーに登録
Amplifyのカスタムドメイン設定で、Route 53で設定したドメインを使用

対応は下記を参考に進めました
https://qiita.com/w2or3w/items/ddb7c4c1a602470ef96b

2. .envファイルの編集

SANCTUM_STATEFUL_DOMAINSとSESSION_DOMAINを設定
- SANCTUM_STATEFUL_DOMAIN: Laravel Sanctumに関連し、特定のドメインからのリクエストが状態を保持する認証を行うことを許可するドメインのリストを指定するために使用する
- SESSION_DOMAIN: セッションクッキーに適用されるドメインを指定するための設定オプション

他の対応

config/cors.phpのallowed_originsにフロントのURLが設定されていること確認
フロントエンドの認証でFirebase Authenticationを使用していたので承認ドメインに設定したサブドメインを登録する

この対応が必要だった理由

最初は、ドメインが異なっていたため、正しく認証済みのクッキーがブラウザに保存されなかった。具体的には以下の問題が発生していた。

レスポンスでset-cookieが返されていたが、実際のブラウザ上のクッキーには保持されていなかった。
フロントエンドはAmplifyを使用しており、デフォルトの~~.amplifyapp.comドメインが使用されていた。
異なるドメイン間で認証を行うために、Same-Site属性をnone、secure属性を設定していたが、それでもうまくいかなかった。

これらの問題を解決するために、フロントエンドをサブドメインに設定し、domain属性を設定したところ、正しく認証済みのクッキーがブラウザに保存されるようになった。ブラウザはクロスオリジンの場合、認証済みのクッキーを正しく保存しない挙動になっていたと考えました。
クッキーはデフォルトではクッキーをセットしたサーバーにのみ送信される。