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.

[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",

[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?

[JohnMwanyika]

Any update on the issue. I'm on
"next": "14.2.4",
"next-auth": "^5.0.0-beta.3"`

[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])
}

[andresgutgon]

Hi. I'm on next-auth v5. I tried the useSession approach but doesn't look it works

IGNORE all this comment if you're working with server actions 👇 check my comments below

I'm following this guide:
https://next-auth.js.org/getting-started/client#updating-the-session

I don't receive tigger set to update in my session callback.

./auth.ts
callbacks: {
    jwt({ token, trigger, user }) {
      if (!user?.id) return token

      if (trigger === 'update') {
        // This never happen
        console.log("JWT_CALLED_UPDATE")
      }

      token.id = user.id
      return token
    },
    session({ session, trigger, token }) {
      console.log("SESSION_CALLED")
      session.user.id = token.id

      if (trigger === 'update') {
        // This never happen
        console.log("SESSION_CALLED_UPDATE")
      }

      return session
    },
}

I'm logged in. My use case is that after signin I redirect users to newUser url. In my case is /signin/onboarding and there they have the opportunity of changing their name if there's one.

What I want is to update the session.user.name. I'm using jwt strategy. The backend is all ok because if I sign out and login again the session has the new name. The problem is in the client.

This is what I'm trying

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

const navigate = useRouter()
import { useServerAction } from 'zsa-react'
const { update } = useSession({ required: true })
const { execute } = useServerAction(onboarding, {
  initialData: { name },
  onSuccess: async (response) => {
    // DATA is updated here.
    await update({ name: response?.data?.name! })
    navigate.push('/')
  },
})

useServerAction is working nicely. So I think something I'm missing in the client

"next": "14.3.0-canary.59",
"next-auth": "5.0.0-beta.18",
"react": "19.0.0-beta-26f2496093-20240514",
"react-dom": "19.0.0-beta-26f2496093-20240514",

[andresgutgon]

For anyone wanting to use Server actions. unstable_update works.
If you're using JWT strategy what you update is sent to jwt callback in your NextAuth config callbacks

// ./src/actions/onboarding.ts
// This is my next-auth config you see below
import { updateSession } from '$/auth'

export const onboarding = authProcedure
  .createServerAction()
  .input(input, { type: 'formData' })
  .output(input)
  .handler(async ({ input: { name }, ctx: { user } }) => {
    const result = await finishOnboarding({ user, data: { name } })
    const value = result.unwrap()

    // NOTE: This ends in JWT callback in auth/index.ts
    await updateSession({ user: { name: value.name! } })
    redirect('/')
  })


// ./src/auth/index.ts
// 
const { unstable_update: updateSession } = NextAuth({
NextAuth({
  callbacks: {
    jwt({ token, user, session }) {
      // What comes in `session` here is what's updated in the server action
      if (session?.user?.name) {
        token.name = session.user.name
      }

      if (user?.id) {
        token.id = user.id
      }

      return token
    },
  }
})

// This is what's used in the server action
export { updateSession }

[andresgutgon]

I'm happy to understand how it works; next-auth is very convoluted because it has a legacy. Once they have a direct session/jwt manipulation from the server actions will be easier to understand

[chanlito]

@andresgutgon thanks, I was looking exactly for this. We need to improve the docs.

[andresgutgon]

I think what needs to be done is a new unstable__updateServerSession that by pass the callbacks and update the session directly. If someone is already in a server action why is needed to make an api call to their own server again to update the session.

I would like to know what people think about this. Maybe is already in the works. But I didn't see it for that I ended using unstable_updateSession

[musjj]

The annoying thing here is that you still end up allowing the client to put arbitrary data into the session, which kind of defeats the purpose of updating it from server-side. I really wish that there's a more direct way of doing this.

[aakash14goplani]

People from SvelteKit ecosystem, here is how we can pass data from client to server and vice versa - https://blog.aakashgoplani.in/how-to-exchange-data-between-client-and-server-using-sveltekitauth

[Francisco-Fetapi]

I tried different ways to solve the problem of using the update funcion from 'useSession' it turned out that when calling 'update' the 'trigger' on callback session was always undefined

async session({ session, token,trigger }) {
      if(trigger === "update"){
        // do some update stuff here
       // this tigger never gets 'update' even though I am calling 'update' from 'useSession'
      }
      // @ts-expect-error
      session.expires = token.user.expiresIn;
      // @ts-expect-error
      session.user = token.user;
      return session;
    },

I've also realized that trigger does get 'update' on jtwt callback

async jwt({ token, user, trigger, session }) {
      if (trigger === "signIn" && user) {
        // user is the database info returned by your adapter and from what I can tell is not available in other triggers
        token.user = user;
      }

      if (trigger === "update" && session) {
          // the trigger is `update` when calling update from client side useSession().update function
         // but `session` is always `undefined`
      }
      return token;
    },

but the problem was that the prop 'session' never reflected the actual value I was passing to the 'update' function from useSession.

So I ended up with that solution

Instead of calling useSession().update(newUserData) I've tried

async function handleSubmitUpdateProfile(values: Admin) {
    try {
      const csrfToken = await getCsrfToken();
      await getSession({
        req: {
          body: {
            csrfToken,
            data: { user: { ...user, ...values } },
          },
        },
      });

      toast.success("Perfil alterado!", {
        description: "Seu perfil foi alterado com sucesso!",
      });
      window.dispatchEvent(new CustomEvent("userUpdated"));
    } catch (e: any) {
      toast.success("Erro ao alterar o perfil", {
        description:
          "Lamentamos, houve um erro inesperado ao alterar o perfil do administrador.",
      });
    }
  }

and in my jwt callback

async jwt({ token, user, trigger, session }) {
      if (trigger === "signIn" && user) {
        // user is the database info returned by your adapter and from what I can tell is not available in other triggers
        token.user = user;
      }

      if (trigger === "update" && session) {
        await apiCore.post("/user/admin/update", {
          name: session.user.name,
          email: session.user.email,
          telephone: session.user.telephone,
          id: session.user.id,
        });
        // 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!
        token.user = session.user;
      }
      return token;
    },

this solved my problem, now I am getting the trigger 'update' and the actual data I'm sending through getSession... it might not be the best solution but it definetly solved the problem

[mjulstein]

I tried different ways to solve the problem of using the update funcion from 'useSession' it turned out that when calling 'update' the 'trigger' on callback session was always undefined

async session({ session, token,trigger }) {
      if(trigger === "update"){
        // do some update stuff here
       // this tigger never gets 'update' even though I am calling 'update' from 'useSession'
      }
      // @ts-expect-error
      session.expires = token.user.expiresIn;
      // @ts-expect-error
      session.user = token.user;
      return session;
    },

I've also realized that trigger does get 'update' on jtwt callback

async jwt({ token, user, trigger, session }) {
      if (trigger === "signIn" && user) {
        // user is the database info returned by your adapter and from what I can tell is not available in other triggers
        token.user = user;
      }

      if (trigger === "update" && session) {
          // the trigger is `update` when calling update from client side useSession().update function
         // but `session` is always `undefined`
      }
      return token;
    },

but the problem was that the prop 'session' never reflected the actual value I was passing to the 'update' function from useSession.

So I ended up with that solution

Instead of calling useSession().update(newUserData) I've tried

async function handleSubmitUpdateProfile(values: Admin) {
    try {
      const csrfToken = await getCsrfToken();
      await getSession({
        req: {
          body: {
            csrfToken,
            data: { user: { ...user, ...values } },
          },
        },
      });

      toast.success("Perfil alterado!", {
        description: "Seu perfil foi alterado com sucesso!",
      });
      window.dispatchEvent(new CustomEvent("userUpdated"));
    } catch (e: any) {
      toast.success("Erro ao alterar o perfil", {
        description:
          "Lamentamos, houve um erro inesperado ao alterar o perfil do administrador.",
      });
    }
  }

and in my jwt callback

async jwt({ token, user, trigger, session }) {
      if (trigger === "signIn" && user) {
        // user is the database info returned by your adapter and from what I can tell is not available in other triggers
        token.user = user;
      }

      if (trigger === "update" && session) {
        await apiCore.post("/user/admin/update", {
          name: session.user.name,
          email: session.user.email,
          telephone: session.user.telephone,
          id: session.user.id,
        });
        // 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!
        token.user = session.user;
      }
      return token;
    },

this solved my problem, now I am getting the trigger 'update' and the actual data I'm sending through getSession... it might not be the best solution but it definetly solved the problem

I'm trying to rigger similar behavior here #12214 (comment)