Skip to content

Commit d44c2e3

Browse files
appukuttan-shaileshappukuttan-shailesh
committed
undo auth changes
1 parent 348bbae commit d44c2e3

7 files changed

Lines changed: 4186 additions & 11830 deletions

File tree

‎apps/curation-dashboard/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"@testing-library/react": "^11.2.5",
1111
"@testing-library/user-event": "^12.8.1",
1212
"axios": "^0.21.1",
13-
"keycloak-js": "^8.0.1",
13+
"keycloak-js": "^12.0.2",
1414
"react": "^17.0.1",
1515
"react-dom": "^17.0.1",
1616
"react-scripts": "4.0.3"

‎apps/curation-dashboard/src/auth.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,34 @@ import Keycloak from 'keycloak-js';
66
const keycloak = Keycloak({
77
url: 'https://iam.ebrains.eu/auth',
88
realm: 'hbp',
9-
clientId: 'model-catalog'
9+
clientId: 'model-catalog',
10+
'public-client': true,
11+
'confidential-port': 0,
1012
});
1113
const YOUR_APP_SCOPES = 'team email profile'; // full list at https://iam.ebrains.eu/auth/realms/hbp/.well-known/openid-configuration
1214

1315

1416
export default function initAuth(main) {
1517
console.log('DOM content is loaded, initialising Keycloak client...');
16-
keycloak
17-
.init({ flow: 'implicit', promiseType: 'native' })
18+
console.log(window.location.hostname);
19+
if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") {
20+
// for local development
21+
keycloak
22+
.init({ flow: 'implicit', promiseType: 'native' })
1823
.then(() => checkAuth(main))
1924
.catch(console.log);
25+
} else {
26+
// for deployment
27+
keycloak
28+
.init({ flow: 'standard', pkceMethod: 'S256' })
29+
.then(() => checkAuth(main))
30+
.catch(console.log);
31+
}
2032
}
2133

