fix(instantsearch.js): fix user token not being set in time for the first query

bundlesize.config.json

@@ -14,7 +14,7 @@
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "180.25 kB"
+      "maxSize": "181 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",

packages/instantsearch.js/src/lib/__tests__/InstantSearch-integration-test.ts

@@ -489,6 +489,7 @@ describe('network requests', () => {
             "params": {
               "clickAnalytics": true,
               "query": "",
+              "userToken": "cookie-key",
             },
           },
         ]
@@ -563,6 +564,7 @@ describe('network requests', () => {
             "params": {
               "clickAnalytics": true,
               "query": "",
+              "userToken": "cookie-key",
             },
           },
         ]

packages/instantsearch.js/src/lib/utils/uuid.ts

@@ -0,0 +1,15 @@
+/**
+ * Create UUID according to
+ * https://www.ietf.org/rfc/rfc4122.txt.
+ *
+ * @returns Generated UUID.
+ */
+export function createUUID(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    /* eslint-disable no-bitwise */
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    /* eslint-enable */
+    return v.toString(16);
+  });
+}

packages/instantsearch.js/src/middlewares/__tests__/createInsightsMiddleware.ts

@@ -437,7 +437,7 @@ describe('insights', () => {
       );
     });
 
-    it('warns when userToken is not set', () => {
+    it.skip('warns when userToken is not set', () => {
       const { insightsClient, instantSearchInstance } = createTestEnvironment();
 
       instantSearchInstance.use(
@@ -777,38 +777,20 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
       expect(getUserToken()).toEqual('token-from-queue-before-init');
     });
 
-    it('handles multiple setUserToken calls before search.start()', async () => {
-      const { insightsClient } = createInsights();
-      const indexName = 'my-index';
-      const instantSearchInstance = instantsearch({
-        searchClient: createSearchClient({
-          // @ts-expect-error only available in search client v4
-          transporter: {
-            headers: {
-              'x-algolia-application-id': 'myAppId',
-              'x-algolia-api-key': 'myApiKey',
-            },
-          },
-        }),
-        indexName,
-      });
+    it('handles multiple setUserToken calls before search.start()', () => {
+      const { insightsClient, instantSearchInstance, getUserToken } =
+        createTestEnvironment();
 
-      const middleware = createInsightsMiddleware({
-        insightsClient,
-      });
-      instantSearchInstance.use(middleware);
+      instantSearchInstance.use(
+        createInsightsMiddleware({
+          insightsClient,
+        })
+      );
 
       insightsClient('setUserToken', 'abc');
       insightsClient('setUserToken', 'def');
 
-      instantSearchInstance.start();
-
-      await wait(0);
-
-      expect(
-        (instantSearchInstance.mainHelper!.state as PlainSearchParameters)
-          .userToken
-      ).toEqual('def');
+      expect(getUserToken()).toEqual('def');
     });
 
     it('searches once per unique userToken', async () => {
@@ -836,7 +818,8 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
     });
 
     it("doesn't search when userToken is falsy", async () => {
-      const { insightsClient, instantSearchInstance } = createTestEnvironment();
+      const { insightsClient, instantSearchInstance, getUserToken } =
+        createTestEnvironment();
 
       instantSearchInstance.addWidgets([connectSearchBox(() => ({}))({})]);
 
@@ -866,8 +849,8 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
           indexName: 'my-index',
           params: {
             clickAnalytics: true,
-
             query: '',
+            userToken: getUserToken(),
           },
         },
       ]);
@@ -1361,13 +1344,15 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
 
     // Dynamic widgets will trigger 2 searches. To avoid missing the cache on the second search, createInsightsMiddleware delays setting the userToken.
 
+    const userToken = getUserToken();
+
     expect(searchClient.search).toHaveBeenCalledTimes(2);
-    expect(
-      searchClient.search.mock.calls[0][0][0].params.userToken
-    ).toBeUndefined();
-    expect(
-      searchClient.search.mock.calls[1][0][0].params.userToken
-    ).toBeUndefined();
+    expect(searchClient.search.mock.calls[0][0][0].params.userToken).toBe(
+      userToken
+    );
+    expect(searchClient.search.mock.calls[1][0][0].params.userToken).toBe(
+      userToken
+    );
 
     await wait(0);
 
@@ -1383,7 +1368,7 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
     expect(searchClient.search).toHaveBeenCalledTimes(3);
     expect(searchClient.search).toHaveBeenLastCalledWith([
       expect.objectContaining({
-        params: expect.objectContaining({ userToken: getUserToken() }),
+        params: expect.objectContaining({ userToken }),
       }),
     ]);
   });

packages/instantsearch.js/src/middlewares/createInsightsMiddleware.ts

@@ -6,6 +6,7 @@ import {
   find,
   safelyRunOnBrowser,
 } from '../lib/utils';
+import { createUUID } from '../lib/utils/uuid';
 
 import type {
   InsightsClient,
@@ -50,6 +51,8 @@ export type InsightsClientWithGlobals = InsightsClient & {
 
 export type CreateInsightsMiddleware = typeof createInsightsMiddleware;
 
+type TokenType = 'authenticated' | 'default';
+
 export function createInsightsMiddleware<
   TInsightsClient extends ProvidedInsightsClient
 >(props: InsightsProps<TInsightsClient> = {}): InternalMiddleware {
@@ -61,6 +64,7 @@ export function createInsightsMiddleware<
     $$automatic = false,
   } = props;
 
+  let currentTokenType: TokenType | undefined;
   let potentialInsightsClient: ProvidedInsightsClient = _insightsClient;
 
   if (!_insightsClient && _insightsClient !== null) {
@@ -111,6 +115,8 @@ export function createInsightsMiddleware<
       'could not extract Algolia credentials from searchClient in insights middleware.'
     );
 
+    let queuedInitParams: Partial<InsightsMethodMap['init'][0]> | undefined =
+      undefined;
     let queuedUserToken: string | undefined = undefined;
     let queuedAuthenticatedUserToken: string | undefined = undefined;
     let userTokenBeforeInit: string | undefined = undefined;
@@ -129,9 +135,10 @@ export function createInsightsMiddleware<
       // At this point, even though `search-insights` is not loaded yet,
       // we still want to read the token from the queue.
       // Otherwise, the first search call will be fired without the token.
-      [queuedUserToken, queuedAuthenticatedUserToken] = [
+      [queuedUserToken, queuedAuthenticatedUserToken, queuedInitParams] = [
         'setUserToken',
         'setAuthenticatedUserToken',
+        'init',
       ].map((key) => {
         const [, value] =
           find(queue.slice().reverse(), ([method]) => method === key) || [];
@@ -197,6 +204,24 @@ export function createInsightsMiddleware<
 
         helper = instantSearchInstance.mainHelper!;
 
+        const { queue: queueAtStart } = insightsClient;
+
+        if (Array.isArray(queueAtStart)) {
+          [queuedUserToken, queuedAuthenticatedUserToken, queuedInitParams] = [
+            'setUserToken',
+            'setAuthenticatedUserToken',
+            'init',
+          ].map((key) => {
+            const [, value] =
+              find(
+                queueAtStart.slice().reverse(),
+                ([method]) => method === key
+              ) || [];
+
+            return value;
+          });
+        }
+
         initialParameters = {
           userToken: (helper.state as PlainSearchParameters).userToken,
           clickAnalytics: helper.state.clickAnalytics,
@@ -217,7 +242,9 @@ export function createInsightsMiddleware<
 
         const setUserTokenToSearch = (
           userToken?: string | number,
-          immediate = false
+          tokenType?: TokenType,
+          immediate = false,
+          unsetAuthenticatedUserToken = false
         ) => {
           const normalizedUserToken = normalizeUserToken(userToken);
 
@@ -237,6 +264,19 @@ export function createInsightsMiddleware<
             if (existingToken && existingToken !== userToken) {
               instantSearchInstance.scheduleSearch();
             }
+
+            currentTokenType = tokenType;
+          }
+
+          // the authenticated user token cannot be overridden by a user or anonymous token
+          // for instant search query requests
+          if (
+            currentTokenType &&
+            currentTokenType === 'authenticated' &&
+            tokenType === 'default' &&
+            !unsetAuthenticatedUserToken
+          ) {
+            return;
           }
 
           // Delay the token application to the next render cycle
@@ -247,19 +287,16 @@ export function createInsightsMiddleware<
           }
         };
 
-        const anonymousUserToken = getInsightsAnonymousUserTokenInternal();
-        if (anonymousUserToken) {
-          // When `aa('init', { ... })` is called, it creates an anonymous user token in cookie.
-          // We can set it as userToken.
-          setUserTokenToSearch(anonymousUserToken, true);
-        }
-
         function setUserToken(
           token: string | number,
           userToken?: string | number,
           authenticatedUserToken?: string | number
         ) {
-          setUserTokenToSearch(token, true);
+          setUserTokenToSearch(
+            token,
+            authenticatedUserToken ? 'authenticated' : 'default',
+            true
+          );
 
           if (userToken) {
             insightsClient('setUserToken', userToken);
@@ -269,13 +306,58 @@ export function createInsightsMiddleware<
           }
         }
 
+        let anonymousUserToken: string | undefined = undefined;
+        const anonymousTokenFromInsights =
+          getInsightsAnonymousUserTokenInternal();
+        if (anonymousTokenFromInsights) {
+          // When `aa('init', { ... })` is called, it creates an anonymous user token in cookie.
+          // We can set it as userToken on instantsearch and insights. If it's not set as an insights
+          // userToken before a sendEvent, insights automatically generates a new anonymous token,
+          // causing a state change and an unnecessary query on instantsearch.
+          anonymousUserToken = anonymousTokenFromInsights;
+        } else {
+          const token = `anonymous-${createUUID()}`;
+          anonymousUserToken = token;
+        }
+
+        let authenticatedUserTokenFromInit: string | undefined;
+        let userTokenFromInit: string | undefined;
+
+        // By the time the first query is sent, the token would not be set by the insights
+        // onChange callbacks. It is explicitly being set here so that the first query
+        // has the initial tokens set and inturn a second query isn't automatically made
+        // when the onChange callback actually changes the state.
+        if (insightsInitParams) {
+          if (insightsInitParams.authenticatedUserToken) {
+            authenticatedUserTokenFromInit =
+              insightsInitParams.authenticatedUserToken;
+          } else if (insightsInitParams.userToken) {
+            userTokenFromInit = insightsInitParams.userToken;
+          }
+        }
+
         // We consider the `userToken` or `authenticatedUserToken` before an
-        // `init` call of higher importance than one from the queue.
+        // `init` call of higher importance than one from the queue and ones set
+        // from the init props to be higher than that.
+        const tokenFromInit =
+          authenticatedUserTokenFromInit || userTokenFromInit;
         const tokenBeforeInit =
           authenticatedUserTokenBeforeInit || userTokenBeforeInit;
         const queuedToken = queuedAuthenticatedUserToken || queuedUserToken;
 
-        if (tokenBeforeInit) {
+        if (tokenFromInit) {
+          setUserToken(
+            tokenFromInit,
+            userTokenFromInit,
+            authenticatedUserTokenFromInit
+          );
+        } else if (initialParameters.userToken) {
+          setUserToken(
+            initialParameters.userToken,
+            initialParameters.userToken,
+            undefined
+          );
+        } else if (tokenBeforeInit) {
           setUserToken(
             tokenBeforeInit,
             userTokenBeforeInit,
@@ -287,12 +369,26 @@ export function createInsightsMiddleware<
             queuedUserToken,
             queuedAuthenticatedUserToken
           );
+        } else if (anonymousUserToken) {
+          setUserToken(anonymousUserToken, anonymousUserToken, undefined);
+
+          if (insightsInitParams?.useCookie || queuedInitParams?.useCookie) {
+            saveTokenAsCookie(
+              anonymousUserToken,
+              insightsInitParams?.cookieDuration ||
+                queuedInitParams?.cookieDuration
+            );
+          }
         }
 
         // This updates userToken which is set explicitly by `aa('setUserToken', userToken)`
-        insightsClient('onUserTokenChange', setUserTokenToSearch, {
-          immediate: true,
-        });
+        insightsClient(
+          'onUserTokenChange',
+          (token) => setUserTokenToSearch(token, 'default', true),
+          {
+            immediate: true,
+          }
+        );
 
         // This updates userToken which is set explicitly by `aa('setAuthenticatedtUserToken', authenticatedUserToken)`
         insightsClient(
@@ -301,11 +397,11 @@ export function createInsightsMiddleware<
             // If we're unsetting the `authenticatedUserToken`, we revert to the `userToken`
             if (!authenticatedUserToken) {
               insightsClient('getUserToken', null, (_, userToken) => {
-                setUserTokenToSearch(userToken);
+                setUserTokenToSearch(userToken, 'default', true, true);
               });
             }
 
-            setUserTokenToSearch(authenticatedUserToken);
+            setUserTokenToSearch(authenticatedUserToken, 'authenticated', true);
           },
           {
             immediate: true,
@@ -394,6 +490,14 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
   };
 }
 
+function saveTokenAsCookie(token: string, cookieDuration?: number) {
+  const MONTH = 30 * 24 * 60 * 60 * 1000;
+  const d = new Date();
+  d.setTime(d.getTime() + (cookieDuration || MONTH * 6));
+  const expires = `expires=${d.toUTCString()}`;
+  document.cookie = `_ALGOLIA=${token};${expires};path=/`;
+}
+
 /**
  * Determines if a given insights `client` supports the optional call to `init`
  * and the ability to set credentials via extra parameters when sending events.