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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implementation of umami.identify in a NextJS app #3097

{{title}}

Replies: 0 comments

Select a reply

Implementation of umami.identify in a NextJS app #3097

diogomartino Dec 9, 2024

Replies: 0 comments

diogomartino
Dec 9, 2024