Error: Cookie length will exceed browser maximum. Length: 4399

[mtin79]

Hi out there,
after some time using this awesome auth strategy for remix-auth. i started to run into the following error:
In general i use the latest version of the package.

Error: Cookie length will exceed browser maximum. Length: 4399
[1]     at Object.commitSession (.../node_modules/@remix-run/server-runtime/dist/sessions/cookieStorage.js:41:15)
[1]     at processTicksAndRejections (node:internal/process/task_queues:96:5)
[1]     at EmailLinkStrategy.authenticate (.../node_modules/remix-auth-email-link/build/index.js:81:32)
[1]     at action19 (.../app/routes/$language/app/login.tsx:89:5)
[1]     at Object.callRouteActionRR (.../node_modules/@remix-run/server-runtime/dist/data.js:24:16)
[1]     at callLoaderOrAction (.../node_modules/@remix-run/router/router.ts:3063:14)
[1]     at submit (.../node_modules/@remix-run/router/router.ts:2559:16)
[1]     at queryImpl (.../node_modules/@remix-run/router/router.ts:2494:22)
[1]     at Object.queryRoute (.../node_modules/@remix-run/router/router.ts:2444:18)
[1]     at handleDataRequestRR (.../node_modules/@remix-run/server-runtime/dist/server.js:63:20)

Any ideas or inspiration on how to fix it is very much appreciated!
Thank you.

[pbteja1998]

Store less data in the cookie. Don’t store the entire user object with all the fields. Just store the most required fields like id, email, etc. You can fetch the entire user from db later once you get this if and email from the cookie.

[mtin79]

Hi @pbteja1998 ,
i am not aware that i store the whole user object. actually i thought i only store the user id in there!
i am only returning the user.id from the emaillinkstrategy callback ...
or am i wrong here?

let secret = process.env.MAGIC_LINK_SECRET; //process.env.MAGIC_LINK_SECRET;
if (!secret) throw new Error("Missing MAGIC_LINK_SECRET env variable.");
export type AuthUserId = string;

export let auth = new Authenticator<AuthUserId>(sessionStorage, { throwOnError: true });

auth.use(
  new EmailLinkStrategy(
    {
      sendEmail,
      secret,
      callbackURL: "/api/auth/magic",
    },
    async ({
      email,
      form,
      magicLinkVerify,
    }: {
      email: string;
      form: FormData;
      magicLinkVerify: boolean;
    }) => {
      let user = await getUserByEmail(email);
      return user?.id || "";
    }
  )
);

here's the output of the magicLink and its encrypted version. they seem pretty long:

