Remix AuthでformDataを使う方法

はじめに

この記事では以下のような方を対象としています。

• Remix Authを用いて認証を作っている
• action内でrequest.formData()を呼び出したい
  基本的に本記事でRemix Authの使い方は取り扱わないので、知っている前提で進むことをあらかじめご了承ください。

なんでformDataを呼び出したいのか

例えば、ログイン処理などで、既にユーザー名が利用されているかを文字を入力するたびに確認したい場合などに必要になります。

普通に呼び出せないの?

request.formData()は呼び出せますが、Remix Authが内部でrequest.formDataを呼び出します。一見すると何の問題も無いように思えますが、RemixはformDataを一回しか呼び出せないようになっているため、action内で呼び出してしまうとRemix Authが動かなくなってしまいます。

解決策

Remix AuthのIssueを見ていたところ下のようなIssueがありました。

https://github.com/sergiodxa/remix-auth/issues/207

どうもrequestにはcloneというメソッドがあるみたいで、それを使えば良いようです（初めて知った）
つまり下みたいに書けば良いということのようです。

let formData = await request.clone().formData()
await authenticator.authenticate('strategy', request, options);

最後に

ちゃんとRemixのドキュメントとか見ていたらすぐにわかる話なのかもしれないのですが、一応後学の為に残しておきます。この記事がお役に立てば幸いです！