diff --git a/Makefile b/Makefile
index 86e4539b9262a270f9edc969e2bcf2db1d02f529..61d0a8ef3b9ed6299a73f2f6c0f75f3c99bc3786 100644
--- a/Makefile
+++ b/Makefile
@@ -10,10 +10,11 @@
# @docker push harbor.graphpolaris.com/graphpolaris/frontend\:latest
-docker:
+build:
@docker build -t harbor.graphpolaris.com/graphpolaris/frontend:latest .
-dockerrun:
+run:
@docker run --publish 4200:4200 harbor.graphpolaris.com/graphpolaris/frontend:latest
+brun: build run
push:
@pnpm lint
diff --git a/libs/shared/lib/data-access/api/database.ts b/libs/shared/lib/data-access/api/database.ts
index 02f645993dab45f96d8ff33e34844a74fd58928a..371a823426f76889c4d8c2405df244e34ddf7f8c 100644
--- a/libs/shared/lib/data-access/api/database.ts
+++ b/libs/shared/lib/data-access/api/database.ts
@@ -1,5 +1,6 @@
// All database related API calls
+import { fetchSettings } from '../authorization';
import { useAppDispatch, useAuthorizationCache, useSessionCache } from '../store';
import { updateCurrentDatabase, updateDatabaseList } from '../store/sessionSlice';
@@ -36,7 +37,6 @@ export type DeleteDatabasesOptions = {
};
export const useDatabaseAPI = () => {
- const { accessToken } = useAuthorizationCache();
const cache = useSessionCache();
const dispatch = useAppDispatch();
const domain = import.meta.env.BACKEND_URL;
@@ -46,11 +46,8 @@ export const useDatabaseAPI = () => {
const { setAsCurrent = true, updateDatabaseCache = false } = options;
return new Promise((resolve, reject) => {
fetch(`${domain}${useruri}/database`, {
+ ...fetchSettings,
method: 'POST',
- credentials: 'same-origin',
- headers: new Headers({
- Authorization: 'Bearer ' + accessToken,
- }),
body: JSON.stringify(request),
})
.then((response: Response) => {
@@ -71,13 +68,7 @@ export const useDatabaseAPI = () => {
function GetAllDatabases(options: GetDatabasesOptions = {}): Promise<Array<string>> {
const { updateSessionCache: updateDatabaseCache = true } = options;
return new Promise((resolve, reject) => {
- fetch(`${domain}${useruri}/database`, {
- method: 'GET',
- credentials: 'same-origin',
- headers: new Headers({
- Authorization: 'Bearer ' + accessToken,
- }),
- })
+ fetch(`${domain}${useruri}/database`, fetchSettings)
.then((response: Response) => {
if (!response.ok) {
new Promise((resolve, reject) => {
@@ -100,11 +91,8 @@ export const useDatabaseAPI = () => {
const { updateSessionCache: updateDatabaseCache = true } = options;
return new Promise((resolve, reject) => {
fetch(`${domain}${useruri}/database/` + name, {
+ ...fetchSettings,
method: 'DELETE',
- credentials: 'same-origin',
- headers: new Headers({
- Authorization: 'Bearer ' + accessToken,
- }),
})
.then((response: Response) => {
if (!response.ok) {
@@ -122,11 +110,8 @@ export const useDatabaseAPI = () => {
function TestDatabaseConnection(request: AddDatabaseRequest): Promise<void> {
return new Promise((resolve, reject) => {
fetch(`${domain}${useruri}/database/test-connection`, {
+ ...fetchSettings,
method: 'POST',
- credentials: 'same-origin',
- headers: new Headers({
- Authorization: 'Bearer ' + accessToken,
- }),
body: JSON.stringify(request),
})
.then((response: Response) => {
diff --git a/libs/shared/lib/data-access/api/query.ts b/libs/shared/lib/data-access/api/query.ts
index 46924225011eee2c65713ee9f0db4912f0bf3f11..b7c146074d0154b243dd6624a5c2e2f62434b603 100644
--- a/libs/shared/lib/data-access/api/query.ts
+++ b/libs/shared/lib/data-access/api/query.ts
@@ -1,21 +1,17 @@
// All database related API calls
import { BackendQueryFormat } from '../../querybuilder/model/BackendQueryFormat';
+import { fetchSettings } from '../authorization';
import { useAuthorizationCache, useSessionCache } from '../store';
export const useQueryAPI = () => {
- const cache = useSessionCache();
- const { accessToken } = useAuthorizationCache();
const domain = import.meta.env.BACKEND_URL;
const query_url = import.meta.env.BACKEND_QUERY;
async function execute(query: BackendQueryFormat) {
const response = await fetch(`${domain}${query_url}/execute`, {
+ ...fetchSettings,
method: 'POST',
- credentials: 'same-origin',
- headers: new Headers({
- Authorization: 'Bearer ' + accessToken,
- }),
body: JSON.stringify(query),
});
@@ -31,12 +27,8 @@ export const useQueryAPI = () => {
async function retrieveCachedQuery(queryID: string) {
// TODO: check if this method is needed!
// const response = await fetch(`${domain}/query/retrieve-cached/`, {
+ // ...fetchSettings,
// method: 'POST',
- // credentials: 'same-origin',
- // headers: new Headers({
- // Authorization:
- // 'Bearer ' + accessToken,
- // }),
// body: JSON.stringify({ queryID })
// });
// if (!response?.ok) {
diff --git a/libs/shared/lib/data-access/api/schema.ts b/libs/shared/lib/data-access/api/schema.ts
index ade1f95643cb89a6bb706376b1ad6ae5adf9c211..df83d5d0530385709f47a1c049c70dde35a69eed 100644
--- a/libs/shared/lib/data-access/api/schema.ts
+++ b/libs/shared/lib/data-access/api/schema.ts
@@ -1,10 +1,10 @@
// All database related API calls
+import { fetchSettings } from '../authorization';
import { useAuthorizationCache, useSessionCache } from '../store';
export const useSchemaAPI = () => {
const cache = useSessionCache();
- const { accessToken } = useAuthorizationCache();
const domain = import.meta.env.BACKEND_URL;
const schema = import.meta.env.BACKEND_SCHEMA;
@@ -21,11 +21,8 @@ export const useSchemaAPI = () => {
};
const response = await fetch(`${domain}${schema}`, {
+ ...fetchSettings,
method: 'POST',
- credentials: 'same-origin',
- headers: new Headers({
- Authorization: 'Bearer ' + accessToken,
- }),
body: JSON.stringify(request),
});
diff --git a/libs/shared/lib/data-access/authorization/useAuth.jsx b/libs/shared/lib/data-access/authorization/useAuth.jsx
deleted file mode 100644
index d7f8c70494bc254f5081cc24911373b3d5ec1ead..0000000000000000000000000000000000000000
--- a/libs/shared/lib/data-access/authorization/useAuth.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import Keycloak from 'keycloak-js';
-import { useEffect, useRef, useState } from 'react';
-import { useAppDispatch } from '../store';
-
-import { authorized } from '../store/authSlice';
-
-export const useAuth = () => {
- const keycloak = new Keycloak({
- url: import.meta.env.VITE_KEYCLOAK_URL || 'https://keycloak.graphpolaris.com',
- realm: import.meta.env.VITE_KEYCLOAK_REALM || 'graphpolaris',
- clientId: import.meta.env.VITE_KEYCLOAK_CLIENT || 'web',
- });
-
- const isRun = useRef(false);
- const [isLogin, setLogin] = useState(false);
- const dispatch = useAppDispatch();
-
- useEffect(() => {
- if (import.meta.env.SKIP_LOGIN) {
- console.warn('skipping login');
- setLogin(true);
- dispatch(
- authorized({
- userID: 'userID',
- sessionID: 'sessionID',
- accessToken: 'accessToken',
- authorized: true,
- })
- );
- return;
- }
-
- if (isRun.current) return;
- isRun.current = true;
- keycloak
- .init({
- onLoad: 'login-required',
- enableLogging: false,
- checkLoginIframe: false,
- })
- .then(async (isAuthenticated) => {
- // console.log("useAuth useEffect", isAuthenticated, keycloak.idTokenParsed);
- setLogin(isAuthenticated);
- // just for example here:
- // const profile = await getUserProfile();
- // console.log("useAuth useEffect profile", profile);
- await dispatch(
- authorized({
- // Info from https://www.keycloak.org/docs/latest/securing_apps/
- userID: keycloak.idTokenParsed.preferred_username ?? '',
- sessionID: keycloak.idTokenParsed.sid ?? '',
- accessToken: keycloak.token ?? '',
- authorized: true,
- })
- );
- })
- .catch((err) => {
- console.error('useAuth err', err);
- throw err;
- });
- }, []);
-
- const getUserProfile = async () => {
- return keycloak
- .loadUserProfile()
- .then(function (profile) {
- return profile;
- // console.info("user info", JSON.stringify(profile, null, " "))
- })
- .catch(function () {
- alert('Failed to load user profile');
- });
- };
-
- return isLogin;
-};
-
-// export useAuth;
diff --git a/libs/shared/lib/data-access/authorization/useAuth.tsx b/libs/shared/lib/data-access/authorization/useAuth.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..31b0f330d942151f98b2d392b7d08997b55cd0d0
--- /dev/null
+++ b/libs/shared/lib/data-access/authorization/useAuth.tsx
@@ -0,0 +1,72 @@
+import Keycloak from 'keycloak-js';
+import { useEffect, useRef, useState } from 'react';
+import { useAppDispatch } from '../store';
+
+import { authorized } from '../store/authSlice';
+
+type AuthenticationHeader = {
+ sessionData: {
+ userID: string;
+ sessionID: string;
+ };
+ jwt: string;
+};
+
+const domain = import.meta.env.BACKEND_URL;
+const useruri = import.meta.env.BACKEND_USER;
+
+export const fetchSettings: RequestInit = {
+ method: 'GET',
+ credentials: 'include',
+ redirect: 'follow',
+};
+
+export const useAuth = () => {
+ const [isLogin, setLogin] = useState(false);
+ const dispatch = useAppDispatch();
+
+ useEffect(() => {
+ if (import.meta.env.SKIP_LOGIN) {
+ console.warn('skipping login');
+ setLogin(true);
+ dispatch(
+ authorized({
+ userID: 'UserID',
+ sessionID: 'SessionID',
+ jwt: 'jwt',
+ authorized: true,
+ })
+ );
+ return;
+ }
+
+ fetch(`${domain}${useruri}/headers`, fetchSettings)
+ .then((res) =>
+ res
+ .json()
+ .then((res: AuthenticationHeader) => {
+ setLogin(true);
+ dispatch(
+ authorized({
+ userID: res.sessionData.userID,
+ sessionID: res.sessionData.sessionID,
+ jwt: res.jwt,
+ authorized: true,
+ })
+ );
+ })
+ .catch((err) => {
+ console.error(err);
+ setLogin(false);
+ })
+ )
+ .catch((err) => {
+ console.error(err);
+ setLogin(false);
+ });
+ }, []);
+
+ return isLogin;
+};
+
+// export useAuth;
diff --git a/libs/shared/lib/data-access/socket/backend-messenger/index.tsx b/libs/shared/lib/data-access/socket/backend-messenger/index.tsx
index 8106715f68ebdfb8af18ce2996c2cd6c590be5bd..1a4a638bbe687fc4cbaae3fb21b736e46d10a47f 100644
--- a/libs/shared/lib/data-access/socket/backend-messenger/index.tsx
+++ b/libs/shared/lib/data-access/socket/backend-messenger/index.tsx
@@ -4,6 +4,7 @@
* © Copyright Utrecht University (Department of Information and Computing Sciences)
*/
+import { fetchSettings } from '../../authorization';
import BackendMessengerRepository from '../backend-message-receiver/BackendMessengerRepository';
/** Sends messages and requests to the backend. */
@@ -27,12 +28,11 @@ export default class BackendMessenger implements BackendMessengerRepository {
const req = this.url + requestURL;
return fetch(req, {
+ ...fetchSettings,
method: requestMethod,
headers: new Headers({
'Content-Type': 'application/json',
}),
- // Pass this parameter to always send authorization cookies, even on localhost
- credentials: 'include',
// Set the body of the request, if this is not a POST request, body is set to undefined
body: requestMethod == 'POST' ? body : undefined,
// Wait for the fetch promise to resolve
@@ -49,12 +49,10 @@ export default class BackendMessenger implements BackendMessengerRepository {
const req = this.url + requestURL;
console.log('backendmessager: ' + req);
return fetch(req, {
- method: 'GET',
+ ...fetchSettings,
headers: new Headers({
'Content-Type': 'application/json',
}),
- // Pass this parameter to always send authorization cookies, even on localhost
- credentials: 'include',
});
}
}
diff --git a/libs/shared/lib/data-access/store/authSlice.ts b/libs/shared/lib/data-access/store/authSlice.ts
index 9c892fc46b03f0d12fce1b9ca5ff1b71ae41fc81..0632dd92ac88420fd717443be9e5d3f64ab0fdb6 100644
--- a/libs/shared/lib/data-access/store/authSlice.ts
+++ b/libs/shared/lib/data-access/store/authSlice.ts
@@ -3,7 +3,7 @@ import type { RootState } from './store';
type useIsAuthorizedState = {
authorized: boolean | undefined;
- accessToken: string | undefined;
+ jwt: string | undefined;
sessionID: string | undefined;
userID: string | undefined;
};
@@ -11,7 +11,7 @@ type useIsAuthorizedState = {
// Define the initial state using that type
export const initialState: useIsAuthorizedState = {
authorized: undefined,
- accessToken: undefined,
+ jwt: undefined,
sessionID: undefined,
userID: undefined,
};
@@ -21,21 +21,17 @@ export const authSlice = createSlice({
// `createSlice` will infer the state type from the `initialState` argument
initialState,
reducers: {
- updateAccessToken(state, action: PayloadAction<string>) {
- console.debug('Updating access token');
- state.accessToken = action.payload;
- },
authorized(state, action: PayloadAction<useIsAuthorizedState>) {
console.debug('Authorized');
state.authorized = action.payload.authorized;
- state.accessToken = action.payload.accessToken;
+ state.jwt = action.payload.jwt;
state.sessionID = action.payload.sessionID;
state.userID = action.payload.userID;
},
logout(state) {
console.debug('Logging out');
state.authorized = undefined;
- state.accessToken = undefined;
+ state.jwt = undefined;
state.sessionID = undefined;
state.userID = undefined;
},
@@ -46,7 +42,7 @@ export const authSlice = createSlice({
},
});
-export const { updateAccessToken, authorized, unauthorized, logout } = authSlice.actions;
+export const { authorized, unauthorized, logout } = authSlice.actions;
// Other code such as selectors can use the imported `RootState` type
export const authState = (state: RootState) => state.auth;