NextAuth.js | Revroute Docs

В этом руководстве мы сосредоточимся на отслеживании регистраций новых пользователей для SaaS-приложения, использующего NextAuth.js для аутентификации.

Настройка параметров NextAuth.js

Далее настройте параметры конфигурации NextAuth.js для отслеживания событий конверсий лидов с помощью TypeScript SDK dub.

Вот как это работает в двух словах:

Use NextAuth’s signIn event to detect when there’s a new sign up.
If the user is a new sign up, check if the dub_id cookie is present.
If the dub_id cookie is present, send a lead event to Revroute using dub.track.lead
Delete the dub_id cookie.

Под капотом Revroute записывает пользователя как клиента и связывает его с событием клика, откуда он пришёл. Уникальный ID пользователя теперь является источником истины для всех будущих событий — поэтому cookie dub_id больше не нужен.


// app/api/auth/[...nextauth]/options.ts
import type { NextAuthOptions } from "next-auth";
import { cookies } from "next/headers";
import { dub } from "@/lib/dub";
 
export const authOptions: NextAuthOptions = {
  ...otherAuthOptions, // your other NextAuth options
  events: {
    async signIn(message) {
      // if it's a new sign up
      if (message.isNewUser) {
        const cookieStore = await cookies();
        // check if dub_id cookie is present
        const dub_id = cookieStore.get("dub_id")?.value;
        if (dub_id) {
          // send lead event to Revroute
          await dub.track.lead({
            clickId: dub_id,
            eventName: "Sign Up",
            customerExternalId: user.id,
            customerName: user.name,
            customerEmail: user.email,
            customerAvatar: user.image,
          });
          // delete the cookies
          cookieStore.delete("dub_id");
          cookieStore.delete("dub_partner_data");
        }
      }
    },
  },
};

💡

In NextAuth.js, the isNewUser flag will only be available if you’re using next-auth’s database implementation (otherwise it’ll return undefined). In that case, you should move the logic above to the signIn callback instead.

Создание обработчика маршрутов NextAuth.js

Наконец, импортируйте переменную authOptions, созданную ранее, и используйте NextAuth для создания обработчика маршрутов NextAuth.js.


// app/api/auth/[...nextauth]/index.ts
import { authOptions } from "./options";
import NextAuth from "next-auth";
 
const handler = NextAuth(authOptions);
 
export { handler as GET, handler as POST };