在Next.js 14中结合NextAuth实现登录触发Segment Identify方法

方法一：用useSession监听登录状态变化（推荐） #

NextAuth的useSession钩子能实时获取会话状态，我们可以通过监听状态从“未认证”变为“已认证”的瞬间，触发Segment的Identify，同时用一个标记避免页面刷新时重复执行。

1. 新建一个客户端组件src/components/SegmentTracker.js（必须加'use client'指令）：

'use client';

import { useSession } from 'next-auth/react';
import { useEffect, useRef } from 'react';

export default function SegmentTracker() {
  const { data: session, status } = useSession();
  const hasTriggeredIdentify = useRef(false);

  useEffect(() => {
    // 仅当用户刚登录（状态变为authenticated）且还没调用过Identify时执行
    if (status === 'authenticated' && !hasTriggeredIdentify.current) {
      window.analytics.identify(session.user.id, {
        name: session.user.name,
        email: session.user.email,
        // 按需添加其他用户属性
      });
      hasTriggeredIdentify.current = true;
    }

    // 用户登出时重置标记，下次登录能重新触发
    if (status === 'unauthenticated') {
      hasTriggeredIdentify.current = false;
    }
  }, [status, session]);

  return null; // 这个组件不需要渲染任何内容
}

2. 在根布局src/app/layout.js中引入这个组件，让它全局监听会话：

import SegmentTracker from '@/components/SegmentTracker';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <SegmentTracker />
        {children}
      </body>
    </html>
  );
}

方法二：通过NextAuth回调添加登录标记 #

在服务器端的NextAuth配置里，给首次登录的会话加个临时标记，客户端拿到这个标记后触发Identify，之后标记会被清除，避免重复执行。

1. 修改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,
        }),
    ],
    callbacks: {
        async jwt({ token, user }) {
            // 用户首次登录时，给JWT加个isNewLogin标记
            if (user) {
                token.isNewLogin = true;
            }
            return token;
        },
        async session({ session, token }) {
            // 把标记传给客户端会话，然后清除JWT里的标记
            if (token.isNewLogin) {
                session.isNewLogin = true;
                token.isNewLogin = false;
            }
            return session;
        },
    },
};
export const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

2. 客户端组件里监听这个标记：

'use client';

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

export default function SegmentTracker() {
  const { data: session } = useSession();

  useEffect(() => {
    if (session?.isNewLogin) {
      window.analytics.identify(session.user.id, {
        name: session.user.name,
        email: session.user.email,
      });
    }
  }, [session]);

  return null;
}

关于服务器端调用客户端函数的错误 #

你碰到的报错是因为Next.js App Router严格隔离了服务器和客户端环境，Segment的浏览器SDK依赖浏览器的window对象，只能在客户端组件里执行，服务器端代码没法直接调用这类客户端函数，这是框架的环境隔离机制导致的。

内容的提问来源于stack exchange，提问作者jyoung