Ability to set custom headers just like we can set cookie

[ScreamZ]

Hi,

I'm using NextJS app router as my main application, but I'm trying to embed my website partially in a mobile application using react native and webviews.

The login feature is handled natively and I'm able to inject a session cookie in the webview, and initially load the webwiew using a custom request header, that way my user is authenticated on the website.

Now I'm trying to develop a feature to detect session expiration.

How to proceed?

First I'm checking the session when the application starts from native side. And also I'm monitoring the expiration time of the cookie on browser and app side. But polling for cookie expiration is redundant and not very accurate, I rather use some push mechanism.

Now I need to detect manual disconnection and session invalidation.

As I'm using server actions almost everywhere I was thinking about setting a custom response header that the client can intercept and being notified of session removal. As my cookie for authentication is HTTP only, I cannot read the setHeader cookie using JavaScript.

I was surprised that (knowing the limitation about streaming and HTTP headers) I couldn't define a custom header for a response whereas I can set a custom cookie in server action. And again, I'm conscient of the limitation with streaming.

Why is that limitation?

I was expecting to set a X-Session-Expired header to my response that way I can detect missing session.

Currently, I'm forced to check for the cookie existence on each fetch request, no matter what, but It could be easier to define a custom header.

I know I could use route handlers, but this would cost a full refactoring. And I couldn't benefit from server actions.

Current workaround

My current workaround is as follow:

  cookies().set("X-Session-Expired", "true", { httpOnly: false, expires: Date.now() + 10000 });

 <Script id="monkey_fetch" strategy="beforeInteractive">
      {`const originalFetch = window.fetch;
      window.fetch = async (...args) => {
        const response = await originalFetch(...args);

      const cookies = document.cookie.split(';');
      const authSessionCookie = cookies.find(cookie => cookie.trim().startsWith('X-Session-Expired='));

      if (!authSessionCookie) {
        console.log('X-Session-Expired cookie is missing');
      } else {
        console.log('X-Session-Expired cookie is present. Trigger side effect to webview. + delete cookie');
        }

        // Return the response back to the caller
        return response;
      };`}
    </Script>

[ScreamZ]

Related limitation workaround attempt: Trying to set the response header when a setCookie instruction is detected. Not successful

#71425

[Kvnbbg]

Hi @ScreamZ , for detecting session expiration, try using WebSockets or Server-Sent Events to get real-time updates instead of relying on cookies or headers.

[ScreamZ]

Hey, Thanks for sharing your thoughts. I've already thoughts about it, but two things:

• Doesn't work on Serverless architecture.
• I prefer to avoid having web socket server hosting just for that.

Currently, I've made it work that way! This is just a bit too tricky because i cannot just set the header or override the middleware