[1]   magicLink: 'http://localhost:3000/api/auth/magic?token=U2FsdGVkX1%2BzVPYNCXONG689JM56sPKXkJs8p6RrzXxrhdOqMmcgjuuUiWga1p79M5x70RyPb866h2Ar%2FQNrKYIWzHUnxEXhoAmuGyTaD7t7Q5EmT5p1lt6wg%2FtsO72GLBWaF3YZGf76m8%2BLc5SlHUrbnFhFiYAgZICD8QXuB6wqaplHLBaxYZc4k9IETjje8EsyzVoRU%2BVGO1Czfa5fE84OnqJ02pUjUX%2BEk53ugGJ4t1SVXbFneWLLUs07sTT9YSXW34RP0biWTFo5dcE%2FFMocD4pv0TF4JEGpqoRv0GlKcOoiEIWw2ZieZadM5HggpV0d2DOMtzwLUWxEgpPR9nkI8KuEVBYEnVVh2QnFAStojJj2YFe7dK6B3Z0ABECXzQdaa6GMt65WXwqsWiWTyUEEQtC%2F%2BUCjsD%2B9vFGmrhTs4ALqAnouvmMemuhWnBCUrvgF7e%2BqrUZy%2FeeDx%2Fomu4afJPaidCLx791yRdQqt88B2%2FIBe%2BTWchj5ZLPtIdtjdQK%2FsUTn%2B%2Fn4kVn6Y64fAHmeOvqtXidChiUXjBVtYub7noHJ7goQI1jnXK4TcE%2BApUXjztPaVClS%2Btku0OX%2BdErY02BzSXcET%2FOWj4OJ1aMSTsU4TBAMADg3fzmg2IyO9mR6IkT4TxPMeYFAFvKDxK97WEE03paegnw%2Fn3BNkED7enbuAuPfuSj3iphWT5DYgnIYSZok9OfpS31Vf3ygT6Ygxs3UjRikC0UXe95kB8Takhu59QZBWoDMGOzMfis%2Fvs0PEzBH7U32tqm4gPvJ7iMc%2B6jj%2BnbN%2FW890rNjEo3bt%2F8eiStwazPCu5X4j%2FmH%2FsffrluBAECnYZTOb%2FRIHcY2cA4uW5LP65wR64AE7vA8URbSQPBY6ePTBeh1eCUfwPqx%2FFj4%2FwGi65mFCDWbUt331C4uYU%2FSy1kzRqD29r%2B9f1Q0ggJTdJAGYbp9gdq3qJ7%2BNMCtEhfdXLp4Jb%2F9Rtzk3MWw5BvymNNOAGI%2BjDJ9iScX0u7dpjQx0gYPt1zqdSiyokEb4GIBPYWB9L6AdsPhtS1UgRxHjNs%2BLvbx2HnxRYoZDIr55bj2%2FgwEkRC8UWlLReDnWAFkVAa%2FqK4K3J9uv%2FhvbRwar9kArzR4vFGLh8KeGW8nsYfvTc%2F%2FF11Vi8NplREFAp%2BRqT12Jr%2BnBWApXsCBrSRzc9hdidLihwNg%2B6S2Tg6eHgEjjOFHz0Q9xhcqGzEufWHF%2BY5PLeUc8oVr5GltwNIN3gQH%2F%2BqVdQ1kj4PSX1ebU2NgTdlqk807sIKWAMhsJQtdIQBHLZBgBP83E5TcRWh9m%2BMEkYALdUkx3XhRUnYKnPVluamhB6NfSYut%2FxkWXQR1u%2BmbK2r7b%2F3Iy0ZGOhbK%2FimCgoAbKLRb%2FiBUvcFevrDLBY35Gj2SZVG%2BxyXA7ZcYOVSmp0ciKJHXJDy%2BWsq5dWx5WOwaMtv%2F2texAilkWD2jE1871wuEjdey1d%2FK%2B07e5gsHuExD1qMdiAAD7gvaQWfEP1J%2Bn5Zt8EqgYn4TzJJyFkrKROD0kuvAe7pwR3RnllCvhBesoMjXmaty%2FfgQxhiGYVtJkslLJ%2BY68oy%2FZq3k6BYC%2FXolXVttVRSoXoYtYT937YhihWcpYWctfeRkShqP89vMWWtesYrqifSaokjZVFPLn9xhmPcD4%2FnGVx7MVpBsQuFBM6fXKz5U7Qk%2F4olsPu%2FRvfHyOHUv2lJsKXETHY%2FqU09Emb%2FjRjEviewSnQs8t%2BFHQko9mioV%2B0brO29%2BZ88jdxdRkehYhp5v5Yws7MTvB3hIV2BSA%2BxQOyRLDtn%2FTULp%2FtTWmnetBhZs%2B3vkuxQDFMz%2Fd8EEdKaWWUAUrDVqjWAThvksXOvgRelZpC4BYvrvsZj83RtG9sFCGqCrB4rdlOxKziF5KUVMgdxkFWaPqxvO0LU2glClo6zEHjKiggbZ4DvbkXXZFOMApADIYF%2F8WLV0T2aZbBLE8uXAHeJSxnqpFQNKLoOkxA5VoiFRHnHTCQ%3D%3D'
[1] }
[1] {
[1]   magicLinkEncrypted: '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'

[mtin79]

Looking into the code of remix-auth and remix-auth-email-link it seems the magic-link gets encode twice with crypto-js?

[mtin79]

Hi @pbteja1998 , i guess i found it. Seems since this commit here ( 07796a8 ) all the formData of the request invoking authenticate of the EmailLink-Strategy Authenticator is encrypted into the magicLink.

THE PROBLEM: I am also sending google Recaptcha Widget - response data to decide if its ok to process the login/register request. And some additional data.

THE TEMPORARY FIX: Stripping as much data from the form that is sent to the action that invokes .authenticate(...) - method

POSSIBLE FINAL FIXES:

• Option a) I wasnt able to strip some formData that i needed in the action from the request and pass it on to the authenticat method. Would be great to know if that is possible in anyway
• Option b) parameterize authenticate to only encrypt certain formData key/values.
• Option c) Additional documentation about that all the formData of the request is stored in the magicLink per default.

[pbteja1998]

Yes, you can check the discussion here. We started sending the form data too.

Also, in the README, if you see the types, you will see that you are also getting the formData as one of the arguments.

#11

[mtin79]

HI @pbteja1998 ,
Wouldn't it make more sense to be able to have control over what parts of the formData to be forwarded into the authenticate - function? Some reasoning on my end is:

• The formData that is sent to the action may have more than what should be saved and encrypted in the magicLink's authenticate method.
• what ultimately controls what i send into the action is the possible cookie length of the sessionStorage that the strategy uses eventually.
• Also: i dont want the google recaptcha response in the magicLink but i can't see how i can strip it from the original request as the authenticate clones it 1-to-1.

[pbteja1998]

Sure. I’m open to that too. Please feel free to suggest how that would look like. A PR would be better to get an exact idea of what you mean…

[rissois]

Possible solution: #52