---
title: "WidgetsProvider"
slug: "widgetsprovider"
abstract: "Details of the WidgetsProvider component in Sitecore Discover JS SDK for React."
---
# WidgetsProvider

The `WidgetsProvider` is the root provider of a React application integrated with Sitecore Discover platform using Discover JS SDK. It allows the use of SDK query hooks in its inner components, sets a cookie, and authenticates.

<details>
<summary><h2>Cookie</h2></summary>

The JS SDK sets a cookie at the domain level in a visitor's browser because most of Discover customers share cookies across subdomains. If your domain is a subdomain of top-level or apex domain that restricts cookies, you need to set the value for `publicSuffix` to `true`.

The default value of `publicSuffix` is `false`.

</details>

<details>
<summary><h2>Authentication</h2></summary>

For authentication, you must add credential attributes to the `WidgetsProvider` component. The attributes depend on how your domain is set up with Discover.

To authenticate:

- Use your `apiDomain` when Discover has been [set up as a subdomain](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/js-sdk-reference/components/walkthrough--setting-up-the-react-project.md "Walkthrough: Setting up the React project").
- Use your `apiKey` and `useToken` when Discover has not been set up as a subdomain.

</details>

<details>
<summary><h2>Import path</h2></summary>

```js
import { WidgetsProvider } from '@sitecore-discover/react';
```

</details>

<details>
<summary><h2>Example</h2></summary>

The following code block shows the `WidgetsProvider` component with credentials for authentication when your domain is not set up with Discover.

> [!note]
> In the following code block, `publicSuffix` has been set to `true` because the top-level domain of this implementation restricts cookies.
>
> `header_ps` and `footer_rec` appear on all pages according to the configuration.

```js
import { WidgetsProvider }from "@sitecore-discover/react";
import MyGlobalPreviewSearch from "./widget_components/myGlobalPreviewSearch";
import MyGlobalRecommendationWidget from "./widget_components/myGlobalRecommendationWidget";

const Root = () => {
    return (
          <WidgetsProvider
                publicSuffix='true'
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken >

            <header>
              <h1>My Application</h1>
              <MyGlobalPreviewSearch rfkId="header_ps" />
            </header>

            <div class="content">
                OTHER WIDGET COMPONENTS GO HERE
            </div>

            <footer>
                <MyGlobalRecommendationWidget rfkId="footer_rec" />
            </footer>

          </WidgetsProvider>
)};
```

</details>