Manage logged in and anonymous users in app

[juanisimioli]

Issue: Intermittent app crashes when accessing messages after login transition with React Use Intercom

Problem Description

I'm using react-use-intercom to handle different user states (logged in vs anonymous). I have an IntercomManager component that initializes Intercom based on the user's authentication state.

Current Implementation

import { useEffect } from "react";
import { useIntercom } from "react-use-intercom";
import { useAuth } from "@hooks/useAuth/useAuth";

const IntercomManager = () => {
  const { boot, shutdown } = useIntercom();
  const { userData } = useAuth();

  useEffect(() => {
    // shutdown() // I also tried this at the beginning
    if (userData) {
      // Logged user
      boot({
        email: userData.email,
        name: `${userData.name} ${userData.lastName}`,
        phone: userData.phone,
        languageOverride: "es",
      });
    } else {
      // Anonymous user
      boot({
        languageOverride: "es",
      });
    }

    return () => {
      shutdown();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [userData]);

  return null;
};

export default IntercomManager;

Provider Setup

<IntercomProvider
  appId={process.env.NEXT_PUBLIC_INTERCOM_APP_ID as string}
  autoBoot={false}
>
  {/* App content */}
</IntercomProvider>

Expected Behavior

• When user is anonymous: Intercom should work normally
• When user logs in: Intercom should update with user data and work normally
• Smooth transition between anonymous and authenticated states

Actual Behavior (Intermittent Issue)

• Most of the time everything works fine
• The issue is inconsistent and hard to reproduce reliably
• Sometimes when the app initializes with an anonymous user and then the user logs in:
  1. ✅ Intercom correctly shows personalized greeting (e.g., "Hi userB!")
  2. ❌ App crashes when trying to access the messages section

Issue Frequency

• Sometimes it works perfectly - user can log in and access messages without any problems
• Sometimes it crashes - same exact flow but crashes when accessing messages
• The inconsistency makes it difficult to debug and suggests there might be a timing issue or race condition

Video Demonstration

I've attached a video that clearly shows the issue:

1. App initializes with no logged user - Intercom works fine
2. User logs in - Intercom correctly shows the user name/greeting
3. App crashes when trying to access messages
4. Hard refresh of the page - Everything works perfectly after refresh

Screen.Recording.2025-05-28.at.2.08.30.PM.mov

This behavior strongly suggests the issue is related to the state transition rather than the configuration itself, since a hard refresh with the same logged-in user works fine.

Questions

1. Is it correct to call boot() every time I want to set a different user type?
2. Should I call shutdown() at the beginning of the useEffect before calling boot()?
3. Could this intermittent behavior be caused by a race condition or timing issue during the user state transition?
4. Why does a hard refresh fix the issue while the dynamic login transition causes crashes?
5. What's the recommended approach for handling user state transitions with Intercom to avoid these inconsistencies?

Additional Context

• userData returns user data when logged in, and null when logged out
• I've tried both with and without calling shutdown() at the beginning of the useEffect
• The fact that hard refresh fixes the issue suggests this is a state management problem during transitions
• The crash only happens specifically when transitioning from anonymous to authenticated state and then accessing messages

Any guidance on the proper way to handle this user state transition consistently would be greatly appreciated!