How to listen signin and signout events in client-side?

[GabrielNogueiraBR]

I have a question about using the latest version of NextAuth. Basically I want to know if I can listen when users logged in or out on client-side. I know the library can help with this on the server side using 'events' in the config, but I'm not sure how to do this on the client side.

I'm trying to configure an analytics tool and I need certain events to occur on the client-side of my application for the tool to correctly collect and structure this data, so I wonder if there is any way to identify these 'signin' and ' signout' events on the client side.

The simple use of session status from useSession has not been enough to identify if there has been a login or even if this is the user's first login in my application.

What I'm looking for is to do something similar to the following code, but on the client-side of my application.

export const authOptions: NextAuthOptions = {
  events: {
    async signIn({ account, user, isNewUser }) {
      await setAnalyticsUserId(user.id)
      await analyticsEvent('login', { method: account?.provider })

      if (isNewUser)
        await analyticsEvent('first_login', { method: account?.provider })

    },
    async signOut({ token }) {
      if (token?.sub)
        await setAnalyticsUserId(token.sub)

      if (token?.provider)
        await analyticsEvent('sign_out', { method: token.provider as string })

    },
  },
}

Thank you for helping me.

[hesselbom]

Very good question, I'm also very interested in how this flow could look like.

[pascal-arnoux]

Indeed, a client API for authentication events would be helpful to customize the interface behavior (user creation, user sign in, sign out...) and trigger appropriate analytics events.