RemixでCookie length will exceed browser maximumエラーが発生した際の話

remix-authで提供されているAuthenticatorインスタンスのauthenticate()を実行してログイン処理を行なっていたら、あるときブラウザのクッキーの許容量を超えてしまい、次のようなエラーが発生した。

Error: Cookie length will exceed browser maximum. Length: 5174
    at Object.commitSession (/workspaces/example-app/node_modules/@remix-run/server-runtime/dist/sessions/cookieStorage.js:41:15)
    at FormStrategy.success (/workspaces/example-app/node_modules/remix-auth/build/strategy.js:68:38)
    at action4 (/workspaces/example-app/app/core/ui/components/PasswordTextInput.tsx:25:7)
    at Object.callRouteActionRR (/workspaces/example-app/node_modules/@remix-run/server-runtime/dist/data.js:24:16)
    at callLoaderOrAction (/workspaces/example-app/node_modules/@remix-run/router/router.ts:3061:14)
    at submit (/workspaces/example-app/node_modules/@remix-run/router/router.ts:2568:16)
    at queryImpl (/workspaces/example-app/node_modules/@remix-run/router/router.ts:2503:22)
    at Object.queryRoute (/workspaces/example-app/node_modules/@remix-run/router/router.ts:2453:18)
    at handleDataRequestRR (/workspaces/example-app/node_modules/@remix-run/server-runtime/dist/server.js:81:20)
    at requestHandler (/workspaces/example-app/node_modules/@remix-run/server-runtime/dist/server.js:55:18)
    at /workspaces/example-app/node_modules/@remix-run/express/dist/server.js:39:22
POST /login?_data=routes%2Flogin 500 - - 98.592 ms

これは、authenticator.use()に渡すverify()コールバック関数内で返す値がクッキーに保存するには大きすぎるために発生するエラーであることがわかった。

なので、必要なデータだけを取り出して返すようにするとエラーが解消された。

authenticator.use(
  new FormStrategy(async ({ form }) => {
    const userRepository = container.resolve<UserRepository>("UserRepository");
    const email = `${form.get("email")}`;
    const password = `${form.get("password")}`;
    ...
    const result = await userRepository.verifyLogin(email, password);
    ...
    const { id } = result.data;
    return {
      id,
    };
  }),
  "user-pass"
);