IE11 caching response from /session

[dks-customs]

Description 🐜

Hey,
I need my project to run on IE11. I was able to run next-auth on IE11 with next-transpile-modules (code in snippet).
But there's one more problem: every subsequent request to /session endpoint (caused by useSession hook) returns cached version of first request.

Why it's problematic - for example: I'm visiting my website with active session, request is sent to /session and response (with active session with user object) is cached. Then I log out, page refreshes but I'm still getting cached active session with user object - incorrect.

In other browsers it works normally - the request is not cached.

Only way to solve this is to clear cache via IE11 dev tools, or to shut down browser and open it again.
Setting clientMaxAge option to 1 didn't help too.

I solved it manually by changing this in my node_modules/next-auth

next-auth/src/client/index.js

Line 320 in f546e55

const options = req ? { headers: { cookie: req.headers.cookie } } : {}

to

const options = req ? { headers: { cookie: req.headers.cookie } } : { headers: { Pragma: 'no-cache'}}

From what I've read pragma: no cache header is like cache-control: no-cache but for older browsers. I tested cache-control too but it didn't work. Req seemed to be falsy in my case, so I added it to "else" part of above ternary operator.

So it solves the problem for me temporarily, but I don't know if thats solution for you and how it fits in the rest of Next Auth.

I'd be grateful if someone had a look at this ;)

Is this a bug in your own project?

No

How to reproduce ☕️

Here's all you need to change in next starter template (I cut only needed parts from my bigger project, but tested it and it reproduces error well). CodeSandbox doesn't work in IE11, sorry :( Just open app, refresh the page and inspect /session response in IE11 devtools, it should say its cached.

/next.config.js

const withTM = require("next-transpile-modules")(["next-auth"]);

module.exports = withTM({
  reactStrictMode: true,
});

/pages/api/[...nextauth.js]

import NextAuth from "next-auth";

const options = {
  database: process.env.DATABASE_URL,
  session: {
    jwt: true,
    maxAge: 30 * 24 * 60 * 60,
  },
  jwt: {
    secret: process.env.NEXTAUTH_JWT_SECRET,
    signingKey: process.env.NEXTAUTH_JWT_SIGNING_KEY,
  },
  pages: {
    signIn: "/sign-in",
  },
  callbacks: {
    async jwt(
      token
      user
      account
      profile
      isNewUser
    ) {
      return token;
    },
    async session(session, token) {
      return session;
    },
  },
};

/pages/_app.js

export default (req, res) =>
  NextAuth(req, res, options);
  
 function MyApp({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}
export default MyApp;

/pages/index.js

import { useSession } from "next-auth/client";
import styles from "../styles/Home.module.css";

export default function Home() {
  const [session, loading] = useSession();

  return (
    <div className={styles.container}>{session ? session.expires : ""}</div>
  );
}

Screenshots / Logs 📽

Environment 🖥

IE11 / Windows 10

Contributing 🙌🏽

Yes, I am willing to help solve this bug in a PR

[balazsorban44]

We aim to support IE11, could you elaborate why do you need to transpile next-auth?

See

next-auth/config/babel.config.js

Line 15 in bcb9383

presets: [["@babel/preset-env", { targets: { ie: "11" } }]],

[ThangHuuVu]

We are dropping support for IE, it's now EOL https://learn.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge