# Web React

## **Setup API Key**

`AmityUIKitProvider` requires an API key. You need a valid API key to begin using the UIKit. Please find your account API key in the [social.plus Console.](https://portal.amity.co/login)

After logging in Console:

1. Click **Settings** to expand the menu.
2. Select **Security**.
3. On the **Security** page, you can find the API key in the **Keys** section.

![API key in Security page](/files/82mU4nPoTaTzQreOUusD)

#### **Specify Endpoints Manually (Optional)**

You can specify endpoints manually via optional parameters. API endpoints for each data center are different so you need to adjust the endpoint accordingly.

We currently support multi-data center capabilities for the following regions:

| Region        | apiRegion | Endpoint URL     |
| ------------- | --------- | ---------------- |
| Europe        | eu        | apix.eu.amity.co |
| Singapore     | sg        | apix.sg.amity.co |
| United States | us        | apix.us.amity.co |

### Authentication <a href="#authentication" id="authentication"></a>

You must first register the current device with a `userId`. A device registered with a `userId` will be permanently tied to that `userId` until you deliberately unregister the device, or until the device has been inactive for more than 90 days. A device registered with a specific `userId` will receive all messages belonging to that user.

```javascript
export default function Wrapper({ apiKey, apiEndpoint, userId, displayName }) => {
    const getAuthToken = async () => {
      const authToken = await getAuthTokenFromApi()
      return authToken;
    }
    <AmityUiKitProvider
          key={userId}
          apiKey={apiKey}
          userId={userId}
          apiRegion={apiRegion} //eu, us, or sg
          getAuthToken={getAuthToken} //for secure mode authentication
        >
          <div
            style={{
              position: "absolute",
              left: 0,
              top: 0,
              width: "100vw",
              height: "100dvh",
            }}
          >
            <AmityUiKitSocial />
          </div>
        </AmityUiKitProvider>
```

{% hint style="info" %}
`AmityUIKitProvider` should be placed only once at the top of your application. Having multiple providers will create connection problems.
{% endhint %}

## Integrating CSS Styles

To use the Uikit components with styling, css should be imported.

```javascript
import "@amityco/ui-kit/dist/index.css";
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.social.plus/social-plus-uikit/uikit-4/setup-and-authentication/web-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.