Setup & Authentication

Setup API Key

AmityUIKitProvider requires an API key. You will need a valid API key to begin using the UIKit. You can find your account API key in the Amity Social Cloud Console.
1
export default function Wrapper({ apiKey, apiEndpoint, userId, displayName }) => {
2
return (
3
<UiKitProvider
4
apiKey={apiKey}
5
apiEndpoint={apiEndpoint}
6
userId={userId}
7
displayName={displayName || userId}
8
>
9
<App />
10
</UiKitProvider>
11
)
12
}
Copied!
AmityUIKitProvider should be placed only once at the top of your application. Having multiple providers will create connection problems.

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

In the event that 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.
1
export default function Wrapper({ apiKey, apiEndpoint, userId, displayName }) => {
2
const ref = useRef();
3
4
const handleConnect = () => ref.current.connect();
5
const handleDisconnect = () => ref.current.disconnect();
6
7
const handleConnected = () => console.log(“connected”);
8
const handleDisconnected = () => console.log(“disconnected”);
9
10
return (
11
<UiKitProvider
12
ref={ref}
13
apiKey={apiKey}
14
apiEndpoint={apiEndpoint}
15
userId={userId}
16
displayName={displayName || userId}
17
onConnected={handleConnected}
18
onDisconnected={handleDisconnected}
19
>
20
<App
21
connect={handleConnect}
22
disconnect={handleDisconnect} />
23
</UiKitProvider>
24
)
25
}
Copied!
Last modified 1mo ago
Copy link