Setup multi step authentication or MFA with next-auth

[hect1c]

Hey,

I'm trying to setup a multi step login flow with next-auth. Based on my current understanding I can setup multiple credential providers. This would essentially allow me to have something like this

    providers: [
      Credentials({
        id: 'login',
        // The name to display on the sign in form (e.g. 'Sign in with...')
        name: 'Login',
        // The credentials is used to generate a suitable form on the sign in page.
        // You can specify whatever fields you are expecting to be submitted.
        // e.g. domain, username, password, 2FA token, etc.
        credentials: {},
        authorize: nextAuthLogin,
      }),
      Credentials({
        id: 'mfa',
        name: 'Mfa',
        credentials: {},
        authorize: nextAuthMfaConfirm,
      }),
    ],

This would me to use both credentials through the id on each subsequent page. So on my auth/login I can use signIn('login', {}) and then on this is success catch the session.status in my component and redirect user to the MFA page. On this page I then have another form where they must add in the code and I would call signIn('mfa', {}) and this calls my second credentials provider. So far this works well but the issue I'm currently having is in my second credentials I'm trying to pass in the data I get from my backend service into the session data so I have two callbacks jwt and session. which look something like this

jwt

   jwt: async ({ token, user }): Promise<any> => {
        console.log('jwt callback [token] ***', token)
        console.log('jwt callback [user] ***', user)

        if (user) {
          token.user = user
        }

        console.log('jwt callback [token-after]', token)
        // user data is data received after signin
        // and or session client access
        return Promise.resolve(token)
      },

session

      session: async ({ session, user, token }) => {
        console.log('session callback [session] ***', session)
        console.log('session callback  [user] ***', user)
        console.log('session callback  [token] ***', token)
        // const encodedSessionId = jwt.sign(token, process.env.SECRET, { algorithm: 'HS256' })
        // at root keep session data
        session.user = token.user

        // user object
        session.user.email = String(token?.user.username)
        console.log('session callback  [session-after] ***', token)
        return Promise.resolve(session)
      },

In my first login credential when passing user to token.user I can see this in the session callback set it and this is then provided in my session. However on my second step in doing the same thing, even though I see my token.user not has the updated values from the second query, this is not passed to the session callback. The session callback still maintains the previous user object data.

What I notice in particular is that my JWT callback is called twice, on the first call I see my new set user object, but on the second call it has the previous user data, which I'm assuming is what is then passed to the session callback.

Is this expected or am I missing something? I would expect the session callback to now have the token variable updated with the new user object I passed in the second flow. Or am I using this incorrectly altogether?

Thanks for the feedback and great plugin!

[hect1c]

I was able to figure it out.

The reason it was not updating was because my data was too large for the JWT cookie. When I reduced the amount of data being passed this worked correctly.