Add | Authorization service and API integration

macarci · macarci · commit 261de46e4c29 · 2022-04-17T22:44:01.000-04:00
diff --git a/package.json b/package.json
@@ -10,15 +10,15 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
-    "axios": "^0.21.1",
+    "axios": "^0.26.1",
     "clsx": "^1.1.1",
     "human-time": "0.0.2",
     "marked": "^2.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "rxjs": "^6.6.6",
+    "rxjs": "^7.5.5",
     "web-vitals": "^1.1.1"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
@@ -5,12 +5,44 @@ import { catchError } from "rxjs/operators";
 import { of } from "rxjs";
 import './common/FlexBox.css';
 import { BrowserRouter, Switch, Route } from "react-router-dom";
-import { HOME, PLANS } from "./components/routes";
 import Layout from "./components/Layout";
 import LinearProgress from "@material-ui/core/LinearProgress";
+import AuthorizationService from "./services/AuthorizationService";
 
 function App() {
 
+    const [authorizing, setAuthorizing] = useState(true);
+    const [error, setError] = useState(false);
+
+    useEffect(() => {
+        if (authorizing) {
+
+            const params = QueryString.parse(window.location.search.slice(1, window.location.search.length));
+
+            AuthorizationService.token = params.token;
+
+            const subscription = AuthorizationService.getAccess().pipe(
+                catchError(() => {
+                    setError(true);
+                    return of(null);
+                })
+            ).subscribe(
+                access => access && setAuthorizing(false)
+            );
+
+            return () => subscription.unsubscribe();
+        }
+    }, [authorizing]);
+
+
+    if (error) {
+        return <ErrorBoundary/>
+    }
+
+    if (authorizing) {
+        return <LinearProgress className="full-width"/>;
+    }
+
     return (
         <BrowserRouter>
             <ErrorBoundary>
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,11 +1,7 @@
-import IconButton from "@material-ui/core/IconButton";
-import BackIcon from "@material-ui/icons/KeyboardBackspace";
-import React, { useEffect } from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import React, { useEffect, useState } from "react";
 import { makeStyles } from "@material-ui/core";
-import { HOME } from "./routes";
 // import Plans from "./Plans";
-import { Switch, Route } from "react-router-dom";
+import AuthorizationService from "../services/AuthorizationService";
 
 const H = 6;
 
@@ -31,11 +27,39 @@ export default function Layout() {
 
     const classes = useStyles();
 
+    const [data, setData] = useState({});
+    const [algorithms, setAlgorithms] = useState({});
+
+    useEffect(() => {
+        const subscription = AuthorizationService.get(
+            `setup/account/${AuthorizationService.getXTenantId()}`
+        ).subscribe(
+            data => setData(data)
+        );
+
+        return () => subscription.unsubscribe();
+    }, []);
+
+    useEffect(() => {
+        const subscription = AuthorizationService.get('setup/algorithm').subscribe(
+            data => setAlgorithms(data)
+        );
+
+        return () => subscription.unsubscribe();
+    }, []);
+
     return (
         <div className={classes.root}>
             <div className={classes.container}>
-                <div className="flex justify-content-center align-items-center relative">
-                    <p>Hello Word</p>
+                <div className="flex column">
+                    <strong>Tenant</strong>
+                    <pre>
+                        {JSON.stringify(data, null, 2)}
+                    </pre>
+                    <strong>Algorithms</strong>
+                    <pre>
+                        {JSON.stringify(algorithms, null, 2)}
+                    </pre>
                 </div>
             </div>
         </div>
diff --git a/src/services/AuthorizationService.js b/src/services/AuthorizationService.js
@@ -0,0 +1,125 @@
+import axios from "axios";
+import { from, fromEvent, of } from "rxjs";
+import { switchMap, filter, map, tap } from "rxjs/operators";
+
+
+const EnvironmentConfig = {
+    cenitHost: 'http://127.0.0.1:3001', // TODO Configure via environment
+    timeoutSpan: 3000,
+};
+
+export const Config = EnvironmentConfig;
+
+const apiGateway = axios.create({
+    baseURL: `${Config.cenitHost}/api/v3`,
+    timeout: Config.timeoutSpan,
+});
+
+apiGateway.interceptors.request.use(async config => {
+    const accessToken = await AuthorizationService.getAccessToken().toPromise();
+    if (!config.headers) {
+        config.headers = {};
+    }
+    config.headers.Authorization = `Bearer ${accessToken}`;
+    const xTenantId = AuthorizationService.getXTenantId();
+    if (xTenantId) {
+        config.headers['X-Tenant-Id'] = xTenantId;
+    }
+
+    return config;
+});
+
+export const AccessKey = 'access';
+
+const AuthorizationService = {
+
+    getXTenantId: function () {
+        return this.xTenantId;
+    },
+
+    setXTenantId: function (id) {
+        this.xTenantId = id;
+    },
+
+    getTenantAccess: function () {
+        let access;
+        try {
+            access = this[AccessKey];
+            let expirationDate = new Date(access.created_at + access.expires_in + Config.timeoutSpan);
+            if (expirationDate < new Date()) {
+                access = null;
+            }
+        } catch (e) {
+            access = null;
+        }
+
+        if (access) {
+            return of({ access, tenantId: this.getXTenantId() });
+        }
+
+        window.parent.postMessage({
+            cmd: 'getAccess',
+            token: this.token
+        }, '*');
+
+        return fromEvent(window, 'message').pipe(
+            map(({ data }) => data || {}),
+            filter(({ access }) => access),
+            tap(({ access, tenantId }) => {
+                this[AccessKey] = access;
+                this.setXTenantId(tenantId);
+            }),
+        )
+    },
+
+    getAccess: function () {
+        return this.getTenantAccess().pipe(
+            map(({ access }) => access)
+        );
+    },
+
+    getAccessToken: function () {
+        return this.getAccess().pipe(
+            map(access => (access && access.access_token) || null)
+        );
+    },
+
+    get: function (path) {
+        return from(apiGateway.get(path)).pipe(
+            map(response => response.data)
+        );
+    },
+
+    post: function (path, data = null) {
+        return from(apiGateway.post(path, data)).pipe(
+            map(response => response.data)
+        );
+    },
+
+    delete: function (path, data = null) {
+        return from(apiGateway.delete(path, { data })).pipe(
+            map(response => response.data)
+        );
+    },
+
+    request: function (opts) {
+        if (opts.path) {
+            opts = { ...opts, url: `${Config.cenitHost}${opts.path}` }
+        }
+        return this.getAccess().pipe(
+            switchMap(
+                access => {
+                    const headers = { ...opts.headers };
+                    headers.Authorization = `Bearer ${access.access_token}`;
+                    opts = { ...opts, headers };
+                    return from(axios(opts));
+                }
+            ),
+            map(
+                response => response.data
+            )
+        );
+    }
+};
+
+export default AuthorizationService;
diff --git a/yarn.lock b/yarn.lock
@@ -2625,12 +2625,12 @@ axe-core@^4.3.5:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
   integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
 
-axios@^0.21.1:
-  version "0.21.4"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
-  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
+axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
   dependencies:
-    follow-redirects "^1.14.0"
+    follow-redirects "^1.14.8"
 
 axobject-query@^2.2.0:
   version "2.2.0"
@@ -5162,7 +5162,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.8:
   version "1.14.9"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
@@ -9829,12 +9829,12 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rxjs@^6.6.6:
-  version "6.6.7"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
-  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+rxjs@^7.5.5:
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.5.tgz#2ebad89af0f560f460ad5cc4213219e1f7dd4e9f"
+  integrity sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==
   dependencies:
-    tslib "^1.9.0"
+    tslib "^2.1.0"
 
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
@@ -10884,12 +10884,12 @@ tsconfig-paths@^3.12.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3:
+tslib@^2.0.3, tslib@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
