I am working on a Nextjs app hosted on Vercel. This application is used inside of a Flutter application. I have contact with the developer working on that mobile app. IDK how they do it, but they managed to run the website I am working on inside of the app.

Now the problem.

You can sign in inside of the Nextjs app as well as in the Flutter app. When the Nextjs app runs inside of the Flutter app, the user is prompted to log in again. What I want is to use the session from the Flutter app inside of the Nextjs app if it is running inside of the Flutter app so the user doesn't have to log in twice.

When the Nextjs app is running in an external web browser then it will use it's session.

I have come up with a potential solution. I told the Flutter app developer that they could maybe spin up a mini server on their end using Flutter so that I can try to fetch the session from that URL (example localhost:8001) and use it inside of the Nextjs app. If the fetch is successful, the session from the Flutter app is used. If not, that means the Nextjs app is not running inside of the Flutter app but inside of the web browser and will then proceed to just ask the user to log in.

The Flutter app developer let me know that this was not possible, so I came up with another suggestion.

I told them to send the session from the Flutter app in a cookie to the in-app Nextjs app so I could try to read it on my end. I tried to read that cookie using getServerSideProps. Like so:

export const getServerSideProps: GetServerSideProps = async (context) => {
  const {  accessToken } = nookies.get(context);
  console.log("FLUTTER APP ACCESSTOKEN: " + accessToken);
  return { props: { token: accessToken || null } };
};

accessToken was not empty so this approach also didn't work for us 🥲

Does anyone have any good suggestions?