User didn't successfully log in due to the cookie is too big and spilt into two piece, nextjs edge-runtime not correctly set the cookie

[EiffelFly]

Checklist

• The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

Hi,

We have a problem that user can not successfully login. We recognize the issue to be similar to this one #1045.

In short, our user has a large profile photo url which makes the cookie exceed 4MB limit. Auth spilt it into two piece but due to Vercel edge-runtime can't successfully handle it vercel/next.js#38302 (It seems like that they close it but the issue persist).

We are solving this issue by not requiring the "profile" scope which is not ideal in our use-case.

Is there any workaround on Auth0 side to make this work?

Reproduction

This is our configuration

import {
  AuthError,
  handleAuth,
  handleCallback,
  handleLogin,
  handleLogout,
} from "@auth0/nextjs-auth0";
import { NextApiRequest } from "next";

const audience = process.env.AUTH0_OAUTH_AUDIENCE;
const scope = process.env.AUTH0_OAUTH_SCOPE;

function getUrls(req: NextApiRequest) {
  const { host } = req.headers;
  const protocol = process.env.VERCEL_URL ? "https" : "http";
  const redirectUri = `${protocol}://${host}/api/auth/callback`;
  const returnTo = `${protocol}://${host}`;
  return {
    redirectUri,
    returnTo,
  };
}

export default handleAuth({
  async login(req, res) {
    try {
      const { redirectUri, returnTo } = getUrls(req);

      await handleLogin(req, res, {
        authorizationParams: {
          prompt: "login",
          audience,
          scope,
          redirect_uri: redirectUri,
        },
        returnTo,
      });
    } catch (error) {
      if (error instanceof AuthError) {
        res.status(error.status || 400).end(error.message);
      }
    }
  },
  async callback(req, res) {
    try {
      const { redirectUri } = getUrls(req);

      await handleCallback(req, res, {
        redirectUri,
        authorizationParams: {
          audience,
          scope,
        },
      });
    } catch (error) {
      if (error instanceof AuthError) {
        res.status(error.status || 500).end(error.message);
      }
    }
  },
  async logout(req, res) {
    const { returnTo } = getUrls(req);
    await handleLogout(req, res, {
      returnTo,
    });
  },
});

We are using this api to get accessToken

import { getAccessToken, withApiAuthRequired } from "@auth0/nextjs-auth0";
import { NextApiHandler } from "next";

const handler: NextApiHandler = async (req, res) => {
  try {
    const { accessToken } = await getAccessToken(req, res);
    res.status(200).json({ accessToken });
  } catch (err) {
    console.error(err);
    res.redirect(307, "/api/auth/login");
  }
};

export default withApiAuthRequired(handler);

I think we are in the similar issue as @jonahallibone . Because the user can't login has two session.

We try to alter the get-access-token to make this work but there has no luck

import { getAccessToken, getSession } from "@auth0/nextjs-auth0";
import { NextApiHandler } from "next";

const handler: NextApiHandler = async (req, res) => {
  const user = await getSession(req, res);

  if (!user || !user.accessToken) { // <---- can not get the access token
    res.redirect(307, "/api/auth/login");
    return;
  }

  res.status(200).json({ accessToken: user?.accessToken });
};

export default handler;

• The user need to use social auth
• Some of the user's profile's field need to be extra large to mimic the oversize cookie issue

Additional context

No response

nextjs-auth0 version

2.6.0

Next.js version

13.4.2

Node.js version

14.x

[PSoltes]

Workaround/solution is to use custom store functionality, eg save session in custom store instead of cookie (https://auth0.github.io/nextjs-auth0/interfaces/config.SessionConfig.html store and genId are relevant params here)

[dkokotov]

See my comment here: #1045 (comment). @EiffelFly I didn't see edge being used in your code above, but I think there is currently a bug with the edge/middleware cookie handling that will munge the session cookie in the scenario where it's big enough to be chunked into multiple parts

[adamjmcgrath]

Thanks for your comment (#1045 (comment)) @dkokotov - will investigate

[adamjmcgrath]

Raised #1236 to fix

[adamjmcgrath]

This should be fixed in https://github.com/auth0/nextjs-auth0/releases/tag/v2.6.2 lmk if you still notice issues