> For the complete documentation index, see [llms.txt](https://documentation.sceenic.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.sceenic.co/public-chat-sdk/tutorials/web/web-typescript-react.md).

# Web - TypeScript/React

## Overview <a href="#overview" id="overview"></a>

Follow this step-by-step tutorial to create basic implementation of Public Chat SDK.

[Code samples](https://bitbucket.org/svmt/public-chat-demo/src/master/)\
[Demo application](https://sceenic-public-chat-demo.web.app/)\
[API Documentation](https://public-chat-api-doc.web.app/)

## Requirements <a href="#requirements" id="requirements"></a>

* A Sceenic account
* Code Editor( [WebStorm](https://www.jetbrains.com/webstorm/download/), [VS Code](https://code.visualstudio.com/download))
* NPM access token for Chat SDK
* API\_KEY and API\_SECRET
* [Node >= 8.10 and npm >= 5.6](https://nodejs.org/en/)

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

An `Access Token` is needed in order to allow a client to connect to chat service.

{% hint style="danger" %}
**Note:** It is important that the client application does not request an Access Token directly from the frontend. By doing that you risk exposing the API\_KEY and API\_SECRET.
{% endhint %}

### Acquiring an Access Token <a href="#acquiring-an-access-token" id="acquiring-an-access-token"></a>

{% tabs %}
{% tab title="cUrl(Bash)" %}

```bash
curl -iL --request GET --url https://YOUR_CAS_URL/public-chat/token/?sub=USER_ID --header 'auth-api-key: API_KEY'   --header 'auth-api-secret: API_SECRET'
```

{% endtab %}
{% endtabs %}

The `Access Token` is a JWT token - more about jwt you can read - [here](https://en.wikipedia.org/wiki/JSON_Web_Token).

A successful response will look like that:

```
{
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...."
}
```

{% hint style="info" %}
You can get your API\_KEY and API\_SECRET in your private area, [here](https://media.sceenic.co/).
{% endhint %}

{% hint style="info" %}
USER\_ID is some unique identifier of the user in your system.
{% endhint %}

{% hint style="warning" %}
**Note:** Every chat token corresponds to one specific user only.
{% endhint %}

### Going to production

When moving from the Sandbox environment to production you will need to implement your own authentication server. \
This server will supply the various clients (Web, Android, and iOS) with a valid Access Token so that they can use the service.

For that you will need:

* API\_KEY, and API\_SECRET - can be retrieved in your private area once you [login ](https://media.sceenic.co/)
* Your own working authentication server

## Create a project <a href="#create-a-project" id="create-a-project"></a>

To create a project we recommended using the following stack: React + TypeScript + ChatSDK.

* Create an empty React + Typescript project

```
npx create-react-app my-app --template typescript  
```

## Add chat SDK library to your project <a href="#add-the-sync-sdk-library-to-your-project" id="add-the-sync-sdk-library-to-your-project"></a>

* Create ***.npmrc*** file. In the project’s root folder
* Put your `Access Token` inside `//registry.npmjs.org/:_authToken=YOUR_ACCESS_TOKEN`.
* Install Public Chat SDK via `npm i @sscale/pchatsdk`.

For more information on NPM installation look [here](/public-chat-sdk/tutorials/web/installing-the-npm-package.md).

## Basic setup <a href="#sample-application-ui" id="sample-application-ui"></a>

* Add the following import

```javascript
import { PChatSDK } from '@sscale/pchatsdk';
```

* Create public chat SDK instance

```javascript
const pchatSDK = new PChatSDK();
```

* Subscribe to events

```javascript
import { Events } from '@sscale/pchatsdk';

pchatSDK.on(Events.ERROR, (e) => {});
pchatSDK.on(Events.CONNECT, () => {});
pchatSDK.on(Events.MESSAGE, (message) => {});
...
```

* Connect to room

```javascript
pchatSDK.connect('room_id', 'username', JWT_ACCESS_TOKEN)
        .then(() => {})
        .catch(e => {});
```

* Load history

```javascript
pchatSDK.loadOlder()
        .then(() => {})
        .catch(e => {});
```

* Access messages

```javascript
pchatSDK.messages.forEach((message) => {});
```

* Send message

```javascript
pchatSDK.publish('Hello')
        .then(() => {})
        .catch(e => {});
```

In addition, have a look at the extra features available for you:

```javascript
pchatSDK.user;
pchatSDK.state;

pchatSDK.disconnect();
```

Have a look at the [demo application ](https://sceenic-public-chat-demo.web.app/)and it's [sources](https://bitbucket.org/svmt/public-chat-demo/src/master/) to see all the features and public chat SDK API documentation [here](https://public-chat-api-doc.web.app/).

## Support <a href="#support" id="support"></a>

Need technical support? contact us at <Support@sceenic.co>.