> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Fetching a user profile

> How to fetch a user profile and provide its properties to the rest of your app.

export const SearchRequest = () => <Tooltip tip="A search request is a single HTTP call to the Algolia Search API that can run one or more search operations. It can include multiple queries, for example, when querying several indices at once.">
    search request
  </Tooltip>;

export const APIKey = () => <Tooltip tip="An alphanumeric string that controls access to the Algolia APIs. It defines what actions are allowed, such as searching an index or adding new records." cta="API key" href="/doc/guides/security/api-keys">
    API key
  </Tooltip>;

## Before you begin

This guide assumes that you have [configured the Advanced Personalization feature](/doc/guides/personalization/advanced-personalization/configure#set-up-personalization) and are familiar with [user profiles](/doc/guides/personalization/advanced-personalization/what-is-advanced-personalization/concepts/user-profiles).

<Callout icon="credit-card" color="#c084fc">
  This feature isn't available on every plan.
  Refer to your [pricing plan](https://www.algolia.com/pricing) to see if it's included.
</Callout>

## Fetch a user profile

<Warning>
  Fetching the user profile requires an <APIKey /> 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.
</Warning>

<Steps>
  <Step title="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 <SearchRequest />:

    ```js JavaScript icon=code theme={"system"}
    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;
      }
    }
    ```
  </Step>

  <Step title="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:

    ```jsx React icon=code theme={"system"}
    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>
      );
    }
    ```
  </Step>

  <Step title="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`.

    ```jsx React icon=code theme={"system"}
    function Page() {
      const { userID, affinities } = usePersonalizationProfile();

      return <>{/* Your React */}</>;
    }
    ```
  </Step>
</Steps>