Keycloak and React Router Dom v6.4 compatibility #14716

skiabox · 2022-10-04T09:54:20Z

skiabox
Oct 4, 2022

Hello friends!
Is it possible to use Keycloak with react-router-dom v6.4?
Right now I am getting this error:

Refused to frame 'http://localhost:10001/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

I am running keycloak from a docker container.

Here is the Keycloak.js file:

`javascript
import Keycloak from 'keycloak-js';

@brief Post initialize keycloak assets
@details This function runs after keycloak has been initialized and it is

      authenticated, in order to initialize functions necessary for

```
      session tracking.
```

/
keycloak.postInit = () => {
keycloak.appContextUrl = window.location.protocol + '//' + window.location.hostname + ':8085/flowable-ui';
/*
* @brief Redirect to Login
*
* @details This function logs out the current user and redirects to login.
/
keycloak.redirectToLogin = () => {
if (process.env.REACT_APP_USE_KEYCLOAK === '1') {
window.location.href = keycloak.appContextUrl + '/exit';
}
}
/*
* @brief Log Function
*
* @PARAM [object] obj The object to log
*
* @details This function outputs obj to console.
/
keycloak.log = (obj) => {
//console.log(obj);
}
/*
* @brief Start Session Tracker
*
* @details This function initializes and start the session tracker. The
* session tracker tracks the user session and access token and
* keeps them alive if the user is active, or redirects to the
* logout page if the user is idle for a long time.
*/
keycloak.startSessionTracker = () => {
if (process.env.REACT_APP_USE_KEYCLOAK === '1') {
// initialize tracker assets
const now = (new Date).getTime() / 1000;
const tracker = {
// initialize tracker constants
accessTokenIntv: 60,
shortIntv: 10,
// initialize tracker variables
lastUserTime: now,
lastTokenTime: now,
};
tracker.tokenIntv = tracker.accessTokenIntv - tracker.shortIntv;

		keycloak.tracker = tracker;

		/**
		 *  @brief Short Session Tracker
		 *  
		 *  @details This function runs in short intervals and checks or
		 *           updates the access token. If the user is idle for a
		 *           long time, then it will stop running (otherwise the
		 *           session would saty alive forever and would never
		 *           expire).
		 */
		keycloak.tracker.shortSessionChecker = () => {
			const tracker = keycloak.tracker;
			const now = (new Date).getTime() / 1000;
			const idleTime = now - tracker.lastUserTime;
			const tokenTime = now - tracker.lastTokenTime;
			keycloak.log({f: "shortSessionChecker", idleTime: parseInt(idleTime), tokenTime: parseInt(tokenTime)});
			if (idleTime <= tracker.tokenIntv) {
				if (tokenTime >= tracker.tokenIntv) {
					tracker.updateAccessToken();
				}
				else {
					tracker.checkAccessToken();
				}
			}
			else {
				clearInterval(tracker.shortSessionCheckerIntv);
				tracker.shortSessionCheckerIntv = null;
			}
		}
		/**
		 *  @brief Update Access Token
		 *  
		 *  @details This function updates the access token if it is close
		 *           to its expiration. In case of error, this means that
		 *           the session is expired and the user is redirected to
		 *           login.
		 */
		keycloak.tracker.updateAccessToken = () => {
			keycloak.log({f: "updateAccessToken"});
			const tracker = keycloak.tracker;
			keycloak.updateToken(tracker.shortIntv)
			.then(function(refreshed) {
				if (refreshed) {
					tracker.lastTokenTime = (new Date).getTime() / 1000;
				}
			})
			.catch(function(e) {
				keycloak.log({f: "updateAccessToken error"});
				keycloak.redirectToLogin();
			});
		}
		/**
		 *  @brief Check Access Token
		 *  
		 *  @details This function checks whether the access token is valid
		 *           or not. If it is not, in will update it.
		 */
		keycloak.tracker.checkAccessToken = () => {
			keycloak.log({f: "checkAccessToken"});
			const tracker = keycloak.tracker;
			if (keycloak.isTokenExpired()) {
				tracker.updateAccessToken();
			}
		}
		/**
		 *  @brief User Acted Callback
		 *  
		 *  @details This function runs whenever the user interacts with the
		 *           page. This is a mechanism of detecting when the user is
		 *           idle. If the user has been idle for a long time, the
		 *           function will try to update the access token. If it
		 *           fails (meaning that the session is expired) it will
		 *           redirect to the login page.
		 */
		keycloak.tracker.userActed = () => {
			const tracker = keycloak.tracker;
			const now = (new Date).getTime() / 1000;
			const idleTime = now - tracker.lastUserTime;
			tracker.lastUserTime = now;
			if (idleTime > tracker.tokenIntv) {
				tracker.updateAccessToken();
			}
			if (tracker.shortSessionCheckerIntv == null) {
				tracker.shortSessionCheckerIntv = setInterval(tracker.shortSessionChecker, tracker.shortIntv * 1000);
			}
		}
		
		// initialize tracker timer
		tracker.shortSessionCheckerIntv = setInterval(tracker.shortSessionChecker, tracker.shortIntv * 1000);
		// initialize user action events
		document.addEventListener('mousedown', keycloak.tracker.userActed);
		document.addEventListener('mousemove', keycloak.tracker.userActed);
		document.addEventListener('touchstart', keycloak.tracker.userActed);
		document.addEventListener('scroll', keycloak.tracker.userActed);
		document.addEventListener('keydown', keycloak.tracker.userActed);
		window.addEventListener('focus', keycloak.tracker.userActed);
	}
}

keycloak.startSessionTracker();

}
/**

@brief Load React DOM
@PARAM [function] callback The callback function that load the DOM.
@details This function loads the React DOM. Before loading of React DOM, the

      function triggers a specific endpoint of the back-end application

      to make sure that the back-end syncs the user. This trigger happens

```
      inside an iframe.
```

*/
keycloak.loadReactDom = (callback) => {
if (process.env.REACT_APP_USE_KEYCLOAK === '1') {
// first we need to reload flowable root page so that we make sure that
// flowable has correctly read the user, otherwise the ui endpoints will not
// work; we do this by loading flowable root page inside a hidden iframe
var ifr = document.createElement('IFRAME');
ifr.src = keycloak.appContextUrl + '/gateway_jftezm9m';
ifr.style.display = 'none';
ifr.addEventListener('load', function (e) {
callback();
});
document.body.appendChild(ifr);
} else {
callback();
}
};

export default keycloak;

`

And here is the new App.js:

`
const router = createHashRouter(
createRoutesFromElements(

        <Route path="/" element={<RootLayout />}>
          {/* <Route path="/" element={<ApplicationResults t={t} isInvestor={isInvestor} noFilters={noFilters} isAuditor={isAuditor} isBank={isBank} isMof={isMof} processEditor={processEditor} deadline={deadline} isCommittee={isCommittee}/>} /> */}
          <Route index element={<ApplicationResults />} loader={measuresAndProjects} />
          <Route path="/view/:processInstanceId" element={<ApplicationTabs />} />
        </Route>

)
);

function App() {
return

}
`

Navigation Menu

Repository navigation

Keycloak and React Router Dom v6.4 compatibility #14716

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Keycloak and React Router Dom v6.4 compatibility #14716

Uh oh!

skiabox Oct 4, 2022

Replies: 0 comments

skiabox
Oct 4, 2022