diff --git a/package.json b/package.json
index 0a3ca0b..eed6fe4 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@intlify/vite-plugin-vue-i18n": "^3.3.1",
-    "@quasar/app-vite": "^1.8.0",
+    "@quasar/app-vite": "^1.8.5",
     "@quasar/cli": "^2.4.0",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
diff --git a/quasar.config.js b/quasar.config.js
index 312ffc7..488e6c0 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -11,6 +11,7 @@
 
 const { configure } = require('quasar/wrappers');
 const path = require('path');
+const frontendPort = 8080;
 
 module.exports = configure(function (/* ctx */) {
   return {
@@ -67,7 +68,7 @@ module.exports = configure(function (/* ctx */) {
 
         //Defined in realm_export.json, initialize_keycloak.sh and quasar.config.js
         PORT_KEYCLOAK:8083,
-        PORT_FRONTEND:8080,
+        PORT_FRONTEND:frontendPort,
         PORT_BACKEND:8081,
       },
       // rawDefine: {}
@@ -106,14 +107,15 @@ module.exports = configure(function (/* ctx */) {
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
     devServer: {
       // https: true
-      port: 8080, // default: 3000; changed to 8080 to match keycloak settings
+      port: frontendPort, // default: 3000; changed to 8080 to match keycloak settings
       open: true, // opens browser window automatically
       proxy: {
         '/api': {
-          target: 'http://localhost:8080',
+          target: 'http://localhost:' + frontendPort,
           changeOrigin: true
         }
       },
+
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
diff --git a/src/boot/pinia.ts b/src/boot/pinia.ts
new file mode 100644
index 0000000..37ecc2a
--- /dev/null
+++ b/src/boot/pinia.ts
@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers';
+import { createPinia } from 'pinia';
+
+export default boot(({ app }) => {
+  app.use(createPinia());
+});
diff --git a/src/components/ProtectedData.vue b/src/components/ProtectedData.vue
index de4c72d..49108f0 100644
--- a/src/components/ProtectedData.vue
+++ b/src/components/ProtectedData.vue
@@ -1,45 +1,43 @@
 <script lang="ts">
-import { useKeycloakStore } from '../stores/keycloakStore';
-import {defineComponent, onMounted, ref} from 'vue';
-import {useUserStore} from 'stores/user-store';
-
-/*const protectedData = ref("");
-const keycloakStore = useKeycloakStore();
-
-function fetchProtectedData() {
-  const keycloak = keycloakStore.getKeycloak;
-  if(!keycloak){
-    return;
-  }
-  let myHeaders = new Headers();
-  if(!keycloak.token){
-    return;
-  }
-  myHeaders.append("Authorization", "Bearer " + keycloak.token);
-  let requestOptons = {
-    headers: myHeaders,
-  };
-  fetch("localhost:"+ import.meta.env.PORT_BACKEND + "/api/protected", requestOptons)
-    .then((response) => response.text())
-    .then((data) => {
-      protectedData.value = data;
-      console.info("Protected data: ", data);
-    }).catch((e)=>console.error("Error fetching protected data: ", e));
-}
-onMounted(() => {
-  console.info("Protected component mounted");
-  fetchProtectedData();
-});*/
+import { defineComponent, onMounted, ref } from 'vue';
+import { useUserStore } from 'stores/user-store';
+import { useRouter } from 'vue-router';
+import { ptpUser } from 'src/models';
 
 export default defineComponent({
   name: 'ProtectedData',
   components: {},
-
   setup() {
     const userStore = useUserStore();
+    const router = useRouter();
 
-    return userStore;
-  }
+    const user = ref();
+    const userLoaded = ref(false);
+    const logout = () => {
+      userStore.logout();
+      router.push('/');
+    };
+    const users = ref([] as ptpUser[]);
+    const usersLoaded = ref(false);
+    const loadUsers = async() => {
+      await userStore.loadAllUsers();
+      usersLoaded.value = true;
+      users.value = userStore.users;
+    }
+    onMounted(async () => {
+      userLoaded.value = userStore.userLoaded;
+      user.value = userStore.user;
+      //users = await userStore.getAllUsers();
+    });
+    return {
+      user,
+      userLoaded,
+      logout,
+      loadUsers,
+      users,
+      usersLoaded
+    };
+  },
 })
 
 </script>
@@ -52,6 +50,17 @@ export default defineComponent({
     <p>{{ user.username }}</p>
     <p>{{ user.keycloakID }}</p>
   </div>
+  <q-btn @click="logout()" label="Logout"/>
+  <q-btn @click="loadUsers()" label="Print Users"/>
+  <div v-if="usersLoaded">
+    <p>Users:</p>
+    <div v-for="user in users" :key="user.keycloakID">
+      <p>{{ user.firstName }}</p>
+      <p>{{ user.lastName }}</p>
+      <p>{{ user.username }}</p>
+      <p>{{ user.keycloakID }}</p>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/main.ts b/src/main.ts
index e11ad67..b7024a8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,60 +3,32 @@ import {createPinia} from 'pinia';
 
 import App from './App.vue';
 
-import Keycloak, {type KeycloakConfig, type KeycloakInitOptions} from 'keycloak-js';
-import { useKeycloakStore } from 'stores/keycloakStore';
+import Keycloak from 'keycloak-js';
 import {useUserStore} from 'stores/user-store';
 
 const app = createApp(App);
-app.use(createPinia());
+const pinia = createPinia();
+app.use(pinia);
 
-/**
- * Initialisierungsoptionen für Keycloak.
- * @param url URL zu Keycloak, Port definiert in keycloak_init.sh und quasar.config.js-Datei. Müssen identisch sein!
- * @param realm Name des Realms, hinterlegt in realm-export.json von Keycloak und quasar.config.js-Datei. Müssen identisch sein!
- * @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak und quasar.config.js-Datei. Müssen identisch sein!
- * @param onLoad = 'login-required': Hierdurch wird zum Aufrufen der ganzen Applikation ein login benötigt.
- * @param redirectUri: URL, zu der nach dem Login weitergeleitet wird. Hierbei wird die Port des Frontends aus der .env-Datei verwendet.
- */
 
-/*const keycloak = new Keycloak({
-  url: 'http://localhost:8083/',
-  realm: 'PraxistransferKeycloak',
-  clientId: 'praxistransfer'
-});
 
-console.log("ICH WAR HIER");
-
-try {
-  const authenticated = await keycloak.init({
-    onLoad: 'login-required',
-    redirectUri: 'http://localhost:8080/'
-  }).then( (auth) => {
-    console.log("Authenticated :" + authenticated);
-  });
-
-} catch (error) {
-  console.error(error);
-}
-
-console.log(keycloak);
-console.log(keycloak.subject);
+const userStore = useUserStore();
+const keycloak: Keycloak = await userStore.initKeycloak();
 
 // Anfrage ans Backend
-const userStore = useUserStore();
 
-if (keycloak.subject != null) {
+if (keycloak.subject) {
+  userStore.keycloakId = keycloak.subject;
   //userStore.loadPtpUsersByKeycloakID(keycloak.subject);
-  userStore.getPtpUserByKeycloakID(keycloak.subject);
+  await userStore.getPtpUserByKeycloakID(keycloak.subject);
   /*console.log(userStore.userLoaded);
   if(userStore.userLoaded) {
     console.log("Hier ist der Bruder: " + JSON.stringify(userStore.user));
   }*/
-  /*userStore.loadPtpUsersByKeycloakID(keycloak.subject).then(user => {
+  userStore.loadPtpUsersByKeycloakID(keycloak.subject).then(user  => {
     console.log(JSON.stringify(user));
   })
 } else {
-  console.log("hier ist was schlimmes passiert menno");
-}*/
-
+  console.error("hier ist was schlimmes passiert menno");
+}
 
diff --git a/src/stores/index.ts b/src/stores/index.ts
deleted file mode 100644
index d30b7cf..0000000
--- a/src/stores/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { store } from 'quasar/wrappers'
-import { createPinia } from 'pinia'
-import { Router } from 'vue-router';
-
-/*
- * When adding new properties to stores, you should also
- * extend the `PiniaCustomProperties` interface.
- * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
- */
-declare module 'pinia' {
-  export interface PiniaCustomProperties {
-    readonly router: Router;
-  }
-}
-
-/*
- * If not building with SSR mode, you can
- * directly export the Store instantiation;
- *
- * The function below can be async too; either use
- * async/await or return a Promise which resolves
- * with the Store instance.
- */
-
-export default store((/* { ssrContext } */) => {
-  const pinia = createPinia()
-
-  // You can add Pinia plugins here
-  // pinia.use(SomePiniaPlugin)
-
-  return pinia
-})
diff --git a/src/stores/keycloakStore.ts b/src/stores/keycloakStore.ts
deleted file mode 100644
index c4fdb8a..0000000
--- a/src/stores/keycloakStore.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type Keycloak from 'keycloak-js';
-import { defineStore } from 'pinia';
-//import api from 'axios';
-
-export const useKeycloakStore = defineStore('keycloakStore', {
-  state: ()=>({
-    keycloak: null as Keycloak| null,
-  }),
-  getters: {
-    getKeycloak: (state) => state.keycloak,
-  },
-  actions:{
-    setKeycloak(keycloak: Keycloak): void {
-      this.keycloak = keycloak;
-    },
-
-  },
-});
diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index 160e178..d627f15 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -1,24 +1,24 @@
 import { defineStore } from 'pinia';
-import {api} from 'boot/axios';
-import {ptpUser, responseModel} from 'src/models';
-import Keycloak from 'keycloak-js';
+import { api } from 'src/boot/axios';
+import { ptpUser, responseModel } from 'src/models';
+import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions } from 'keycloak-js';
 
 export const useUserStore = defineStore('userStore', {
   state: () => ({
-    user: {"keycloakID":null,"firstName":null,"lastName":null,"username":null},
+    user: null as ptpUser | null,
     userLoaded: false,
     users: [] as ptpUser[],
     usersLoaded: false,
+    keycloak: null as Keycloak | null,
+    keycloakId: "",
+    users: [] as ptpUser[],
   }),
-  getters: {
-
-  },
+  getters: {},
   actions: {
-    getPtpUserByKeycloakID(keycloakID : string) {
-      this.loadPtpUsersByKeycloakID(keycloakID).then((response : responseModel) => {
+    async getPtpUserByKeycloakID(keycloakID : string) {
+      await this.loadPtpUsersByKeycloakID(keycloakID).then((response : responseModel) => {
         this.user = response.response;
         this.userLoaded = true;
-        console.log("ich habe das gesetzt: " + JSON.stringify(this.user) + " / " + this.userLoaded);
       });
     },
     async loadPtpUsersByKeycloakID(keycloakID : string) : Promise<responseModel>  {
@@ -32,6 +32,47 @@ export const useUserStore = defineStore('userStore', {
     },
     async loadAllPtpUsers() {
       return (await api.get("/users/user")).data;
-    }
+    },
+    async initKeycloak() {
+      /**
+       * Variablen sind in quasar.config.js definiert und werden hier verwendet.
+       * @param keycloakPort Port, auf dem Keycloak läuft, hinterlegt in docker-compose.yml
+       * @param frontendPort Port, auf dem das Frontend läuft, hinterlegt in quasar.config.js und realm-export.json von Keycloak für die Redirect-URL
+       * @param realm Name des Realms, hinterlegt in realm-export.json von Keycloak
+       * @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak
+       */
+      const keycloakPort: string = "" + process.env.PORT_KEYCLOAK;
+      const frontendPort: string = "" + process.env.PORT_FRONTEND;
+      const realm : string= "" + process.env.KEYCLOAK_REALM;
+      const clientId: string = "" + process.env.KEYCLOAK_CLIENT_ID;
+      const keycloak: Keycloak = new Keycloak({
+        url: 'http://localhost:' + keycloakPort + '/',
+        realm: realm,
+        clientId: clientId
+      });
+      const initOptions: KeycloakInitOptions = {
+        onLoad: 'login-required', //erzwingt Login
+        redirectUri: 'http://localhost:' + frontendPort + '/',
+        checkLoginIframe: false,
+        locale: 'login-required',
+      }
+      try {
+        await keycloak.init(initOptions).then( (auth: boolean): void => {
+          console.log("Authenticated: " + auth);
+        });
+      } catch (error) {
+        console.error(error);
+      }
+      this.keycloak = keycloak;
+      return keycloak;
+    },
+    async login() {
+      if(!this.keycloak){
+        await this.initKeycloak();
+      }else await this.keycloak?.login( {prompt: 'login'} as KeycloakLoginOptions);
+    },
+    async logout() {
+      window.location.href= 'http://localhost:' + process.env.PORT_KEYCLOAK + '/realms/' + process.env.KEYCLOAK_REALM + '/protocol/openid-connect/logout?post_logout_redirect_uri=http%3A%2F%2Flocalhost:' + process.env.PORT_FRONTEND + '&client_id=' + process.env.KEYCLOAK_CLIENT_ID;
+    },
   },
 });
diff --git a/tsconfig.json b/tsconfig.json
index 24fee09..6b2177a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,4 +11,4 @@
     "./src-cordova",
     "./quasar.config.*.temporary.compiled*"
   ]
-}
\ No newline at end of file
+}