[IMPROVE] Change logic to generate token on Live Chat

package.json

@@ -87,6 +87,7 @@
 		"@kossnocorp/desvg": "^0.2.0",
 		"@rocket.chat/sdk": "^1.0.0-alpha.42",
 		"@rocket.chat/ui-kit": "^0.14.1",
+		"crypto-js": "^4.1.1",
 		"css-vars-ponyfill": "^2.3.2",
 		"date-fns": "^2.15.0",
 		"desvg": "^1.0.2",

src/components/helpers.js

@@ -120,8 +120,6 @@ export const setCookies = (rid, token) => {
 	document.cookie = `rc_room_type=l; path=/; ${ getSecureCookieSettings() }`;
 };
 
-export const createToken = () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-
 export const getAvatarUrl = (username) => (username ? `${ Livechat.client.host }/avatar/${ username }` : null);
 
 export const msgTypesNotRendered = ['livechat_video_call', 'livechat_navigation_history', 'au', 'command', 'uj', 'ul', 'livechat-close'];

src/lib/hooks.js

@@ -1,10 +1,10 @@
 import { Livechat } from '../api';
-import { createToken } from '../components/helpers';
 import { store } from '../store';
 import CustomFields from './customFields';
 import { setWidgetLanguage } from './locale';
 import { loadConfig } from './main';
 import { parentCall } from './parentCall';
+import { createToken } from './random';
 import Triggers from './triggers';
 
 const createOrUpdateGuest = async (guest) => {

src/lib/random.js

@@ -1,3 +1,6 @@
+
+import * as crypto from 'crypto-js';
+
 const UNMISTAKABLE_CHARS = '23456789ABCDEFGHJKLMNPQRSTWXYZabcdefghijkmnopqrstuvwxyz';
 
 const fraction = () => {
@@ -21,3 +24,5 @@ export const createRandomString = (charsCount, alphabet) =>
 
 export const createRandomId = (charsCount = 17) =>
 	createRandomString(charsCount, UNMISTAKABLE_CHARS);
+
+export const createToken = () => crypto.lib.WordArray.random(32).toString(crypto.enc.Hex);

src/lib/room.js

@@ -2,14 +2,15 @@ import { route } from 'preact-router';
 
 import { Livechat } from '../api';
 import { CallStatus, isCallOngoing } from '../components/Calls/CallStatus';
-import { setCookies, upsert, canRenderMessage, createToken } from '../components/helpers';
+import { setCookies, upsert, canRenderMessage } from '../components/helpers';
 import I18n from '../i18n';
 import { store, initialState } from '../store';
 import { normalizeAgent } from './api';
 import Commands from './commands';
 import constants from './constants';
 import { loadConfig, processUnread } from './main';
 import { parentCall } from './parentCall';
+import { createToken } from './random';
 import { normalizeMessage, normalizeMessages } from './threads';
 import { handleTranscript } from './transcript';
 

src/lib/threads.js

@@ -1,6 +1,7 @@
 import { Livechat } from '../api';
-import { upsert, createToken } from '../components/helpers';
+import { upsert } from '../components/helpers';
 import { store } from '../store';
+import { createToken } from './random';
 
 const addParentMessage = async (parentMessage) => {
 	const { state } = store;

src/lib/triggers.js

@@ -1,11 +1,12 @@
 import { route } from 'preact-router';
 
 import { Livechat } from '../api';
-import { upsert, createToken, asyncForEach } from '../components/helpers';
+import { upsert, asyncForEach } from '../components/helpers';
 import store from '../store';
 import { normalizeAgent } from './api';
 import { processUnread } from './main';
 import { parentCall } from './parentCall';
+import { createToken } from './random';
 
 const agentCacheExpiry = 3600000;
 let agentPromise;

src/routes/Chat/container.js

@@ -3,12 +3,13 @@ import { route } from 'preact-router';
 
 import { Livechat } from '../../api';
 import { ModalManager } from '../../components/Modal';
-import { createToken, debounce, getAvatarUrl, canRenderMessage, throttle, upsert } from '../../components/helpers';
+import { debounce, getAvatarUrl, canRenderMessage, throttle, upsert } from '../../components/helpers';
 import I18n from '../../i18n';
 import { normalizeQueueAlert } from '../../lib/api';
 import constants from '../../lib/constants';
 import { loadConfig } from '../../lib/main';
 import { parentCall, runCallbackEventEmitter } from '../../lib/parentCall';
+import { createToken } from '../../lib/random';
 import { initRoom, closeChat, loadMessages, loadMoreMessages, defaultRoomParams, getGreetingMessages } from '../../lib/room';
 import { Consumer } from '../../store';
 import Chat from './component';

src/routes/LeaveMessage/container.js

@@ -2,8 +2,9 @@ import { h, Component } from 'preact';
 
 import { Livechat } from '../../api';
 import { ModalManager } from '../../components/Modal';
-import { createToken, parseOfflineMessage } from '../../components/helpers';
+import { parseOfflineMessage } from '../../components/helpers';
 import { parentCall } from '../../lib/parentCall';
+import { createToken } from '../../lib/random';
 import { Consumer } from '../../store';
 import LeaveMessage from './component';
 

src/routes/SwitchDepartment/container.js

@@ -2,10 +2,10 @@ import { h, Component } from 'preact';
 
 import { Livechat } from '../../api';
 import { ModalManager } from '../../components/Modal';
-import { createToken } from '../../components/helpers';
 import history from '../../history';
 import I18n from '../../i18n';
 import { loadConfig } from '../../lib/main';
+import { createToken } from '../../lib/random';
 import { Consumer } from '../../store';
 import SwitchDepartment from './component';
 

src/store/Store.js

@@ -1,6 +1,7 @@
 import mitt from 'mitt';
 
 import { parentCall } from '../lib/parentCall';
+import { createToken } from '../lib/random';
 
 const { localStorage, sessionStorage } = window;
 
@@ -40,7 +41,7 @@ export default class Store {
 		});
 
 		window.addEventListener('load', () => {
-			const sessionId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+			const sessionId = createToken();
 			sessionStorage.setItem('sessionId', sessionId);
 			const { openSessionIds = [] } = this._state;
 			this.setState({ openSessionIds: [sessionId, ...openSessionIds] });

src/store/index.js

@@ -1,9 +1,8 @@
 import { h, Component, createContext } from 'preact';
 
+import { createToken } from '../lib/random';
 import Store from './Store';
 
-const createToken = () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-
 export const initialState = () => ({
 	token: createToken(),
 	typing: [],

yarn.lock

@@ -5062,6 +5062,11 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+crypto-js@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
+  integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
+
 crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"