Added authorization to http requests

Liam-Driscoll · Sep 20, 2022 · db6d516 · db6d516
1 parent 04dbcb2
commit db6d516
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 19 deletions.
diff --git a/src/App.js b/src/App.js
@@ -16,16 +16,19 @@ Amplify.configure(awsExports);
 function App(props) {
   const client = props.client;
   const [patient, setPatient] = useState('');
+  const [accessToken, setAccessToken] = useState('');
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    getPatient();
+    getData();
   }, []);
 
-  async function getPatient() {
+  async function getData() {
     let pat = await client.patient.read();
     setPatient(pat);
     setLoading(false);
+    let token = client.state.tokenResponse.access_token
+    setAccessToken(token)
   }
 
   if (loading) {
@@ -36,8 +39,8 @@ function App(props) {
     <>
       <Navbar />
       <Routes>
-        <Route path="/" element={<Form param={patient} />} />
-        <Route path="/upload" element={<Upload />} />
+        <Route path="/" element={<Form param={[patient, accessToken]} />} />
+        <Route path="/upload" element={<Upload param={accessToken}/>} />
         <Route path='/admin' element={<Admin />} />
       </Routes>
     </>

diff --git a/src/Pages/form.js b/src/Pages/form.js
@@ -7,7 +7,8 @@ import { Auth, API, graphqlOperation } from 'aws-amplify';
 import { listForms, getFormByName } from '../graphql/queries';
 
 function Form(props) {
-  const patientID = props.param.id;
+  const patientID = props.param[0].id;
+  const token = props.param[1]
   const [formLoaded, setFormLoaded] = useState(false);
   const [availableForms, setAvailableForms] = useState([]);
   const [selectedForm, setSelectedForm] = useState('');
@@ -42,17 +43,25 @@ function Form(props) {
   }
 
   async function patientData() {
-    let name = '<b>Patient Name:</b> &nbsp' + props.param.name[0].given + ' ' + props.param.name[0].family;
+    let name = '<b>Patient Name:</b> &nbsp' + props.param[0].name[0].given + ' ' + props.param[0].name[0].family;
     let id = '<b>Patient ID:</b> &nbsp' + patientID;
     document.getElementById('patientDataContainer').innerHTML = name + ', &nbsp' + id;
   }
 
   async function loadResponse() {
     let formID = await getFormID();
     let endpoint = baseEndpoint + formID; 
-    axios.get(endpoint).then(async (resp) => {
+    axios({
+      method: 'get',
+      headers: {'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`},
+      url: endpoint,
+    }).then(async (resp) => {
       let endpoint = await httpRequest('get');
-      axios.get(endpoint).then((response) => {
+      axios({
+        method: 'get',
+        headers: {'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`},
+        url: endpoint,
+      }).then((response) => {
         let lhcForm = window.LForms.Util.convertFHIRQuestionnaireToLForms(resp.data, 'R4');
         let formWithUserData = window.LForms.Util.mergeFHIRDataIntoLForms("QuestionnaireResponse", response.data.entry[0].resource, lhcForm, "R4");          
         window.LForms.Util.addFormToPage(formWithUserData, 'formContainer');
@@ -69,7 +78,11 @@ function Form(props) {
   async function sendToHealthlake() { 
     let endpoint = await httpRequest('get');
 
-    axios.get(endpoint).then((resp) => {
+    axios({
+      method: 'get',
+      headers: {'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`},
+      url: endpoint,
+    }).then((resp) => {
       if (resp.data.entry === undefined) {
         storeResponse();
       } else {
@@ -83,7 +96,12 @@ function Form(props) {
   async function updateResponse(resourceID) {
     let request = await httpRequest('put', resourceID);
 
-    axios(request).then((response) => {
+    axios({
+      method: 'put',
+      headers: request.headers,
+      url: request.url,
+      data: request.data
+    }).then((response) => {
       window.scrollTo({top: 0});
       if (response.status === 200) {
         setAlertContent('Answers updated');
@@ -95,7 +113,12 @@ function Form(props) {
   async function storeResponse() {
     let request = await httpRequest('post');
 
-    axios(request).then((response) => {
+    axios({
+      method: 'post',
+      headers: request.headers,
+      url: request.url,
+      data: request.data
+    }).then((response) => {
       window.scrollTo({top: 0});
       if (response.status === 201) {
         setAlertContent('Answers submitted');
@@ -117,7 +140,7 @@ function Form(props) {
 
       const request = {
         method: 'post',
-        headers: {'Content-Type': 'application/json'},
+        headers: {'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`},
         url: qrEndpoint,
         data: JSON.stringify(fhirQR)
       };
@@ -128,7 +151,7 @@ function Form(props) {
       fhirQR.id = responseID;
       const request = {
         method: 'put',
-        headers: {'Content-Type': 'application/json'},
+        headers: {'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`},
         url: endpoint,
         data: JSON.stringify(fhirQR)
       };

diff --git a/src/Pages/upload.js b/src/Pages/upload.js
@@ -1,12 +1,13 @@
 import { useState, useEffect } from 'react';
-import { Collapse, Alert, Button, Box, Stack, TextField, Tabs, Tab, FormControl, InputLabel, Select, MenuItem} from "@mui/material";
+import { Collapse, Alert, Button, Box, Stack, TextField, Tabs, Tab, FormControl, InputLabel, Select, MenuItem } from "@mui/material";
 import { UploadFile } from "@mui/icons-material";
 import { API, graphqlOperation } from 'aws-amplify';
 import axios from 'axios';
 import { createForm } from '../graphql/mutations';
 import { listForms, getFormByName } from '../graphql/queries';
 
-export default function Upload() {
+export default function Upload(props) {
+  const token = props.param
   const [formTitle, setFormTitle] = useState('');
   const [formUser, setFormUser] = useState('');
   const [fieldError, setFieldError] = useState(false);
@@ -52,6 +53,7 @@ export default function Upload() {
 
   async function handleFormUpload(e) {
     e.preventDefault();
+
     let uploadedFile = document.getElementById('uploadFile');
     if (formTitle === '') {
       setFieldError(true);
@@ -66,7 +68,7 @@ export default function Upload() {
       try {
         axios({
           method: 'post',
-          headers: {'Content-Type': 'application/json'},
+          headers: {'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`},
           url: endpoint,
           data: uploadFile
         }).then(async (response) => {
@@ -109,11 +111,10 @@ export default function Upload() {
 
         axios({
           method: 'post',
-          headers: {'Content-Type': 'application/json'},
+          headers: {'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`},
           url: endpoint,
           data: updateFile
         }).then(async (response) => {
-          console.log(response);
           const formData = {
             input: {
               name: formName,

diff --git a/src/index.js b/src/index.js
@@ -11,7 +11,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 const smartFhirLaunch = () => {
   FHIR.oauth2.init({
     clientId: 'b1c89b87-db4f-440a-8e5e-2e3dd8e43992',
-    scope: 'launch launch/patient patient/Patient.read openid profile online_access'
+    scope: 'launch patient/Patient.read patient/Questionnaire.read patient/Questionnaire.write patient/QuestionnaireResponse.read patient/QuestionnaireResponse.write openid profile online_access'
   })
   .then(client => {
     root.render(