Skip to main content

​
Before you begin

This guide assumes that you have configured the Advanced Personalization feature and are familiar with user profiles.
This feature isn’t available on every plan. Refer to your pricing plan to see if it’s included.

​
Fetch a user profile

Fetching the user profile requires an with search, browse and recommendation ACLs.Don’t expose this API key in public clients (for example, in a web or mobile app). Instead, fetch the user profile from a secure backend server.
1

Retrieve your user's ID

Retrieve your user’s ID from where it’s stored (for example, your database).If a user ID is unavailable (possibly because the user is a first-time visitor) or doesn’t correspond to an existing user profile, you can implement a fallback to avoid adding extra logic to your app.The following example fetches the user profile and provides a fallback if there’s a problem completing the :
JavaScript
const ALGOLIA_REGION = "eu";

async function fetchUserProfile(userID) {
  const fallbackUserProfile = {
    userID,
    type: "basic",
    affinities: [],
    lastUpdatedAt: new Date().toISOString(),
  };

  try {
    const response = await fetch(
      `https://ai-personalization.${ALGOLIA_REGION}.algolia.com/2/users/${encodeURIComponent(userID)}`,
      {
        headers: {
          "X-Algolia-Application-Id": "ALGOLIA_APPLICATION_ID",
          "X-Algolia-API-Key": "ALGOLIA_API_KEY",
        },
      }
    );

    if (!response.ok) {
      const error = await response.text();
      return fallbackUserProfile;
    }

    const userProfile = await response.json();

    return userProfile;
  } catch (error) {
    return fallbackUserProfile;
  }
}
2

Provide the user profile

Ensure the user profile is available to the rest of your app.In React, you can provide the user profile to your app as follows:
React
import { createContext, useContext } from "react";

const PersonalizationProfileContext = createContext(null);
PersonalizationProfileContext.displayName = "PersonalizationProfileContext";

function usePersonalizationProfile() {
  const context = useContext(PersonalizationProfileContext);

  if (!context) {
    throw new Error(
      "usePersonalizationProfile() must be used within a <PersonalizationProfileProvider>."
    );
  }

  return context;
}

function PersonalizationProfileProvider({ userProfile, children }) {
  return (
    <PersonalizationProfileContext.Provider value={userProfile}>
      {children}
    </PersonalizationProfileContext.Provider>
  );
}

function App({ userProfile }) {
  return (
    <PersonalizationProfileProvider userProfile={userProfile}>
      <Page />
    </PersonalizationProfileProvider>
  );
}
3

Access the user profile

After passing the user profile to the PersonalizationProfileProvider provider, you can access your user profile properties with the usePersonalizationProfile React Hook. You can use this Hook in any component within PersonalizationProfileProvider.
React
function Page() {
  const { userID, affinities } = usePersonalizationProfile();

  return <>{/* Your React */}</>;
}