redux toolkitのthunkとfirebaseのMFA認証は相性が悪い

背景

firebaseで認証機能を作成している。
二要素認証の作成をしている。
グローバル変数にredux toolkitを使用している。

パスコードを使ってサインインしようとするとauth/internal-errorになる

原因

redux toolkitのthunk関数でスローされるエラーのはシリアライズエラーになってしまうため。
MFA認証でresolve.signInを行うにはMultiFactorErrorが必要となる。

やったこと

• thunkでエラーはthrowする　→ シリアライズされたエラーになり、operatorTypeがundefinedと言われる
• rejectWithValueでMultiFactorErrorを返す　→ payloadがnon-serializableと言われる（サインインはできる）
• MultiFactorErrorをシリアライズしたオブジェクトに変換してrejectWithValueに返す　→ サインインするとauth/internal-errorになる

解決策

serializableCheckをfalseにする。

react.js

middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false }).prepend(listenerMiddleware.middleware);