Implementing Segment Analytics on Next.js 14 with NextAuth

Question

I am attempting to implement Segment Analytics on my Next.js site. I am leveraging NextAuth for authentication through Google. All of this is working well, but I am now trying to call Segment's Identify method when the user logs in.

However, it does not appear that NextAuth emits a client-side event which I can listen for. I have found that I can attach to events on the server-side, but that doesn't help me.

/src/app/api/[...nextauth]/route.js:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],
    events: {
        signIn: async (data) => {
            console.log("server-side signIn event detected", data);
        },
    },
};
export const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Any clever ideas on how I can push this down to the client, or leverage the client-side useSession hook to detect this? I would prefer to not call identify on every page load, and only call when the user actually just logged in.

I tried building a client-side function and import it to the server, but got the following error:

Attempted to call the default export of /SegmentIdentify.js from the server but it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

Answer 1

If you're using signin() then based on the NextAuth docs about the signIn method, you could set redirect to false then save the output to a variable. Since signIn will then return a Promise, that resolves to the following:

{
  /**
   * Will be different error codes,
   * depending on the type of error.
   */
  error: string | undefined
  /**
   * HTTP status code,
   * hints the kind of error that happened.
   */
  status: number
  /**
   * `true` if the signin was successful
   */
  ok: boolean
  /**
   * `null` if there was an error,
   * otherwise the url the user
   * should have been redirected to.
   */
  url: string | null
}

You can check if ok is true, then call the Segment Identify method. After that, you can manually redirect the user to another page if needed.

Answer 2

The following approach worked for me:

• Created a grouping of post-login page in my folder structure called (post_logging)
• in (post_logging), i create a layout file, converted it to Client side by using 'use client' on top
• use import { useSession } from "next-auth/react" to get the session id, then use analytics.identify to identify the user