Add anonymous UUID to unauthinticated API Calls

simplq/package.json

@@ -35,7 +35,8 @@
     "react-spinners": "^0.9.0",
     "react-to-print": "^2.12.2",
     "reactour": "^1.18.0",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.2.1",
+    "uuid": "^8.3.2"
   },
   "scripts": {
     "start": "npm run config && react-scripts start",

simplq/src/api/auth.js

@@ -1,11 +1,33 @@
 import { useAuth0 } from '@auth0/auth0-react';
-
+import { v4 as uuidv4 } from 'uuid';
 import axios from 'axios';
 
 // config.js is generated at runtime, so disabling eslint warning
 /* eslint-disable  import/no-unresolved, import/extensions */
 import { baseURL } from '../config';
 
+const ANONYMOUS_DEVICE_ID_KEY = 'anonymous-device-id';
+
+/**
+ * Gets the authorization header value to be used to make the request.
+ *
+ * @param {Object} auth object returned by useAuth() from @auth0/auth0-react.
+ */
+const getAuthHeaderValue = async (auth) => {
+  // If user is logged in, get the token from the login provider.
+  if (auth.isAuthenticated) {
+    return `Bearer ${await auth.getAccessTokenSilently({ audience: baseURL })}`;
+  }
+
+  // Generate and store a unique identifier for the device and also persist
+  // it to local storage for later use.
+  if (localStorage.getItem(ANONYMOUS_DEVICE_ID_KEY) === null) {
+    localStorage.setItem(ANONYMOUS_DEVICE_ID_KEY, `anonymous-${uuidv4()}`);
+  }
+
+  return Promise.resolve(`Anonymous ${localStorage.getItem(ANONYMOUS_DEVICE_ID_KEY)}`);
+};
+
 /**
  * A hook to access the makeAuthedRequest function.
  *
@@ -21,17 +43,13 @@ const useMakeAuthedRequest = () => {
    * @returns {Object} request response data as a Promise.
    */
   const makeAuthedRequest = async (request) => {
-    const accessToken = auth.isAuthenticated
-      ? await auth.getAccessTokenSilently({ audience: baseURL })
-      : 'anonymous';
-
     const authedRequest = axios({
       baseURL,
       ...request,
       headers: {
         ...request.headers,
         // Add the Authorization header to the existing headers
-        Authorization: `Bearer ${accessToken}`,
+        Authorization: await getAuthHeaderValue(auth),
       },
     });
     const response = await authedRequest;
@@ -53,16 +71,13 @@ const useMakeAuthedRequest = () => {
  * @param {Object} request object created by requestFactory.
  */
 const makeAuthedRequest = async (auth, request) => {
-  const accessToken = auth.isAuthenticated
-    ? await auth.getAccessTokenSilently({ audience: baseURL })
-    : 'anonymous';
   return axios({
     baseURL,
     ...request,
     headers: {
       ...request.headers,
       // Add the Authorization header to the existing headers
-      Authorization: `Bearer ${accessToken}`,
+      Authorization: await getAuthHeaderValue(auth),
     },
   }).then((response) => {
     return response.data;