---
title: "Setting up the JS SDK in your React project"
slug: "setting-up-the-js-sdk-in-your-react-project"
abstract: "Walkthrough to set up when integrating your React project using Sitecore Search JS SDK and components.."
---
# Setting up the JS SDK in your React project

Before you can begin integrating your React application with Sitecore Search using the JS SDK, you need to install and set up the JS SDK in your React project. The various procedures in this walkthrough cover installation of Search packages and authentication.

This walkthrough describes how to:

- [Install JS SDK and UI Components for React.](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/setting-up-the-js-sdk-in-your-react-project.html#UUID-38bafbf0-bb41-8281-7aef-dca975f3f8de_section-idm234980677311652 "Install JS SDK and UI Components for React")
- [Retrieve credentials.](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/setting-up-the-js-sdk-in-your-react-project.html#UUID-38bafbf0-bb41-8281-7aef-dca975f3f8de_section-idm234982228137888 "Retrieve credentials")
- [Authenticate with credentials.](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/setting-up-the-js-sdk-in-your-react-project.html#UUID-38bafbf0-bb41-8281-7aef-dca975f3f8de_section-idm234982233461605 "Authenticate with credentials")

## Install JS SDK and UI Components for React

Developers can install Sitecore Search JS SDK and UI Components packages into their projects. In your React code, you can import classes, functions, and objects from these packages, just as you would from other JS packages.

To install the latest JS SDK and UI Components for React:

1. To add Search JS SDK for React to your project, run the following in your project:

    ```text
    npm install --save @sitecore-search/react
    ```

2. To add Search UI Components for React to your project, run the following in your project:

    ```text
    npm install --save @sitecore-search/ui
    ```

3. In the `Root` component of your React project, import the `WidgetsProvider` and `PageController` components.

    ```csharp
    import { PageController, WidgetsProvider } from "@sitecore-search/react";

    const Root = () => {
        PageController.getContext().setLocaleLanguage('en');
        PageController.getContext().setLocaleCountry('us');
        return (
            <WidgetsProvider>
            </WidgetsProvider>
    )};
    ```

    > [!note]
    > If you don't have multiple locales configured, you can remove the `PageController` component and the two lines before the return statement. The default locale is automatically used in this case.

## Retrieve credentials

To protect your privacy and content, we require that your application authenticate with Search before making any requests. You need to use the credentials associated with your account and domain.

To retrieve your Search credentials:

1. Log in to Sitecore Search with your Sitecore Search credentials.
2. On the menu bar, click **Developer Resources**.
3. In the **API Keys** pane on the right, copy the key for data requests.

## Authenticate with credentials

To protect your privacy and content, we require that your application authenticate with Search before making any requests. You need to use the credentials associated with your account and domain. You can choose to authenticate before you make any data requests or along with your fist data request.

> [!important]
> The JS SDK sets a cookie and includes the UUID when tracking events. Visitor information, UUID, is required to personalize search results.

After the JS SDK successfully authenticates the application, the JS SDK includes the necessary authentication information in all future requests.

We recommend you include the credentials in the `Root` or `App` component of your React application.

To authenticate when your subdomain is set up:

In the `Root` component of your React project, add the `WidgetsProvider` component with the correct [credentials for authentication](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/credentials-for-authentication.html "Credentials for authentication") and the `PageController` component to set the locale, as shown in the following code block.

```csharp
import { PageController, WidgetsProvider } from "@sitecore-search/react";

const Root = () => {
    PageController.getContext().setLocaleLanguage('en');
    PageController.getContext().setLocaleCountry('us');
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                serviceHost='<api domain>'
            >
            <MyApp />
        </WidgetsProvider>
)};
```

> [!note]
> If you don't have multiple locales configured, you can remove the `PageController` component and the two lines before the return statement. The default locale is automatically used in this case.
>
> The credentials you use depend on how your domain is set up for Sitecore Search. For instructions on authenticating when your subdomain is not set up with Search, refer to [Authenticate without domain set up](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/authenticate-without-domain-set-up.html "Authenticate without domain set up").
>
> For the `env` attribute, the value must be one of `apse2` (for Asia/Oceania domains), `prodEu` (for European domains), or `prod` (for US domains).