Blocking end-users from seeing application until after login

ericsamson_tract

Hey all,

I have created several experience builder applications using the developer version. These have a lot of custom widgets that I would prefer the public to not be able to view. My application is hosted and currently accessible from anyone with access to the URL. They can't see any of the data, since they need to be logged into our org to see all the good stuff.

However, as of right now, the application will load all aspects of the application except for the data, allowing anyone to see things like the custom widgets (although they won't run) and our custom layer lists (which does list what data we use).

While I understand that anyone could simply right click and dig into the source code for these if they wanted to, I was wondering if anyone has had any luck displaying a blank screen until authentication has been completed? Or have any ideas how I would implement that

Web appbuilder developer edition does this by default when deployed, it's frustrating that experience builder doesn't out of the box.

Thanks,

ericsamson_tract

In case anyone else finds this, I was able to figure it out. My solution involves simply blocking the following css classes if the user is not authenticated:

'controller-container' and 'widget-content'

 

Of course people can work around this if they really want to, so take it with a grain of salt. It works for my purposes. I wrote the following code and put it within the index.html file:

<script>
	const moduleScript = document.createElement('script');
	moduleScript.type = 'module';
	moduleScript.textContent = `
		// Import required modules using SystemJS
		System.import('jimu-core').then((jimuCore) => {
			const { getAppStore, SessionManager } = jimuCore;
			
			let isAuthenticated = false;

			const setElementVisibility = (element, visible) => {
				element.style.setProperty('display', visible ? 'block' : 'none', 'important');
			};

			const handleElements = (visible) => {
				const widgetElements = document.getElementsByClassName('controller-container');
				const cacheElements = document.getElementsByClassName('widget-content');
				
				Array.from(widgetElements).forEach(element => setElementVisibility(element, visible));
				Array.from(cacheElements).forEach(element => setElementVisibility(element, visible));
			};

			const observer = new MutationObserver((mutations) => {
				mutations.forEach((mutation) => {
					if (mutation.addedNodes.length) {
						mutation.addedNodes.forEach((node) => {
							if (node.classList) {
								if (node.classList.contains('controller-container') ||
									node.classList.contains('widget-content')) {
									setElementVisibility(node, isAuthenticated);
								}
							}
						});
					}
				});
			});

			observer.observe(document.body, {
				childList: true,
				subtree: true
			});

			const checkAuth = () => {
				try {
					const userInfo = getAppStore().getState().user;
					const session = SessionManager.getInstance().getMainSession();
					const authCover = document.getElementById('auth-cover');

					if (userInfo && session && session.token) {
						console.log("User authenticated:", userInfo.username);
						isAuthenticated = true;
						
						if (authCover) {
							authCover.style.opacity = '0';
							setTimeout(() => {
								authCover.remove();
							}, 300);
						}
						
						handleElements(true);
						return true;
					} else {
						console.log("User not authenticated");
						isAuthenticated = false;
						
						if (authCover && !document.body.contains(authCover)) {
							document.body.insertBefore(authCover, document.body.firstChild);
							authCover.style.opacity = '1';
						}
						
						handleElements(false);
						return false;
					}
				} catch (error) {
					console.warn("Error checking authentication:", error);
					isAuthenticated = false;
					return false;
				}
			};

			// resize window catch
			let resizeTimeout;
			window.addEventListener('resize', () => {
				clearTimeout(resizeTimeout);
				resizeTimeout = setTimeout(() => {
					if (isAuthenticated) {
						handleElements(true);
					} else {
						handleElements(false);
					}
				}, 100);
			});

			handleElements(false);

			// check on authentication 
			let attempts = 0;
			const maxAttempts = 30;
			const interval = setInterval(() => {
				attempts++;
				if (checkAuth() || attempts >= maxAttempts) {
					clearInterval(interval);
				}
			}, 1000);
		}).catch(error => {
			console.error("Error importing jimu-core:", error);
		});
	`;

	window.addEventListener('load', function() {
		const checkSystemJS = setInterval(() => {
			if (window.System) {
				clearInterval(checkSystemJS);
				document.body.appendChild(moduleScript);
			}
		}, 100);
	});
</script>