new API: update session

[balazsorban44]

Update on 25/03/2023: #3941 (comment)

Discussed in #2267

^{Originally posted by phileasmah June 28, 2021}

Summary 💭

Include a setState to mutate the session state when using the useSession() hook.

Description 📓

In my app, I'm trying to build a settings page for profiles, like changing the display name etc, but I found that after changing the display name (name in database has been changed), the session state in useSession() stayed the same.

So, I was trying to find a way to mutate the session object of the current user and stumbled upon getSession() which (correct me if I'm wrong) is suppose to get a new session and replace it with the current one but according to this issue it doe not work as intended.

I was looking at the source code and thought wouldn't it be easier to just allow us to mutate the session state directly? (or are there security concerns I'm not aware of? In which case, it would be interesting to know). Looking at the code, it should be pretty easy to implement.

An advantage when compared to getSession() would obviously be that 1 less call needs to be made to the database, but again, I'm not sure if I am glossing over any security concerns etc

There are probably other related issues, which could be resolved with this. I'll try to gather them below, but if anyone reading this knows any, please comment below, and I would also like to hear your thoughts on this!

[balazsorban44]

Hi, and thanks for opening this. So when the session value changes and is being persisted either in a database or in the HttpOnly session cookie as JWT, the value can only be written server-side, so a trip to the server is inevitable. But I think we could expose a new function, something like updateSession, or better:

const { data: session, update } = useSession()
...
const handleUpdate = async () => {
  update((prev) => {...prev: foo: "new session value"})
}

update() could take either a new session object, or a callback, where the argument is the previous session for convenience (mimicking the setState function of useState), that would not only update the session and persist it server-side, but would also update the session in the client-side cache automatically.

I am currently refactoring the useSession() API in #2236, that would allow us to easily return other properties from useSession.

Would like to know what you think, and if you would be willing to open a PR for this @phileasmah

[ZefirTheFear]

const { data: session, update } = useSession()
...
const handleUpdate = async () => {
  update((prev) => {...prev, foo: "new session value"})
}

wonderful way. the only question is "when?". I'm not complaining and really appreciate your work, but to tell the truth, it's simply impossible to use the jwt-strategy in the current state. The user always has volatile data. such as phone number, address, etc. and asking the user to re-login every time he changes something is wrong. and accessing the database every time you need to look up the username is too expensive for the application, in my opinion.

[harshvats2000]

Code is missing ().
It should be

const handleUpdate = async () => {
  update((prev) => ({...prev, foo: "new session value"}))
}

[phileasmah]

Hi, glad you liked my idea, didn't know it could only be written server-side, but yea, what you suggested was exactly what I was thinking about!

I'm just a student but would love to take another look and possibly open a PR for this. I'm trying to set up my local environment and was just wondering how I should go about trying to implement this with your refactoring in #2236 or should I just try to implement this without your refactor?

[balazsorban44]

I'll try to get it done this week, so hopefully you will be able to use the next branch to work against then. I think first we have to discuss how we should go about the API to support both database persisted and JWT cookie sessions.

I think we will need a new endpoint for this, or we have to extend this one: https://github.com/nextauthjs/next-auth/blob/main/src/server/routes/session.js

[phileasmah]

I'm guessing we could just have a if/else check like in the current session.js route and mutate the data inside based on what type of session it is (?).

Personally, I think a new endpoint would be better overall for readability, maintenance and maybe performance(?) since I don't think much would be needed to change data in the session as opposed to validating/refreshing it.

[huksley]

I am using JWT and have a need to update the session (after onboarding). I implemented this "hack" to get proper cookie with JWT. Current /api/auth/session endpoint updates JWT using normal flow, but only designed to be used as XHR request.

No relogin by user needed.

Update api/auth/[...nextauth].ts handler:

export default async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.url === "/api/auth/session?update") {
    // Session call updates cookie, redirect to / afterwards
    const endResponse = res.end as (cb?: () => void) => void;
    res.end = (cb: () => void) => {
      res.setHeader("Location", "/");
      res.status(301);
      return endResponse.apply(res, [cb]);
    };
    return NextAuth(req, res, options);
  } else {
    return NextAuth(req, res, options);
  }
}

When needed, forward user to /api/auth/session?update to update session and it will go back to / after updating a cookie.

[rmptf]

How is it possible to set headers in the callback?

[balazsorban44]

Not sure I understand @huksley. How would that retrieve the new information about a user from an OAuth provider? I'm not really sure what it actually does either. So if NextAuth calls res.end, you redirect to the homepage? Why? Could you please explain? 😊

