diff --git a/buildtime/client/material-editor/src/keycloak.ts b/buildtime/client/material-editor/src/keycloak.ts
new file mode 100644
index 000000000..65719eceb
--- /dev/null
+++ b/buildtime/client/material-editor/src/keycloak.ts
@@ -0,0 +1,7 @@
+import Keycloak from 'keycloak-js';
+ const keycloak = new Keycloak({
+  url: 'https://barefacedlean.ddnss.de:9099',
+  realm: 'simplycpq',
+  clientId: 'simplycpq',
+});
+export default keycloak;
diff --git a/buildtime/client/material-editor/src/main.tsx b/buildtime/client/material-editor/src/main.tsx
index 8a57a39d8..892320cd2 100644
--- a/buildtime/client/material-editor/src/main.tsx
+++ b/buildtime/client/material-editor/src/main.tsx
@@ -4,9 +4,13 @@ import { createRoot } from 'react-dom/client'
 import '@fontsource-variable/inter/wght.css';
 import './index.css'
 import App from './App.tsx'
+import keycloak from './keycloak.ts';
+
+keycloak.init({ onLoad: 'login-required' }).then(() => {
+  createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  )
+});
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
diff --git a/buildtime/client/material-editor/src/pages/HomePage.tsx b/buildtime/client/material-editor/src/pages/HomePage.tsx
index 650671374..469422a9a 100644
--- a/buildtime/client/material-editor/src/pages/HomePage.tsx
+++ b/buildtime/client/material-editor/src/pages/HomePage.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
+import keycloak from '../keycloak';
 
 const HomePage: React.FC = () => {
   return (
     <div>
       <h1>Welcome to the Home Page</h1>
       <p>This is the main landing page of the application.</p>
+      <p>Angemeldet als: {keycloak.tokenParsed?.preferred_username}</p>
     </div>
   );
 };
-
+  
 export default HomePage;