From 5270f3a3ec6dae69715b16492211d6f3a1245eaa Mon Sep 17 00:00:00 2001 From: Alex Shorsher Date: Tue, 29 Jun 2021 10:31:08 -0400 Subject: [PATCH] add credentials to fetch requests Signed-off-by: Alex Shorsher --- package.json | 2 +- src/App.tsx | 6 ++++- src/utils.ts | 22 +++++++++++++++++++ src/views/Dashboard.tsx | 9 ++++---- src/views/Data/Data.tsx | 3 ++- src/views/Messages/MessageDetails.tsx | 5 +++-- src/views/Messages/Messages.tsx | 3 ++- src/views/Transactions/TransactionDetails.tsx | 5 ++++- src/views/Transactions/Transactions.tsx | 3 ++- 9 files changed, 46 insertions(+), 12 deletions(-) create mode 100644 src/utils.ts diff --git a/package.json b/package.json index 417f6258..51bcaef2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "firefly-ui", - "version": "0.1.1", + "version": "0.1.2", "private": true, "dependencies": { "@material-ui/core": "^4.11.4", diff --git a/src/App.tsx b/src/App.tsx index c73ea2f3..be5f777a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -38,6 +38,7 @@ import { IStatus, } from './interfaces'; import ReconnectingWebsocket from 'reconnecting-websocket'; +import { fetchWithCredentials } from './utils'; const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'; const history = createBrowserHistory({ @@ -118,7 +119,10 @@ function App(): JSX.Element { const [lastEvent, setLastEvent] = useState(); useEffect(() => { - Promise.all([fetch('/api/v1/namespaces'), fetch('/api/v1/status')]) + Promise.all([ + fetchWithCredentials('/api/v1/namespaces'), + fetchWithCredentials('/api/v1/status'), + ]) .then(async ([namespaceResponse, statusResponse]) => { if (namespaceResponse.ok && statusResponse.ok) { const status: IStatus = await statusResponse.json(); diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 00000000..db4ac392 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,22 @@ +// Copyright © 2021 Kaleido, Inc. +// +// SPDX-License-Identifier: Apache-2.0 +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +export const fetchWithCredentials = ( + resource: string, + options?: RequestInit +): Promise => { + return fetch(resource, { ...options, credentials: 'include' }); +}; diff --git a/src/views/Dashboard.tsx b/src/views/Dashboard.tsx index 145cd4dd..5698d472 100644 --- a/src/views/Dashboard.tsx +++ b/src/views/Dashboard.tsx @@ -37,6 +37,7 @@ import { NamespaceContext } from '../contexts/NamespaceContext'; import { ApplicationContext } from '../contexts/ApplicationContext'; import { RecentTransactions } from '../components/RecentTransactions/RecentTransactions'; import { FilterSelect } from '../components/FilterSelect'; +import { fetchWithCredentials } from '../utils'; export const Dashboard: React.FC = () => { const classes = useStyles(); @@ -76,14 +77,14 @@ export const Dashboard: React.FC = () => { } Promise.all([ - fetch(`/api/v1/network/organizations?limit=100`), - fetch( + fetchWithCredentials(`/api/v1/network/organizations?limit=100`), + fetchWithCredentials( `/api/v1/namespaces/${selectedNamespace}/data?limit=200${createdFilterString}` ), - fetch( + fetchWithCredentials( `/api/v1/namespaces/${selectedNamespace}/messages?limit=200${createdFilterString}` ), - fetch( + fetchWithCredentials( `/api/v1/namespaces/${selectedNamespace}/transactions?limit=200&created=>=${dayjs() .subtract(24, 'hours') .unix()}${createdFilterString}` diff --git a/src/views/Data/Data.tsx b/src/views/Data/Data.tsx index f4df4569..95c677ad 100644 --- a/src/views/Data/Data.tsx +++ b/src/views/Data/Data.tsx @@ -32,6 +32,7 @@ import { NamespaceContext } from '../../contexts/NamespaceContext'; import { ApplicationContext } from '../../contexts/ApplicationContext'; import { FilterSelect } from '../../components/FilterSelect'; import { DataDetails } from './DataDetails'; +import { fetchWithCredentials } from '../../utils'; const PAGE_LIMITS = [10, 25]; @@ -106,7 +107,7 @@ export const Data: React.FC = () => { createdFilterString = `&created=>=${dayjs().subtract(7, 'days').unix()}`; } - fetch( + fetchWithCredentials( `/api/v1/namespaces/${selectedNamespace}/data?limit=${rowsPerPage}&skip=${ rowsPerPage * currentPage }${createdFilterString}` diff --git a/src/views/Messages/MessageDetails.tsx b/src/views/Messages/MessageDetails.tsx index 48114d82..81f16fde 100644 --- a/src/views/Messages/MessageDetails.tsx +++ b/src/views/Messages/MessageDetails.tsx @@ -35,6 +35,7 @@ import clsx from 'clsx'; import { NamespaceContext } from '../../contexts/NamespaceContext'; import { useHistory } from 'react-router-dom'; import Highlight from 'react-highlight'; +import { fetchWithCredentials } from '../../utils'; interface Props { message: IMessage; @@ -65,10 +66,10 @@ export const MessageDetails: React.FC = ({ message, open, onClose }) => { useEffect(() => { setLoading(true); Promise.all([ - fetch( + fetchWithCredentials( `/api/v1/namespaces/${selectedNamespace}/batches/${message.batchID}` ), - fetch( + fetchWithCredentials( `/api/v1/namespaces/${selectedNamespace}/messages/${message.header.id}?data` ), ]) diff --git a/src/views/Messages/Messages.tsx b/src/views/Messages/Messages.tsx index 1aea1a3c..891037b8 100644 --- a/src/views/Messages/Messages.tsx +++ b/src/views/Messages/Messages.tsx @@ -41,6 +41,7 @@ import { ApplicationContext } from '../../contexts/ApplicationContext'; import { DataViewSwitch } from '../../components/DataViewSwitch'; import { useHistory } from 'react-router-dom'; import { FilterSelect } from '../../components/FilterSelect'; +import { fetchWithCredentials } from '../../utils'; const PAGE_LIMITS = [10, 25]; @@ -84,7 +85,7 @@ export const Messages: React.FC = () => { createdFilterString = `&created=>=${dayjs().subtract(7, 'days').unix()}`; } - fetch( + fetchWithCredentials( `/api/v1/namespaces/${selectedNamespace}/messages?limit=${rowsPerPage}&skip=${ rowsPerPage * currentPage }${createdFilterString}` diff --git a/src/views/Transactions/TransactionDetails.tsx b/src/views/Transactions/TransactionDetails.tsx index be069106..05ade10c 100644 --- a/src/views/Transactions/TransactionDetails.tsx +++ b/src/views/Transactions/TransactionDetails.tsx @@ -32,6 +32,7 @@ import { CardContent, makeStyles, } from '@material-ui/core'; +import { fetchWithCredentials } from '../../utils'; export const TransactionDetails: React.FC = () => { const history = useHistory(); @@ -55,7 +56,9 @@ export const TransactionDetails: React.FC = () => { useEffect(() => { setLoading(true); - fetch(`/api/v1/namespaces/${selectedNamespace}/transactions/${id}`) + fetchWithCredentials( + `/api/v1/namespaces/${selectedNamespace}/transactions/${id}` + ) .then(async (response) => { if (response.ok) { setTransaction(await response.json()); diff --git a/src/views/Transactions/Transactions.tsx b/src/views/Transactions/Transactions.tsx index e706bfcd..71908b75 100644 --- a/src/views/Transactions/Transactions.tsx +++ b/src/views/Transactions/Transactions.tsx @@ -39,6 +39,7 @@ import { ApplicationContext } from '../../contexts/ApplicationContext'; import { DataTimeline } from '../../components/DataTimeline/DataTimeline'; import { DataViewSwitch } from '../../components/DataViewSwitch'; import { FilterSelect } from '../../components/FilterSelect'; +import { fetchWithCredentials } from '../../utils'; const PAGE_LIMITS = [10, 25]; @@ -114,7 +115,7 @@ export const Transactions: React.FC = () => { createdFilterString = `&created=>=${dayjs().subtract(7, 'days').unix()}`; } - fetch( + fetchWithCredentials( `/api/v1/namespaces/${selectedNamespace}/transactions?limit=${rowsPerPage}&skip=${ rowsPerPage * currentPage }${createdFilterString}`