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.

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

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>
    )
  }

AmityUIKitProvider should be placed only once at the top of your application. Having multiple providers will create connection problems.

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.

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>
  )
}