diff --git a/apps/demo-app/src/index.tsx b/apps/demo-app/src/index.tsx
index 9a5832da1..fd375374c 100644
--- a/apps/demo-app/src/index.tsx
+++ b/apps/demo-app/src/index.tsx
@@ -3,6 +3,7 @@ import { MonitoringProvider } from '@monkvision/monitoring';
import { AnalyticsProvider } from '@monkvision/analytics';
import { Auth0Provider } from '@auth0/auth0-react';
import { getEnvOrThrow } from '@monkvision/common';
+import { PreventExit } from '@monkvision/common-ui-web';
import { sentryMonitoringAdapter } from './sentry';
import { posthogAnalyticsAdapter } from './posthog';
import { AppRouter } from './components';
@@ -21,6 +22,7 @@ ReactDOM.render(
prompt: 'login',
}}
>
+
diff --git a/packages/common-ui-web/src/components/PreventExit/PreventExit.tsx b/packages/common-ui-web/src/components/PreventExit/PreventExit.tsx
new file mode 100644
index 000000000..01e2e9007
--- /dev/null
+++ b/packages/common-ui-web/src/components/PreventExit/PreventExit.tsx
@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+export function PreventExit() {
+ useEffect(() => {
+ window.onbeforeunload = () => {
+ return 'Are you sure you want to leave?';
+ };
+ return () => {
+ window.onbeforeunload = null;
+ };
+ }, []);
+ return null;
+}
diff --git a/packages/common-ui-web/src/components/PreventExit/index.tsx b/packages/common-ui-web/src/components/PreventExit/index.tsx
new file mode 100644
index 000000000..e4e33c4ba
--- /dev/null
+++ b/packages/common-ui-web/src/components/PreventExit/index.tsx
@@ -0,0 +1 @@
+export { PreventExit } from './PreventExit';
diff --git a/packages/common-ui-web/src/components/index.ts b/packages/common-ui-web/src/components/index.ts
index c3b6a9e10..19b3e74fa 100644
--- a/packages/common-ui-web/src/components/index.ts
+++ b/packages/common-ui-web/src/components/index.ts
@@ -16,3 +16,4 @@ export * from './TakePictureButton';
export * from './TextField';
export * from './VehicleTypeAsset';
export * from './VehicleTypeSelection';
+export * from './PreventExit';