# Setup & Authentication

## **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](https://2352509137-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MX0mOAVWkotGme0iRzu%2Fuploads%2FAMboupka7tVqFZL2g6Yg%2Fwebconsole.png?alt=media\&token=193cec6a-0ba7-4eed-8246-6785a84b24cd)

```javascript
export default function Wrapper({ apiKey, apiEndpoint, userId, displayName }) => {
    const getAuthToken = async () => {
      const authToken = await getAuthTokenFromApi()
      return authToken;
    }

    return (
      <AmityUiKitProvider
        ref={ref}
        apiKey={apiKey}
        apiEndpoint={apiEndpoint}
        userId={userId}
        displayName={displayName || userId}
        onConnected={handleConnected}
        onDisconnected={handleDisconnected}
        getAuthToken={getAuthToken}
      >
        <App
           connect={handleConnect}
           disconnect={handleDisconnect} />
      </AmityUiKitProvider>
    )
  }

```

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

**Note:** We currently **do not** support React's Strict Mode. Please make sure that Strict Mode is disabled when integrating AmityUIKitProvider in your application.

#### **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        | Endpoint       | Endpoint URL    |
| ------------- | -------------- | --------------- |
| Europe        | ApiEndpoint.EU | api.eu.amity.co |
| Singapore     | ApiEndpoint.SG | api.sg.amity.co |
| United States | ApiEndpoint.US | api.us.amity.co |

## **Unregister**

If your user logs out, you should explicitly unregister the user from the SDK as well, to prevent the current device from receiving any unnecessary or restricted data.

```javascript
export default function Wrapper({ apiKey, apiEndpoint, userId, displayName }) => {
  const ref = useRef();

  const handleConnect = () => ref.current.connect();
  const handleDisconnect = () => ref.current.disconnect();

  const handleConnected = () => console.log(“connected”);
  const handleDisconnected = () => console.log(“disconnected”);

  return (
    <AmityUiKitProvider
      ref={ref}
      apiKey={apiKey}
      apiEndpoint={apiEndpoint}
      userId={userId}
      displayName={displayName || userId}
      onConnected={handleConnected}
      onDisconnected={handleDisconnected}
    >
      <App
         connect={handleConnect}
         disconnect={handleDisconnect} />
    </AmityUiKitProvider>
  )
}
```