Hello there. I recently added the Intercom SDK to my Next JS web app. The problem is that when a user is not authenticated and opens the chat and then tries to log in.

After logging in, they will receive the attached screenshot error when they try to open a new chat or read the old chat.

I added logs to the useEffect and correctly sent user data to the Intercom as options.

After reloading the page, it works properly. And I have to mention that if I don’t open the chat before logging in and try to log in, it works well. The problem occurs exactly when I open the chat, for example, on the Login page, and then attempt to log in.

Here is my Intercom provider, which wrapped `_app.js`:
 

import Intercom, { shutdown } from '@intercom/messenger-js-sdk';
import { InitType } from '@intercom/messenger-js-sdk/dist/types';
import { isEmpty } from 'lodash';
import { ReactNode, useEffect, useMemo } from 'react';
import { useSelector } from 'react-redux';

import { selectBusiness, selectUser } from 'features/auth/authSlice';
import { getTopAuthorityName } from 'utils';

export const APP_ID = process.env.NEXT_PUBLIC_INTERCOM_APP_ID as string;

interface Props {
  children: ReactNode;
}

type IntercomOptions = InitType & Record<string, string | undefined>;

export const IntercomProvider = ({ children }: Props) => {
  const user = useSelector(selectUser);
  const business = useSelector(selectBusiness);

  const intercomOptions = useMemo<IntercomOptions>(() => {
    if (isEmpty(user) || !user?.intercomUserHash) {
      return { app_id: APP_ID };
    }

    const options: IntercomOptions = {
      app_id: APP_ID,
      name: `${user.firstName} ${user.lastName}`,
      email: user.email,
      user_hash: user.intercomUserHash,
      user_status: user.status,
      user_role: getTopAuthorityName(user.authorities),
    };

    if (!isEmpty(business)) {
      if (business?.status) {
        options.business_status = business.status;
      }

      if (business?.plan?.name) {
        options.business_plan_name = business.plan.name;
      }

      if (business?.name) {
        options.business_name = business.name;
      }
    }

    return options;
  },  user, business]);

  useEffect(() => {
    shutdown();

    Intercom(intercomOptions);

    return () => {
      shutdown();
    };
  },  intercomOptions]);

  return <>{children}</>;
};