Is possible mutate session with a any action in front-end?

[victorst79]

Question 💬

I am working on an application, in which I save the user data in the session after logging in. I use next-auth to have control over the data and the pages that a user can see or not see.

I have a custom backend which I call inside authorize to do the login. So far so good, my problem is that I have a page with information about a user, the user can change this information (email, password, dates, etc). This action affects my custom backend because the POST call that modifies this data is obviously in my backend. But I also want to mute or modify it in my session without having to close session and login again.
Is there any way to do this?

I have seen some issues in the repository but almost all of them are oriented to refresh the token and not mutate it with an action from the front-end.

Thanks!

How to reproduce ☕️

This is my [...nextauth].js file:

export default NextAuth({
  providers: [
    Providers.Credentials({
      name: 'Custom Auth',
      credentials: {
        email: {
          label: 'Email',
          type: 'text',
          placeholder: 'Email',
        },
        password: {
          label: 'Password',
          type: 'password',
          placeholder: 'Password',
        },
      },
      authorize: async ({ email, password }) => {
        try {
          const {
            data: { data },
          } = await axios.post('/login', {
            data: {
              email: email,
              password: password,
            },
          });
          if (!data) throw new Error('Data not returned!');
          return data;
        } catch (e) {
          throw new Error(e.message);
        }
      },
    }),
  ],
  callbacks: {
    jwt: async (token, user, account, profile, isNewUser) => {
      user && (token.user = user);
      return Promise.resolve(token);
    },

    session: (session, user, sessionToken) => {
      session.sessionData = user.user;
      delete session['user'];
      return Promise.resolve(session);
    },
  },
  pages: {
    signIn: '/login',
    error: '/login',
  },
});

The structure of my session is:

sessionData: {
  "token": "My-Token",
  "session_id": "Session-id",
  "user": {
    "email": "email@email.com",
    "lang": "eng",
    "name": "Name",
    "surname": "Surname",
    "timezone": "Europe/Lisbon",
  }
}

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[balazsorban44]

duplicate of #2269