[balazsorban44]

@phileasmah #2236 is now merged, so if you want to have a look at it and create a PR, please do. I'll try looking at this myself whenever I get the time.

[huksley]

@balazsorban44 If you need to fetch something from OAuth provider, you can do it manually or in callbacks.jwt handler.

Current implementation of /api/auth/session recreates JWT token and puts it in session AND outputs JSON when you call it - see

next-auth/src/server/routes/session.js

Line 55 in 2155c93

// Refresh JWT expiry by re-signing it, with an updated expiry date

My "hack" is to avoid outputting JSON and instead forward user to other page, as needed.

[balazsorban44]

And what other page would you send the user? and why? I am just curious to understand.

[ThangHuuVu]

Hi all, sorry for the delay - After some discussion with @balazsorban44 , we think this is how we are going to implement updating session:

1. New API: Add an update function to the return of useSession.

const session = useSession()
//...

await session.update({... arbitrary data})

This will update the session anywhere, where you are referencing it with useSession().

The update() method will also return the updated session, for convenience, but we recommend using the useSession().data

3. Internally, we call the session endpoint using a POST request, adding proper CSRF protection, which is missing in previous workarounds in the thread.
4. We'll set a status and pass it down to the jwt and session callbacks, along with the unsanitized* data.
5. Inside the callbacks, developers can decide how they want to update their session/account/user

*Since the data is coming from the client, you will have to make sure to verify it before doing anything with it.

PR #7056

[dextermb]

It'd be nice to also have session.refresh()

[balazsorban44]

session.update() is essentially this. You don't have to to send new data.

next-auth/packages/next-auth/src/react/index.tsx

Line 90 in a4e7ad7

type UpdateSession = (data?: any) => Promise<Session | null>

[michaeldegori]

Hey there @balazsorban44! Do you have an estimated date for this update?

[jbwc]

Awesome! Was just trying to figure out why update wasn't a property returned from getSession since I need this to incrementally add third-party auth tokens to the session. Can you release? :)

[kalmndo]

when it'll be released? i read the documentation that the useSession() hooks exposes a update(data?: any): Promise<Session | null>.
but in v 4.20.1 there is no update method.
thanks

[jstinhw]

Hi, I can use update in v4.21.1. You might update your next-auth version.

[kcibdev]

Just saw that it was finally released, Thank you guys very much @balazsorban44 and the contributors

[LandonRover]

Agreed! Excellent improvement <3

[michaeldegori]

Hi all! Thanks to all contributors for making this happen. I have a little question though.

I'm not seeing the expected behavior for update and I wonder if I've implemented incorrectly. I store my whole "User" object inside of my session.user. In here, my user has a city_id which stores the ID of the last viewed city. When the city updates, I await the patch for my user's city_id and then I'm trying to update my session by updating session.user.city_id. When I log the responses, I'm seeing that the user is updated in the DB but not in the session. Wondering what I might be doing wrong.

Here is the code that fires when a city is changed:

const setActiveCity = async (city?: City): Promise<void> => {
    setState((prevState) => ({ ...prevState, loading: true }));

    return new Promise<void>(async (resolve) => {
      try {
        let activeCity: City | null = null;

        if (city) {
          activeCity = city;
        } else {
          activeCity = await findUserCurrentCity(
            cities,
            state.location,
            userCityId,
          );
        }
        console.log({ activeCityGlobals: activeCity });
        setCookie(null, 'active_city', JSON.stringify(activeCity), {
          maxAge: 30 * 24 * 60 * 60,
          path: '/',
        });

        setState((prevState) => ({ ...prevState, activeCity }));

        if (session && userId && accessToken) {
          const updatedUser = await updateUser(userId, accessToken, {
            city_id: activeCity.id,
          });
          const updatedSession = await updateSession({
            ...session,
            user: {
              ...session.user,
              city_id: activeCity.id,
            },
          });
          console.log({
            updatedUser: updatedUser.city_id, // Response ends up being new city id
            updatedSessionUser: updatedSession?.user.city_id, // Response stays as the old city id
          });
        }
      } catch (err) {
        console.log(err);
      } finally {
        setState((prevState) => ({ ...prevState, loading: false }));
        resolve();
      }
    });
  }

[craig-bowers]

