session.data.expires undefined first time using useSession in v4

[jmpena2011]

I am using jwt strategic with the following config (NextAuthOptions):

...
session: {
      strategy: "jwt",
      maxAge: 1*60*60, // 1 hours
}
...

when I use "const session = useSession()" y return"status =authenticated" but "data.expires" is undefined
to set the "data.expires" I need to execute "update" function from useSession

...
  const session = useSession();

  //first time the component is rendered
  //session.status = "authenticated" and session.data.expires = undefined

  useEffect(() => {
    //adding this line session.data.expires has value
    session.update();
  }, []);
...

[jonas-is-coding]

Hey, in NextAuth.js v4, the expires field is only set if it is explicitly specified when the JWT is created. If you use a JWT strategy and do not implement custom logic that adds the expires field, it remains undefined by default.

Solution

You can ensure that the expires field is set correctly by explicitly adding it in the JWT callback. In the NextAuthOptions configuration, you can use the JWT callback to add the expires property:

callbacks: {
    async jwt({ token, account, user }) {
      if (account && user) {
        token.expires = Date.now() + 1 * 60 * 60 * 1000;
      }
      return token;
    },
    async session({ session, token }) {
      // Add expires to the session object
      if (token.expires) {
        session.expires = token.expires;
      }
      return session;
    },
  },

[jmpena2011]

Hey, in NextAuth.js v4, the expires field is only set if it is explicitly specified when the JWT is created. If you use a JWT strategy and do not implement custom logic that adds the expires field, it remains undefined by default.

Solution

You can ensure that the expires field is set correctly by explicitly adding it in the JWT callback. In the NextAuthOptions configuration, you can use the JWT callback to add the expires property:

callbacks: {
    async jwt({ token, account, user }) {
      if (account && user) {
        token.expires = Date.now() + 1 * 60 * 60 * 1000;
      }
      return token;
    },
    async session({ session, token }) {
      // Add expires to the session object
      if (token.expires) {
        session.expires = token.expires;
      }
      return session;
    },
  },

Thanks

According to the documentation, the "expires" field of the session is updated implicitly.

// Seconds - How long until an idle session expires and is no longer valid.
session { maxAge }

// The maximum age of the NextAuth.js issued JWT in seconds.
// Defaults to `session.maxAge`.
jwt { maxAge }

The following syntax shows that "expires" always has a value. (session callback)

session: {
	console.log(session.expires); // Never undefined (Example: 2024-11-08T17:05:40.011945Z)
	return session;
},

This demonstrates that the session on the server has the "expires" value.

Previously, I had programmed something similar to what you're proposing, and it works the same way.
For some reason, it’s "undefined" until an "update" is done to retrieve the session from the server.

[jonas-is-coding]

@jmpena2011
Okay, if this is the case, you can may use the session.update() method. This solution is not as clean as the jwt one, but in this case it's your best possible solution i guess.

useEffect(() => {
  if (!session.expires) {
    session.update();
  }
}, [session]);