Authorization issue fix

.gitignore

@@ -11,4 +11,5 @@ zitadel/zitadel-config.yaml
 zitadel/zitadel-init-local.yaml
 zitadel/zitadel.exe
 
-secrets/
+secrets/
+frontend/src/style/package-lock.json

frontend/public/mystyles.css

@@ -3512,7 +3512,7 @@ button.dropdown-item {
 
 .navbar {
   background-color: white;
-  min-height: 3.25rem;
+  min-height: 3.75rem;
   position: relative;
   z-index: 30; }
   .navbar.is-white {
@@ -3968,7 +3968,7 @@ button.dropdown-item {
   .navbar > .container {
     align-items: stretch;
     display: flex;
-    min-height: 3.25rem;
+    min-height: 3.75rem;
     width: 100%; }
   .navbar.has-shadow {
     box-shadow: 0 2px 0 0 whitesmoke; }
@@ -3986,18 +3986,18 @@ button.dropdown-item {
 
 html.has-navbar-fixed-top,
 body.has-navbar-fixed-top {
-  padding-top: 3.25rem; }
+  padding-top: 3.75rem; }
 
 html.has-navbar-fixed-bottom,
 body.has-navbar-fixed-bottom {
-  padding-bottom: 3.25rem; }
+  padding-bottom: 3.75rem; }
 
 .navbar-brand,
 .navbar-tabs {
   align-items: stretch;
   display: flex;
   flex-shrink: 0;
-  min-height: 3.25rem; }
+  min-height: 3.75rem; }
 
 .navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover {
   background-color: transparent; }
@@ -4012,9 +4012,9 @@ body.has-navbar-fixed-bottom {
   color: #4a4a4a;
   cursor: pointer;
   display: block;
-  height: 3.25rem;
+  height: 3.75rem;
   position: relative;
-  width: 3.25rem;
+  width: 3.75rem;
   margin-left: auto; }
   .navbar-burger span {
     background-color: currentColor;
@@ -4080,7 +4080,7 @@ a.navbar-item,
     flex-shrink: 1; }
   .navbar-item.is-tab {
     border-bottom: 1px solid transparent;
-    min-height: 3.25rem;
+    min-height: 3.75rem;
     padding-bottom: calc(0.5rem - 1px); }
     .navbar-item.is-tab:focus, .navbar-item.is-tab:hover {
       background-color: transparent;
@@ -4147,14 +4147,14 @@ a.navbar-item,
     top: 0; }
   .navbar.is-fixed-top .navbar-menu, .navbar.is-fixed-top-touch .navbar-menu {
     -webkit-overflow-scrolling: touch;
-    max-height: calc(100vh - 3.25rem);
+    max-height: calc(100vh - 3.75rem);
     overflow: auto; }
   html.has-navbar-fixed-top-touch,
   body.has-navbar-fixed-top-touch {
-    padding-top: 3.25rem; }
+    padding-top: 3.75rem; }
   html.has-navbar-fixed-bottom-touch,
   body.has-navbar-fixed-bottom-touch {
-    padding-bottom: 3.25rem; } }
+    padding-bottom: 3.75rem; } }
 
 @media screen and (min-width: 1024px) {
   .navbar,
@@ -4164,7 +4164,7 @@ a.navbar-item,
     align-items: stretch;
     display: flex; }
   .navbar {
-    min-height: 3.25rem; }
+    min-height: 3.75rem; }
     .navbar.is-spaced {
       padding: 1rem 2rem; }
       .navbar.is-spaced .navbar-start,
@@ -4277,16 +4277,16 @@ a.navbar-item,
     top: 0; }
   html.has-navbar-fixed-top-desktop,
   body.has-navbar-fixed-top-desktop {
-    padding-top: 3.25rem; }
+    padding-top: 3.75rem; }
   html.has-navbar-fixed-bottom-desktop,
   body.has-navbar-fixed-bottom-desktop {
-    padding-bottom: 3.25rem; }
+    padding-bottom: 3.75rem; }
   html.has-spaced-navbar-fixed-top,
   body.has-spaced-navbar-fixed-top {
-    padding-top: 5.25rem; }
+    padding-top: 5.75rem; }
   html.has-spaced-navbar-fixed-bottom,
   body.has-spaced-navbar-fixed-bottom {
-    padding-bottom: 5.25rem; }
+    padding-bottom: 5.75rem; }
   a.navbar-item.is-active,
   .navbar-link.is-active {
     color: #0a0a0a; }
@@ -4297,7 +4297,7 @@ a.navbar-item,
     background-color: #fafafa; } }
 
 .hero.is-fullheight-with-navbar {
-  min-height: calc(100vh - 3.25rem); }
+  min-height: calc(100vh - 3.75rem); }
 
 .pagination {
   font-size: 1rem;

frontend/src/augmentations.d.ts

@@ -0,0 +1,9 @@
+export { }
+
+declare module 'vue-router' {
+    interface RouteMeta {
+        hideHeader?: boolean
+        requiresAuth?: boolean
+        forwardWhenAuthenticated?: string
+    }
+}

frontend/src/components/AppHeader.vue

@@ -1,11 +1,11 @@
 <template>
-  <nav class="navbar p-2" role="navigation" aria-label="main navigation">
+  <nav class="navbar px-2" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
         <router-link to="/" class="navbar-item">
             <img src="@/assets/logo.png"
                  alt="Chorister logo"/>
         </router-link>
-        <div class="has-text-primary is-size-7" style="margin-top: 5px; margin-left: -32px; z-index: 2;">beta</div>
+        <div class="has-text-primary is-size-7" style="margin-top: 0.5rem; margin-left: -32px; z-index: 2;">beta</div>
       <a
         role="button"
         class="navbar-burger"

frontend/src/router/index.ts

@@ -110,6 +110,11 @@ const routes = [
       requiresAuth: true,
       hideHeader: true
     },
+  },
+  {
+    path: '/authorized',
+    name: 'Authorized',
+    component: () => import('../views/Authorized.vue')
   }
 ]
 
@@ -153,7 +158,7 @@ router.beforeEach((to, from, next) => {
       next()
     }
   } else if(to.matched.some(record => record.meta.forwardWhenAuthenticated) && auth.isLoggedIn) {
-    next(to.meta.forwardWhenAuthenticated)
+    next(to.meta.forwardWhenAuthenticated!)
   } else {
     // Default case. The user is send to the desired route.
     next()

frontend/src/stores/authStore.ts

@@ -14,7 +14,7 @@ const settings = {
 let userManager = new UserManager(settings)
 userManager.events.addAccessTokenExpired(() => {
     console.log("Access token expired. Logging out...");
-    useAuth().logout();
+    useAuth().removeSession();
 });
 
 export const useAuth = defineStore('auth', {
@@ -74,6 +74,11 @@ export const useAuth = defineStore('auth', {
             })
         },
 
+        removeSession () {
+            this.user = null
+            return userManager.signinRedirect();
+        },
+
         getUserZitadelId() {
             return this.user?.profile?.sub;
         }