diff --git a/simplq/package-lock.json b/simplq/package-lock.json index 7b519297..3797d73f 100644 --- a/simplq/package-lock.json +++ b/simplq/package-lock.json @@ -25342,8 +25342,7 @@ "uuid": { "version": "8.3.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" }, "v8-compile-cache": { "version": "2.1.1", diff --git a/simplq/package.json b/simplq/package.json index 50f7afb4..23243cb2 100644 --- a/simplq/package.json +++ b/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", diff --git a/simplq/src/api/auth.js b/simplq/src/api/auth.js index fddca151..11b446ca 100644 --- a/simplq/src/api/auth.js +++ b/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;