Add support for auth_tokens in boot and update methods

.changeset/add-auth-tokens-support.md

@@ -0,0 +1,18 @@
+---
+"react-use-intercom": minor
+---
+
+Add support for auth_tokens in boot and update methods
+
+Users can now pass authentication tokens to Intercom for secure data operations. The `authTokens` property accepts an object with any string key-value pairs.
+
+Example usage:
+```js
+boot({
+  email: '[email protected]',
+  userId: '9876',
+  authTokens: {
+    security_token: 'abc...' // JWT
+  }
+})
+```

examples/auth-tokens-example.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IntercomProvider, useIntercom } from 'react-use-intercom';
+
+function MyApp() {
+  const { boot } = useIntercom();
+
+  const handleLogin = () => {
+    // After successful login, boot Intercom with auth tokens
+    boot({
+      email: '[email protected]',
+      createdAt: 1234567890,
+      name: 'John Doe',
+      userId: '9876',
+      authTokens: {
+        security_token: 'abc...', // Your JWT token
+        // You can add any other tokens as key-value pairs
+        api_token: 'xyz...',
+        custom_token: '123...'
+      }
+    });
+  };
+
+  return (
+    <div>
+      <h1>Intercom Auth Tokens Example</h1>
+      <button onClick={handleLogin}>Login and Boot Intercom</button>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <IntercomProvider appId="your-app-id">
+      <MyApp />
+    </IntercomProvider>
+  );
+}

packages/react-use-intercom/README.md

@@ -255,6 +255,23 @@ All the Intercom default attributes/props are camel cased (`appId` instead of `a
 })
  ```
 
+ #### Authentication tokens
+ For secure data operations, you can pass authentication tokens to Intercom using the `authTokens` property. This accepts an object with any string key-value pairs.
+
+ ```ts
+ const { boot } = useIntercom();
+
+ boot({
+  email: '[email protected]',
+  userId: '9876',
+  authTokens: {
+    security_token: 'abc...', // JWT token
+    api_token: 'xyz...',
+    // Any other tokens as key-value pairs
+  }
+})
+ ```
+
 ## Playground
 Small playground to showcase the functionalities of `react-use-intercom`. 
 

packages/react-use-intercom/src/mappers.ts

@@ -75,6 +75,7 @@ export const mapDataAttributesToRawDataAttributes = (
     mapDataAttributesCompanyToRawDataAttributesCompany,
   ),
   intercom_user_jwt: attributes.intercomUserJwt,
+  auth_tokens: attributes.authTokens,
   ...attributes.customAttributes,
 });
 

packages/react-use-intercom/src/types.ts

@@ -117,6 +117,8 @@ export type DataAttributesAvatar = {
   imageUrl?: string;
 };
 
+export type AuthTokens = Record<string, string>;
+
 export type RawDataAttributes = {
   email?: string;
   user_id?: string;
@@ -137,6 +139,7 @@ export type RawDataAttributes = {
   companies?: RawDataAttributesCompany[];
   intercom_user_jwt?: string;
   customAttributes?: Record<string, any>;
+  auth_tokens?: AuthTokens;
 };
 
 export type DataAttributes = {
@@ -236,9 +239,23 @@ export type DataAttributes = {
    * ```
    *
    * @see {@link https://www.intercom.com/help/en/articles/179-send-custom-user-attributes-to-intercom}
-   * @remarks The key is the attribute name. The value is a placeholder for the data you’ll track
+   * @remarks The key is the attribute name. The value is a placeholder for the data you'll track
    */
   customAttributes?: Record<string, any>;
+  /**
+   * Authentication tokens for secure data operations
+   * Can contain any key-value pairs where both key and value are strings
+   *
+   * @example
+   * ```
+   * authTokens: {
+   *   security_token: 'abc...' // JWT
+   * }
+   * ```
+   *
+   * @see {@link https://www.intercom.com/help/en/articles/6615543-setting-up-data-connectors-authentication#h_5343ec2d2c}
+   */
+  authTokens?: AuthTokens;
 };
 
 export type IntercomMethod =

packages/react-use-intercom/test/authTokens.test.tsx

@@ -0,0 +1,75 @@
+import { act, renderHook } from '@testing-library/react';
+import * as React from 'react';
+
+import { IntercomProvider, useIntercom } from '../src';
+
+describe('auth_tokens', () => {
+  it('should pass auth_tokens during boot', () => {
+    const appId = 'app123';
+    const mockIntercom = jest.fn();
+    (window as any).Intercom = mockIntercom;
+    (window as any).intercomSettings = undefined;
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <IntercomProvider appId={appId}>{children}</IntercomProvider>
+    );
+
+    const { result } = renderHook(() => useIntercom(), { wrapper });
+
+    act(() => {
+      result.current.boot({
+        email: '[email protected]',
+        createdAt: 1234567890,
+        name: 'John Doe',
+        userId: '9876',
+        authTokens: {
+          security_token: 'abc123',
+          another_token: 'xyz789',
+        },
+      });
+    });
+
+    expect(mockIntercom).toHaveBeenCalledWith('boot', {
+      app_id: appId,
+      email: '[email protected]',
+      created_at: 1234567890,
+      name: 'John Doe',
+      user_id: '9876',
+      auth_tokens: {
+        security_token: 'abc123',
+        another_token: 'xyz789',
+      },
+    });
+  });
+
+  it('should pass auth_tokens during update', () => {
+    const appId = 'app123';
+    const mockIntercom = jest.fn();
+    (window as any).Intercom = mockIntercom;
+    (window as any).intercomSettings = { app_id: appId };
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <IntercomProvider appId={appId} autoBoot>{children}</IntercomProvider>
+    );
+
+    const { result } = renderHook(() => useIntercom(), { wrapper });
+
+    act(() => {
+      result.current.update({
+        authTokens: {
+          security_token: 'updated_token',
+        },
+      });
+    });
+
+    // Find the update call (not the boot or event handler calls)
+    const updateCalls = mockIntercom.mock.calls.filter(call => call[0] === 'update');
+    const lastUpdateCall = updateCalls[updateCalls.length - 1];
+    expect(lastUpdateCall).toBeDefined();
+    expect(lastUpdateCall[1]).toMatchObject({
+      auth_tokens: {
+        security_token: 'updated_token',
+      },
+    });
+  });
+});