Implementation of umami.identify in a NextJS app #3097

diogomartino · 2024-12-09T00:03:02Z

diogomartino
Dec 9, 2024

Hi, what's the correct way of implementing the identify on a next app that uses next-auth? I managed to do it like this, but I'd like to know if there's a better way.

export default async function RootLayout({ children }: TLayoutProps) {
  return (
    <html suppressHydrationWarning>
      <body>
        <UmamiSessionProvider />
        ...
      </body>
      <Script src="....." data-website-id="...." strategy="afterInteractive" />
    </html>
  );
}

import { getAuthUser } from '@/helpers/get-auth-user';
import { Client } from './client';

const UmamiSessionProvider = async () => {
  const authUser = await getAuthUser();

  if (!authUser) return null;

  return <Client user={authUser} />;
};

export { UmamiSessionProvider };

'use client';

import { sleep } from '@ritmoepoesia/shared';
import { User } from 'next-auth';
import { memo, useCallback, useEffect, useRef } from 'react';

type TClientProps = {
  user: User;
};

const MAX_ATTEMPTS = 30;

const Client = memo(({ user }: TClientProps) => {
  const inited = useRef(false);

  const registerSession = useCallback(async () => {
    if (!user.email) return;

    let attempts = 0;

    while (!window.umami && attempts < MAX_ATTEMPTS) {
      await sleep(10);
      attempts += 1;
    }

    if (window.umami) {
      window.umami.identify({ email: user.email });
    }
  }, [user]);

  useEffect(() => {
    if (inited.current) return;

    registerSession();

    inited.current = true;
  }, [registerSession]);

  return null;
});
Client.displayName = 'UmamiSessionProviderClient';

export { Client };

This seems to be working fine but feels like an hack.

the-inconvenience-store · 2025-05-07T10:01:35Z

the-inconvenience-store
May 7, 2025

You could call it from within next/scripts onReady attribute:

export function UmamiScript({ session }: UmamiScriptProps) {
    return (
        <Script
            src={process.env.NEXT_PUBLIC_UMAMI_SRC || ''}
            data-website-id={process.env.NEXT_PUBLIC_UMAMI_ID || ''}
            onReady={() => {
                if (!session) return;
                // @ts-expect-error umami is a script loaded in the head, not a react library
                if (window.umami) {
                    // @ts-expect-error umami is a script loaded in the head, not a react library
                    window.umami.identify({ name: session.user.name, email: session.user.email, userId: session.user.id });
               }
            }}
        />
    )
}

Your script will have to be a client component in order to access onReady & the window object.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implementation of umami.identify in a NextJS app #3097

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Implementation of umami.identify in a NextJS app #3097

Uh oh!

diogomartino Dec 9, 2024

Replies: 1 comment

Uh oh!

Uh oh!

the-inconvenience-store May 7, 2025

diogomartino
Dec 9, 2024

the-inconvenience-store
May 7, 2025