22-
2334
function checkPermissions(keycloak) {
2435
return keycloak.loadUserInfo()
2536
.then((userInfo) => {
26-
2737
if (userInfo.roles.team.includes("collab-model-validation-editor") || userInfo.roles.team.includes("collab-model-validation-administrator")) {
2838
keycloak.authorized = true;
2939
} else {
@@ -32,7 +42,6 @@ function checkPermissions(keycloak) {
3242
})
3343
}
3444

35-
3645
function checkAuth(main) {
3746
console.log('Keycloak client is initialised, verifying authentication...');
3847

‎apps/validation_framework_v2/package-lock.json‎

Lines changed: 4036 additions & 11691 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/validation_framework_v2/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"eslint-plugin-react-hooks": "^4.2.0",
1515
"filesize": "^6.1.0",
1616
"humanparser": "^1.11.0",
17-
"keycloak-js": "^8.0.1",
17+
"keycloak-js": "^12.0.2",
1818
"lodash": "^4.17.20",
1919
"material-ui-chip-input": "^2.0.0-beta.2",
2020
"moment": "^2.29.1",

‎apps/validation_framework_v2/src/ValidationFramework.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,6 @@ class ValidationFramework extends React.Component {
385385

386386
componentDidMount() {
387387
document.body.style.backgroundColor = Theme.bodyBackground;
388-
const token = this.props.auth.tokenParsed;
389388

390389
const [, setAuthContext] = this.context.auth;
391390
setAuthContext(this.props.auth);
@@ -409,13 +408,6 @@ class ValidationFramework extends React.Component {
409408
}
410409
});
411410

412-
this.props.auth
413-
.loadUserInfo()
414-
.success(() => {
415-
const userInfo = this.props.auth.userInfo;
416-
})
417-
.error(console.log);
418-
419411
if (window.location.hash) {
420412
let proceed = true;
421413
const param = window.location.hash.slice(1);

‎apps/validation_framework_v2/src/auth.js‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import Keycloak from 'keycloak-js';
2+
3+
4+
// We start by configuring the Keycloak javascript client
5+
// It needs to know your app id in order to authenticate users for it
6+
const keycloak = Keycloak({
7+
url: 'https://iam.ebrains.eu/auth',
8+
realm: 'hbp',
9+
clientId: 'model-catalog',
10+
'public-client': true,
11+
'confidential-port': 0,
12+
});
13+
const YOUR_APP_SCOPES = 'team email profile'; // full list at https://iam.ebrains.eu/auth/realms/hbp/.well-known/openid-configuration
14+
15+
16+
export default function initAuth(main) {
17+
console.log('DOM content is loaded, initialising Keycloak client...');
18+
console.log(window.location.hostname);
19+
if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") {
20+
// for local development
21+
keycloak
22+
.init({ flow: 'implicit', promiseType: 'native' })
23+
.then(() => checkAuth(main))
24+
.catch(console.log);
25+
} else {
26+
// for deployment
27+
keycloak
28+
.init({ flow: 'standard', pkceMethod: 'S256' })
29+
.then(() => checkAuth(main))
30+
.catch(console.log);
31+
}
32+
}
33+
34+
35+
function checkAuth(main) {
36+
console.log('Keycloak client is initialised, verifying authentication...');
37+
38+
// Is the user anonymous or authenticated?
39+
const isAuthenticated = keycloak.authenticated;
40+
const isAnonymous = !keycloak.authenticated;
41+
// Is this app a standalone app, a framed app or a delegate?
42+
const isParent = (window.opener == null);
43+
const isIframe = (window !== window.parent);
44+
const isMainFrame = (window === window.parent);
45+
const isStandaloneApp = isMainFrame && isParent;
46+
const isFramedApp = isIframe && isParent;
47+
const isDelegate = (window.opener != null);
48+
// Posting and listening to messages
49+
const postMessageToParentTab = (message, parentTabOrigin) => window.opener.postMessage(message, parentTabOrigin);
50+
const listenToMessage = (callback) => window.addEventListener('message', callback);
51+
const AUTH_MESSAGE = 'clb.authenticated';
52+
const myAppOrigin = window.location.origin;
53+
// Manipulating URLs and tabs
54+
const openTab = (url) => window.open(url);
55+
const getCurrentURL = () => new URL(window.location);
56+
const closeCurrentTab = () => window.close();
57+
58+
const login = (scopes) => keycloak.login({ scope: scopes });
59+
60+
// A standalone app should simply login if the user is not authenticated
61+
// and do its business logic otherwise
62+
if (isStandaloneApp) {
63+
console.log('This is a standalone app...');
64+
if (isAnonymous) {
65+
console.log('...which is not authenticated, starting login...');
66+
return login(YOUR_APP_SCOPES);
67+
}
68+
if (isAuthenticated) {
69+
console.log('...which is authenticated, starting business logic...');
70+
return main(keycloak);
71+
}
72+
}
73+
74+
// A framed app should open a delegate to do the authentication for it and listen to its messages and verify them
75+
// If the user is authenticated, it should do its business logic
76+
if (isFramedApp) {
77+
console.log('This is a framed app...');
78+
if (isAnonymous) {
79+
console.log('...which is not authenticated, delegating to new tab...');
80+
listenToMessage(verifyMessage);
81+
return openTab(getCurrentURL());
82+
}
83+
if (isAuthenticated) {
84+
console.log('...which is authenticated, starting business logic...');
85+
return main(keycloak);
86+
}
87+
}
88+
89+
// A delegate should login if the user is not authenticated
90+
// Otherwise, it should inform its opener that the user is authenticated and close itself
91+
if (isDelegate) {
92+
console.log('This is a delegate tab...');
93+
if (isAnonymous) {
94+
console.log('...which is not authenticated, starting login...');
95+
return login(YOUR_APP_SCOPES);
96+
}
97+
if (isAuthenticated) {
98+
console.log('...which is authenticated, warn parent and close...');
99+
postMessageToParentTab(AUTH_MESSAGE, myAppOrigin);
100+
return closeCurrentTab();
101+
}
102+
}
103+
}
104+
105+
function verifyMessage(event) {
106+
console.log('Message receveived, verifying it...');
107+
108+
const AUTH_MESSAGE = 'clb.authenticated';
109+
const receivedMessage = event.data;
110+
const messageOrigin = event.origin;
111+
const myAppOrigin = window.location.origin;
112+
// const reload = () => window.location.reload(); // TODO: remove?
113+
const login = (scopes) => keycloak.login({ scope: scopes });
114+
115+
116+
// Stop if the message is not the auth message
117+
if (receivedMessage !== AUTH_MESSAGE) return;
118+
119+
// Stop if the message is not coming from our app origin
120+
if (messageOrigin !== myAppOrigin) return;
121+
122+
// Login otherwise
123+
return login(YOUR_APP_SCOPES);
124+
}

‎apps/validation_framework_v2/src/index.js‎

Lines changed: 9 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,22 @@
1-
import Keycloak from "keycloak-js";
2-
import React from "react";
3-
import ReactDOM from "react-dom";
4-
5-
import { SnackbarProvider } from "notistack";
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import initAuth from './auth';
64
import { datastore } from "./datastore";
75
import { ContextMainProvider } from "./ContextMain";
6+
import { SnackbarProvider } from "notistack";
87
import ValidationFramework from "./ValidationFramework";
98

10-
// We start by configuring the Keycloak javascript client
11-
// It needs to know your app id in order to authenticate users for it
12-
const keycloak = Keycloak({
13-
url: "https://iam.ebrains.eu/auth",
14-
realm: "hbp",
15-
clientId: "model-catalog", // TODO: change clientID to validation-framework, once client is registered
16-
});
17-
const YOUR_APP_SCOPES = "team email profile"; // full list at https://iam.ebrains.eu/auth/realms/hbp/.well-known/openid-configuration
18-
19-
// When ready, we initialise the keycloak client
20-
// Once done, it will call our `checkAuth` function
21-
window.addEventListener("DOMContentLoaded", initKeycloak);
22-
23-
function initKeycloak() {
24-
console.log("DOM content is loaded, initialising Keycloak client...");
25-
keycloak.init({ flow: "implicit" }).success(checkAuth).error(console.log);
26-
}
27-
28-
function checkAuth() {
29-
console.log("Keycloak client is initialised, verifying authentication...");
30-
31-
// Is the user anonymous or authenticated?
32-
const isAuthenticated = keycloak.authenticated;
33-
const isAnonymous = !keycloak.authenticated;
34-
// Is this app a standalone app, a framed app or a delegate?
35-
const isParent = window.opener == null;
36-
const isIframe = window !== window.parent;
37-
const isMainFrame = window === window.parent;
38-
const isStandaloneApp = isMainFrame && isParent;
39-
const isFramedApp = isIframe && isParent;
40-
const isDelegate = window.opener != null;
41-
// Posting and listening to messages
42-
const postMessageToParentTab = (message, parentTabOrigin) =>
43-
window.opener.postMessage(message, parentTabOrigin);
44-
const listenToMessage = (callback) =>
45-
window.addEventListener("message", callback);
46-
const AUTH_MESSAGE = "clb.authenticated";
47-
const myAppOrigin = window.location.origin;
48-
// Manipulating URLs and tabs
49-
const openTab = (url) => window.open(url);
50-
const getCurrentURL = () => new URL(window.location);
51-
const closeCurrentTab = () => window.close();
52-
53-
const login = (scopes) => keycloak.login({ scope: scopes });
54-
55-
// A standalone app should simply login if the user is not authenticated
56-
// and do its business logic otherwise
57-
if (isStandaloneApp) {
58-
console.log("This is a standalone app...");
59-
if (isAnonymous) {
60-
console.log("...which is not authenticated, starting login...");
61-
return login(YOUR_APP_SCOPES);
62-
}
63-
if (isAuthenticated) {
64-
console.log(
65-
"...which is authenticated, starting business logic..."
66-
);
67-
return doBusinessLogic(keycloak);
68-
}
69-
}
709

71-
// A framed app should open a delegate to do the authentication for it and listen to its messages and verify them
72-
// If the user is authenticated, it should do its business logic
73-
if (isFramedApp) {
74-
console.log("This is a framed app...");
75-
if (isAnonymous) {
76-
console.log(
77-
"...which is not authenticated, delegating to new tab..."
78-
);
79-
listenToMessage(verifyMessage);
80-
return openTab(getCurrentURL());
81-
}
82-
if (isAuthenticated) {
83-
console.log(
84-
"...which is authenticated, starting business logic..."
85-
);
86-
return doBusinessLogic(keycloak);
87-
}
88-
}
89-
90-
// A delegate should login if the user is not authenticated
91-
// Otherwise, it should inform its opener that the user is authenticated and close itself
92-
if (isDelegate) {
93-
console.log("This is a delegate tab...");
94-
if (isAnonymous) {
95-
console.log("...which is not authenticated, starting login...");
96-
return login(YOUR_APP_SCOPES);
97-
}
98-
if (isAuthenticated) {
99-
console.log("...which is authenticated, warn parent and close...");
100-
postMessageToParentTab(AUTH_MESSAGE, myAppOrigin);
101-
return closeCurrentTab();
102-
}
103-
}
104-
}
105-
106-
function verifyMessage(event) {
107-
console.log("Message receveived, verifying it...");
108-
109-
const AUTH_MESSAGE = "clb.authenticated";
110-
const receivedMessage = event.data;
111-
const messageOrigin = event.origin;
112-
const myAppOrigin = window.location.origin;
113-
// const reload = () => window.location.reload(); // TODO: remove?
114-
const login = (scopes) => keycloak.login({ scope: scopes });
115-
116-
// Stop if the message is not the auth message
117-
if (receivedMessage !== AUTH_MESSAGE) return;
118-
119-
// Stop if the message is not coming from our app origin
120-
if (messageOrigin !== myAppOrigin) return;
121-
122-
// Login otherwise
123-
return login(YOUR_APP_SCOPES);
124-
}
125-
126-
function doBusinessLogic(auth) {
10+
function renderApp(auth) {
12711
datastore.auth = auth;
12812
ReactDOM.render(
12913
<ContextMainProvider>
13014
<SnackbarProvider maxSnack={3}>
13115
<ValidationFramework auth={auth} />
13216
</SnackbarProvider>
13317
</ContextMainProvider>,
134-
document.getElementById("root")
18+
document.getElementById('root')
13519
);
136-
}
20+
};
21+
22+
window.addEventListener('DOMContentLoaded', () => initAuth(renderApp));

0 commit comments

Comments
 (0)