Client authentication

client/config/webpack.dev.js

@@ -6,6 +6,10 @@ const common = require('./webpack.common');
 const BundleAnalyzerPlugin =
     require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
+const SCOPE_SERVER_URL = process.env.SCOPE_SERVER_URL
+    ? process.env.SCOPE_SERVER_URL
+    : 'http://localhost:8000';
+
 module.exports = merge(common, {
     mode: 'development',
 
@@ -45,7 +49,8 @@ module.exports = merge(common, {
                 client_id: 'APP-1QNL921F7P9FC3S4',
                 redirect_uri: 'http://127.0.0.1:55850/',
             }),
-            API_PREFIX: JSON.stringify('http://localhost:8000/api/v1/'),
+            SERVER_URL: JSON.stringify(SCOPE_SERVER_URL),
+            API_PREFIX: JSON.stringify('/api/v1/'),
             LOGIN_REDIRECT: JSON.stringify('/oidc_redirect'),
             LOGOUT_REDIRECT: JSON.stringify('/'),
             __TEST_ONLY__: false,

client/config/webpack.prod.js

@@ -5,6 +5,10 @@ const common = require('./webpack.common');
 
 const TerserPlugin = require('terser-webpack-plugin');
 
+const SCOPE_SERVER_URL = process.env.SCOPE_SERVER_URL
+    ? process.env.SCOPE_SERVER_URL
+    : 'https://scope.aertslab.org';
+
 module.exports = merge(common, {
     mode: 'production',
     devtool: false,
@@ -24,10 +28,6 @@ module.exports = merge(common, {
         new webpack.DefinePlugin({
             DEBUG: true,
             REVERSEPROXYON: true,
-            BITLY: JSON.stringify({
-                baseURL: 'http://scope.aertslab.org',
-                token: '8422dd882b60604d327939997448dd1b5c61f54e',
-            }),
             BACKEND: JSON.stringify({
                 httpProtocol: 'https',
                 wsProtocol: 'wss',
@@ -41,11 +41,8 @@ module.exports = merge(common, {
                 wsProtocol: 'wss',
                 host: 'scope.aertslab.org',
             }),
-            ORCID: JSON.stringify({
-                client_id: 'APP-1QNL921F7P9FC3S4',
-                redirect_uri: 'https://scope.aertslab.org/',
-            }),
-            API_PREFIX: JSON.stringify('https://scope.aertslab.org/api/v1/'),
+            SERVER_URL: JSON.stringify(SCOPE_SERVER_URL),
+            API_PREFIX: JSON.stringify('/api/v1/'),
             LOGIN_REDIRECT: JSON.stringify('/oidc_redirect'),
             LOGOUT_REDIRECT: JSON.stringify('/'),
             __TEST_ONLY__: false,

client/package.json

@@ -152,10 +152,7 @@
             "ecmaVersion": 2018,
             "sourceType": "module"
         },
-        "plugins": [
-            "react",
-            "@typescript-eslint"
-        ],
+        "plugins": ["react", "@typescript-eslint"],
         "rules": {
             "prettier/prettier": "error",
             "no-unused-vars": [
@@ -173,17 +170,9 @@
             "no-var": "warn",
             "react/prop-types": "off",
             "react/jsx-key": "off",
-            "eqeqeq": [
-                "error",
-                "always"
-            ],
-            "curly": [
-                "error",
-                "all"
-            ],
-            "no-bitwise": [
-                "error"
-            ]
+            "eqeqeq": ["error", "always"],
+            "curly": ["error", "all"],
+            "no-bitwise": ["error"]
         },
         "settings": {
             "react": {
@@ -199,7 +188,8 @@
         },
         "globals": {
             "__TEST_ONLY__": true,
-            "API_PREFIX": "http://localhost:8000/api/v1/"
+            "SERVER_URL": "http://localhost:8000",
+            "API_PREFIX": "/api/v1/"
         },
         "coverageThreshold": {
             "global": {

client/src/api/api.ts

@@ -0,0 +1,4 @@
+declare const SERVER_URL: string;
+declare const API_PREFIX: string;
+
+export const API_URL: string = SERVER_URL + API_PREFIX;

client/src/api/auth.ts

@@ -1,10 +1,9 @@
 import * as R from 'ramda';
 
-declare const API_PREFIX: string;
-
 import { Result, error, success, map, of } from '../result';
 import { Project, DataSet, decodeProjects } from './project';
 import { handleError } from './err';
+import { API_URL } from './api';
 
 const USER_ROLES = ['guest', 'user', 'admin'] as const;
 export type UserRole = typeof USER_ROLES[number];
@@ -123,7 +122,7 @@ export async function requestAuthToken(
     req: AuthTokenRequest
 ): Promise<Result<AuthTokenResponse, string>> {
     try {
-        const response = await fetch(API_PREFIX + 'auth/authorize', {
+        const response = await fetch(API_URL + 'auth/authorize', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -144,7 +143,7 @@ export async function requestGuestToken(): Promise<
     Result<AuthTokenResponse, string>
 > {
     try {
-        const response = await fetch(API_PREFIX + 'user/new', {
+        const response = await fetch(API_URL + 'user/new', {
             method: 'POST',
         });
         if (!response.ok) {
@@ -209,7 +208,7 @@ export async function requestAuthProviders(): Promise<
     Result<Array<Provider>, string>
 > {
     try {
-        const response = await fetch(API_PREFIX + 'auth/loginurl');
+        const response = await fetch(API_URL + 'auth/loginurl');
         if (!response.ok) {
             return error(response.statusText);
         }

client/src/api/err.ts

@@ -1,11 +1,19 @@
 import { Result, error } from '../result';
 
 export const handleError = <T>(
-    prefix: string,
+    prefix: string | undefined,
     err: unknown
 ): Result<T, string> => {
+    const message = (msg: string): string => {
+        if (prefix) {
+            return `${prefix} ${msg}`;
+        } else {
+            return msg;
+        }
+    };
+
     if (err === undefined) {
-        return error(prefix + ' undefined');
+        return error(message('undefined'));
     }
 
     if (
@@ -15,8 +23,8 @@ export const handleError = <T>(
         typeof (err as { statusText: unknown }).statusText === 'string'
     ) {
         const msg = (err as { statusText: string }).statusText;
-        return error(`${prefix} ${msg}`);
+        return error(message(msg));
     }
 
-    return error(`${prefix} ${JSON.stringify(err)}`);
+    return error(message(JSON.stringify(err)));
 };

client/src/api/fetch.ts

@@ -1,4 +1,5 @@
 import { Result, error, success } from '../result';
+import { handleError } from './err';
 
 export async function fetchJson<T>(url: string): Promise<Result<T, string>> {
     try {
@@ -9,15 +10,6 @@ export async function fetchJson<T>(url: string): Promise<Result<T, string>> {
         const data: T = await response.json();
         return success(data);
     } catch (err: unknown) {
-        if (typeof err === 'object') {
-            if (
-                err !== null &&
-                'statusText' in err &&
-                typeof (err as { statusText: unknown }).statusText === 'string'
-            ) {
-                return error((err as { statusText: string }).statusText);
-            }
-        }
-        return error(`Unknown error: ${JSON.stringify(err)}`);
+        return handleError('', err);
     }
 }

client/src/api/legacy.ts

@@ -1,6 +1,5 @@
-declare const API_PREFIX: string;
-
 import { Result, error, success } from '../result';
+import { API_URL } from './api';
 
 export type LegacySession = {
     uuid: string;
@@ -30,7 +29,7 @@ export async function requestDecodePermalink(
     sessiondata: string
 ): Promise<Result<LegacySession, string>> {
     try {
-        const response = await fetch(API_PREFIX + 'legacy/permalink', {
+        const response = await fetch(API_URL + 'legacy/permalink', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',

client/src/api/project.ts

@@ -1,8 +1,7 @@
 import * as R from 'ramda';
 
-declare const API_PREFIX: string;
-
 import { Result, of, success, error } from '../result';
+import { API_URL } from './api';
 
 export type DataSet = {
     id: number;
@@ -143,7 +142,7 @@ export async function myProjects(
     token: string
 ): Promise<Result<[Array<Project>, Array<DataSet>], string>> {
     try {
-        const response = await fetch(API_PREFIX + 'user/', {
+        const response = await fetch(API_URL + 'user/', {
             headers: {
                 Accept: 'application/json',
                 Authorization: `Bearer ${token}`,
@@ -166,7 +165,7 @@ export async function makeProject(
     name: string
 ): Promise<Result<Project, string>> {
     try {
-        const url = new URL(API_PREFIX + 'project/new');
+        const url = new URL(API_URL + 'project/new');
         url.search = new URLSearchParams({ name }).toString();
         const response = await fetch(url.toString(), {
             method: 'POST',

client/src/components/AppHeader.tsx

@@ -11,17 +11,6 @@ export const AppHeader: React.FC<{}> = () => {
     const { pathname } = useLocation();
     const loom = '*';
 
-    // TODO: Hacky implementation. To be refactored/reviewed properly
-    const countAnnotations = (metadata) => {
-        let count = 0;
-        for (const clustering of metadata['cellMetaData']['clusterings']) {
-            for (const cluster of clustering['clusters']) {
-                count += cluster['cell_type_annotation'].length;
-            }
-        }
-        return count;
-    };
-
     const metadata =
         loom !== undefined ? LegacyAPI.getLoomMetadata(loom) : null;
 
@@ -46,7 +35,7 @@ export const AppHeader: React.FC<{}> = () => {
             icon: false,
         },
         {
-            display: metadata && countAnnotations(metadata) > 0 ? true : false,
+            display: metadata ? true : false,
             path: '/annotations',
             title: 'All Annotations',
             icon: false,

client/src/redux/sagas/scope/index.ts

@@ -10,6 +10,7 @@ import * as A from '../../actions';
 
 import * as AuthSelectors from '../../../components/Auth/selectors';
 
+declare const SERVER_URL: string;
 declare const API_PREFIX: string;
 
 export function* createNewProject(action: T.NewProjectAction) {
@@ -75,7 +76,7 @@ export function* uploadFile(endpoint: string, project: string, file: File) {
 }
 
 export function* uploadRequest(action: T.UploadRequest) {
-    const url = new URL(API_PREFIX + 'project/dataset');
+    const url = new URL(SERVER_URL + API_PREFIX + 'project/dataset');
     url.search = new URLSearchParams({
         name: action.payload.name,
         project: action.payload.project,