Merge pull request #13 from frontapp/verified_user_example

Add verified user example

Author: cjmckee

README.md

@@ -98,7 +98,10 @@ After the last command, the example application can be accessed at http://localh
 
 There are four helpers provided in this repository, and each of them is used in the [examples](https://github.com/frontapp/front-chat-sdk/tree/main/examples) directory.
 
-Additionally, there is an example of how to embed a Front Chat widget [directly in a page](https://github.com/frontapp/front-chat-sdk/tree/main/examples/react-embed-front-chat). This example uses React, but the general principle should work for any application.
+We have also provided additional examples for common use cases. These examples use React, but the general principles should work for any application.
+
+- How to embed a Front Chat widget [directly in a page](https://github.com/frontapp/front-chat-sdk/tree/main/examples/react-embed-front-chat).
+- How to initialize a Front Chat widget [with a verified user](https://github.com/frontapp/front-chat-sdk/tree/main/examples/react-verified-user).
 
 #### Quick-start Helpers
 

examples/react-verified-user/index.tsx

@@ -0,0 +1,60 @@
+import {createHmac} from 'crypto';
+import {useEffect, useState} from 'react';
+
+import {useFrontChatBoot} from '../../lib/hooks/use-front-chat-boot';
+
+/*
+ * Constants.
+ */
+
+const chatId = '<CHAT_ID_REQUIRED>';
+
+// Usually this will be an email for a verified user.
+const userId = '<USER_ID_REQUIRED>';
+
+// This value is used to generate the user hash, and can be found in the Front channel settings.
+const identitySecret = '<IDENTITY_SECRET_REQUIRED>';
+
+/*
+ * User Hash.
+ */
+
+// This is a hash generated from the userId using the identity secret.
+// Follow the instructions here to generate the user hash: https://dev.frontapp.com/docs/identify-users#computing-the-user-hash
+// NOTE: This should only ever be generated server-side, and this is just an example. Do not generate this value client-side in your application.
+const hmac = createHmac('sha256', identitySecret);
+const userHash = hmac.update(userId).digest('hex');
+
+/*
+ * Component.
+ */
+
+function App() {
+  const {frontChat, initialize, isInitialized} = useFrontChatBoot(document.body);
+
+  const [isWindowVisible, setIsWindowVisible] = useState(false);
+
+  // Example of using useFrontChat to initialize the chat widget when a component mounts.
+  useEffect(() => {
+    if (!initialize || isInitialized) {
+      return;
+    }
+
+    // When initializing for a verified user, you must provide the `userId` and `userHash` options.
+    initialize({chatId, userId, userHash});
+  }, [isInitialized, initialize, userHash]);
+
+  // NOTE: You can also start the widget with the chat window visible by providing the `shouldShowWindow`
+  // option to the 'init' command. The below effect is just an example of waiting for the chat widget to
+  // be initialized, before performing another action.
+  useEffect(() => {
+    if (!frontChat || !isInitialized || isWindowVisible) {
+      return;
+    }
+
+    frontChat('show');
+    setIsWindowVisible;
+  }, [frontChat, isInitialized, isWindowVisible]);
+
+  return <div>isInitialized: {isInitialized ? 'True' : 'False'}</div>;
+}