You need to call the new update() function (https://next-auth.js.org/getting-started/client#updating-the-session) after the user updates their info and then handle it in your [...nextauth].ts file. You could probably handle the fetching / database stuff within your [...nextauth].ts file as well with some edits but I already had this set up from before when I was trying to get updating sessions to work.

Here's my working setup below using a JWT strategy (I think it would be slightly different with a 'database' strategy). I've never even been able to sign in using a 'database' strategy with Next-Auth and Postgres + Google provider so if anyone has a solution for that please let me know. My session token is always empty after login. Works fine with JWT though.

profile.tsx

...
onSubmit={async (e) => {
  e.preventDefault();
  let res = await fetch('/api/user/edit/profile', {
    method: 'PUT',
    headers: { 'Content-type': 'application/json' },
    body: JSON.stringify({
      name,
      image,
      display_name,
    }),
  });
  if (res.status === 200) {
    ...
    update({
      name,
      image,
      display_name,
    });
    ...
  }
}}
...

[...nextauth].ts

...
callbacks: {
  async jwt({ token, trigger, session, user, account, profile }) {
    if (trigger === 'signIn') {
      // user is the database info returned by your adapter and from what I can tell is not available in other triggers
      token.name = user?.name || '';
      token.display_name = user?.display_name || '';
      token.image = user?.image || '';
    }
    if (trigger === 'update' && session) {
      // session is the data sent from the client in the update() function above
      // Note, that `session` can be any arbitrary object, remember to validate it!
      if (typeof session.name === 'string') {
        token.name = session.name || '';
      }
      if (typeof session.display_name === 'string') {
        token.display_name = session.display_name || '';
      }
      if (typeof session.image === 'string') {
        token.image = session.image || '';
      }
    }
    return token;
  },
  async session({ session, user, token }) {
    if (session?.user) {
      session.user.id = token.sub;
      session.user.display_name = token.display_name || '';
      session.user.image = token.image || '';
    }
    return session;
  },
},
...

[michaeldegori]

Thanks for this Craig!

[DiegoGonzalezCruz]

Hi there! It's great to see the progress made on the update() method, and I appreciate your hard work on it.

Regarding your question, I have a dashboard for an admin to update user information on my platform, and I am trying to figure out the best way to handle JWTs. I am considering two options:

Force the user to sign out, which would require them to sign in again and create a new JWT with updated role data.

Update the JWT of a specific user with the new role data.

Which approach would you recommend, and do you have any suggestions on how to implement it? Thank you for your help!

[StevenMarrocco]

I really appreciate the progress on update, myself and the dev team and I have been looking for this feature for some time; since most people will end up on this thread as I have. I've noticed that calling update using the example refetching-the-session causes a rerender. Is this rerender preventable?

[jepsenphil]

Additional info as I too am experiencing the same problem.

const { data: session, status, update } = useSession();

^ state changes and status is set to "loading".

[devHybrid0306]

Hi, update() method is pretty helpful to update session on client side.
Is there any approach to update session on server-side or in regular javascript?
update() method is only able to be used in react component.

[devHybrid0306]

we can get session using update of useSession hook in react component, or getSession function in regular javascript.
Similar with getSession, can we have setSession that can be used in regular javascript file?

[Lekhrajk]

Hi everyone why i am getting this error
TypeError: update is not a function

const { data: session, status, update } = useSession() this is how I am using it
anything wrong I am doing ?

Using following versions
"next": "12.1.6",
"next-auth": "^4.10.0",
"react": "18.1.0",

[surfer19]

@Lekhrajk @GGAlanSmithee @craig-bowers Hi guys, have you been able to make it work? I tried almost everything but update() is not triggering "jwt" method.

"next": "13.4.1",
"next-auth": "4.22.1",

// apps/app/src/pages/callback
     const { data: session, status, update } = useSession();

    const triggerJwtCallback = async () => {
        const updatedSession = {
            ...session,
            token: 'your-updated-jwt-token',
        };

        await update(updatedSession);
    };
    ... 
    <div>
            github callback page
            <button onClick={triggerJwtCallback}>Trigger JWT Callback</button>
    </div>

// apps/app/src/pages/api/auth/[...nextauth].api.ts
    session: {
        strategy: 'jwt',
    },
    pages: {
        signIn: 'auth/signin',
    },
    callbacks: {
        jwt: async ({ token, user, session, trigger }) => {
            console.log('[JWT] token', token);
            console.log('[JWT] user', user);
            console.log('[JWT] session', session);
            console.log('[JWT] trigger', trigger);
       })

any idea? cc @balazsorban44

[michaeldegori]

It appears you're not doing anything with your update trigger. You need to tell NextAuth what you want to happen on update. So if (trigger === "update") do this.. in my case I fetch my users current info from the DB.

[surfer19]

yeah that's correct, I will continue with logic inside "jwt" later, the problem is I can't even see the console logs (means the "jwt" method is not triggered for some strange reason)

[mraballard]

@surfer19 did you resolve this? i'm having the same issue with the "jwt" method not triggering.

"next": "^13.4.12",
"next-auth": "^4.23.1",

[Mochamad-Rizky]

i have the same issue, update method is not triggered. has it been resolved?

[boredland]

Is there a way to trigger this similarly via getSession()? I'd much prefer that in places (Broadcast Events) where a hook isn't very usable...

[johannbuscail]

have you found a solution ?

[boredland]

No, rewrote everything to work with the useSession hook. It's fine tho!

[johannbuscail]

@boredland can you share what you did ?

[boredland]

I am basically exactly as documented: https://next-auth.js.org/getting-started/client#updating-the-session

With the slight difference, that in my jwt callback (I am using the JWT session), I check just if (trigger === "update" || trigger === undefined).

[singleseeker]

I want to update the session from the server components, any ideas?

[leomunizq]

me too, did you find a solution?

[ChoaibMouhrach]

did you find a solution?

[apl-by]

Maybe this is the solution with getSession():

import { getSession, getCsrfToken } from 'next-auth/react'
... 
const csrfToken = await getCsrfToken()
const updatedSession = await getSession({ req: {
                  body: {
                    csrfToken,
                    data: { user: { accessToken: "newToken" } },
                  },
                },
              })
...

and in callbacks:

 async jwt({ token, session, trigger }) {
   if (trigger === 'update' && session?.user?.accessToken) {
   token.accessToken= session.user.accessToken
  }

  return token
},

async session({ session, token }) {
  session.user = token
  return session
},

[aakash14goplani]

I would love to see something similar for SvelteKitAuth. As of today, there is no means to update session manually. Even using POST request. The "trigger" never updates and JWT remains stale. Only workaround is to re-login :(

[gblue1223]

I've just created my own session cookie and updated it in the next-auth session flow.
So far, it's been working well in the early stages.

• some lib

export const bakeCookie = (cookie: any) => {
  let cookieString = `${encodeURIComponent(cookie.name)}=${encodeURIComponent(
    cookie.value
  )}`

  for (const key in cookie) {
    if (key !== 'name' && key !== 'value') {
      cookieString += `; ${encodeURIComponent(key)}=${encodeURIComponent(
        cookie[key]
      )}`
    }
  }
  return cookieString
}

export const updateMySession = async (user: any) => {
  cookies().set({
    name: 'my-session',
    value: await encodeJwt(user),
    path: '/',
    httpOnly: true,
    maxAge: 604800 // 7 days
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
  })
  return cookies().get('my-session')
}

export const getMySession = async (prevSessionId: string) => {
  const cookie = cookies().get('my-session')
  const session = await decodeJwt(cookie?.value)
  if (prevSessionId !== session?.id) {
    return null
  }
  return session
}

• some API

    const cookie = await updateMySession({ ...user })

    return Response.json(
      {
        ret_code: RetCode.ok,
        data: receiver,
      },
      {
        status: 200,
        headers: { 'Set-Cookie': bakeCookie(cookie) },
      }
    )

• auth.js

    async session({ session, token, user, account }) {
      console.debug('auth.session.start', session, token, user)
      if (token.sub && session.user) {
        session.user.auth_id = token.sub
      }
      if (token.user) {
        session.user = {
          ...token.user,
          ...((await getMySession(token.user.id)) ?? {}),
        }
      }
      console.debug('auth.session.end', session, token, user)
      return session
    },

[william-will-angi]

Is there a way to get it to work for unauthenticated users? I'm trying to use some code similar to this, but it doesn't fetch the /api/auth/session endpoint a second time the way I would expect.

import {useEffect} from 'react';
import {useSession} from 'next-auth/react';

const useMyHook = () => {
  const session = useSession()
  useEffect(()=>{
    if (session.status === 'unauthenticated') {
      session.update();
    }
  }, [session.status])
}

I also tried the following, more involved code, but this also did not update the internal session stored by next-auth client-side.

import {useEffect} from 'react';
import {useSession, getSession} from 'next-auth/react';

const manualSessionUpdate = async (updateFn) => {
  const newSession = await getSession()
  updateFn(newSession)
}

const useMyHook = () => {
  const session = useSession()
  useEffect(()=>{
    if (session.status === 'unauthenticated') {
      manualSessionUpdate(session.update);
    }
  }, [session.status])
}