user, both of which come from the AuthProvidor (see below). For convenience, this saga is triggered every time the Header is loaded (which is on every page):
userEffectis a React lifecycle hook for functional components. It gets triggered when the component is loaded, as well as any time the values of
props.userIDcomes from a cookie. For that code, see
front-end/src/utils/session.js. The purpose of the cookie is to enable the userID to persist across browser refreshes (browser refresh re-initializes the Redux store.) Maximum life of the cookie is 2 days. (We aren’t in the business of tracking people without opt-in consent.)
isAuthenticatedwill always be
false. (See the variable definitions in the Header component.)
getSessionUser()) is handled by a Redux Saga (see
front-end/src/utils/react-auth0-spa.js. This code provides a component that wraps the entire application in
user. By default, the value of
useris the username from whatever social media application (etc.) the user used to authenticate. This is often the user’s actual name, which we don’t want. So the auth0 quickstart code was modified to retrieve the auth0 numerical ID instead, which is presumably (??) unique to your application. We then immediately run this through a salted hash.
utils/react-auth0-spa.js. First, we define a helper function:
userIDis set to
userIDvia the cookie method.
userIDis automatically available to any component that is connected to the Redux store. This unfortunately does not include the quizzes themselves. Instead, the TakeQuiz component passes the entire Redux store as a prop:
onFinishfunction. This is because this function takes a single argument, which is trial data. Here is an example:
user_idto be passed as part of the data. The easiest way to make this happen is to use jsPsych’s handy data.addProperties method. Here is a code snippet from one of the template experiments: