Implemented a Basic Pass Of Post-login Redirecting

public/config.json

@@ -1,5 +1,5 @@
 {
-    "apiBaseURL": "http://coder.local.merr.is:3000",
+    "apiBaseURL": "http://coder.local.merr.is:3001",
     "oidcAuthority": "https://auth.joes.moosenet.work",
     "oidcClientID": "255988227184328707@isekai:_slow_life_calculator",
     "oidcProjectID": "255987963094106115"

src/components/GlobalHeader.vue

@@ -1,7 +1,22 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { oidc } from '@/types/ConfigSymbols';
+import { inject } from 'vue';
+import { ref } from 'vue'
+import { useRoute } from 'vue-router';
 
+const zitadel = ref(inject(oidc))
+const route = ref(useRoute())
+zitadel.value?.isAuthenticated
 const drawer = ref(false)
+
+const login = () => {
+  console.log(route.value.path)
+  zitadel.value?.signIn({redirect_uri: "http://coder.local.merr.is:5173/login"})
+}
+const logout = () => {
+  zitadel.value?.signOut()
+  
+}
 </script>
 
 <template>
@@ -25,5 +40,11 @@ const drawer = ref(false)
         <v-list-item-title>Intimacy Power</v-list-item-title>
       </v-list-item>
     </v-list>
+    <template v-slot:append>
+      <div class="pa-2">
+        <v-btn block @click="logout" v-if="zitadel?.isAuthenticated">Logout</v-btn>
+        <v-btn block @click="login" v-else>Login</v-btn>
+      </div>
+    </template>
   </v-navigation-drawer>
 </template>

src/main.ts

@@ -24,7 +24,7 @@ const vuetify = createVuetify({
 })
 
 getConfig().then((conf: Config | null) => {
-  configureOidc().then((authentikAuth) => {
+  configureOidc().then((oidcAuth) => {
     if (conf === null) {
       throw new Error('config was null')
     }
@@ -32,9 +32,9 @@ getConfig().then((conf: Config | null) => {
 
     app.provide(apiBaseURL, conf.apiBaseURL)
 
-    authentikAuth.startup().then((ok: boolean) => {
+    oidcAuth.startup().then((ok: boolean) => {
       if (ok) {
-        app.provide(oidc, authentikAuth)
+        app.provide(oidc, oidcAuth)
         
         const pinia = createPinia()
 

src/router/index.ts

@@ -1,6 +1,7 @@
 import { configureOidc } from '@/services/authentikAuth'
 import { getConfig } from '@/services/siteConfig'
 import type { Config } from '@/types/Config'
+import { LOGIN_RETURN_URL_STORAGE } from '@/types/ConfigSymbols'
 import type { OidcAuth } from 'vue-oidc-client/vue3'
 import { createRouter, createWebHistory } from 'vue-router'
 
@@ -34,30 +35,43 @@ const router = createRouter({
       path: '/intimacy-power',
       name: 'intimacy-power',
       component: () => import('@/views/IntimacyPowerView.vue')
-    }
-    // {
-    //   path: '/test',
-    //   name: 'test',
-    //   component: () => import('@/views/TestView.vue')
-    // },
+    },
+    {
+      path: '/test',
+      name: 'test',
+      component: () =>
+        hasRole('admin') ? import('@/views/TestView.vue') : import('@/views/NoAccess.vue')
+    },
 
-    // {
-    //   path: '/login',
-    //   name: 'login',
-    //   meta: {
-    //     authName: oidcAuth.authName
-    //   },
-    //   component: () => import('@/views/LoginView.vue')
-    // },
-    // {
-    //   path: '/admin',
-    //   name: 'admin',
-    //   meta: {
-    //     authName: oidcAuth.authName
-    //   },
-    //   component: () =>
-    //     hasRole('admin') ? import('@/views/Admin.vue') : import('@/views/NoAccess.vue')
-    // }
+    {
+      path: '/login',
+      name: 'login',
+      meta: {
+        authName: oidcAuth.authName
+      },
+      component: () => import('@/views/LoginView.vue')
+    },
+    {
+      path: '/admin',
+      name: 'admin',
+      meta: {
+        authName: oidcAuth.authName
+      },
+      component: () =>
+        hasRole('admin') ? import('@/views/Admin.vue') : import('@/views/NoAccess.vue')
+    },
+    {
+      path: '/postLogin',
+      name: 'postLogin',
+      redirect: () => {
+        let redirectUrl = sessionStorage.getItem(LOGIN_RETURN_URL_STORAGE)
+        if (redirectUrl === "" || redirectUrl === null) {
+          redirectUrl = "/"
+        }
+        sessionStorage.removeItem(LOGIN_RETURN_URL_STORAGE)
+        return { path: redirectUrl }
+      }
+    }
   ]
 })
 

src/stores/general.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useGeneralState = defineStore('general', () => {
+  const LOGIN_RETURN_URL_STORAGE = 'LOGIN_RETURN_URL_STORAGE'
+
+  const loginReturnUrl = ref("")
+
+  function setLoginReturnUrl(url: string) {
+    loginReturnUrl.value = url
+    localStorage.setItem(
+      LOGIN_RETURN_URL_STORAGE,
+      loginReturnUrl.value,
+    )
+  }
+
+  function getLoginReturnUrl(): string {
+    const storedUrl = localStorage.getItem(LOGIN_RETURN_URL_STORAGE)
+    if (storedUrl === null || storedUrl === undefined || storedUrl === "") {
+      localStorage.removeItem(LOGIN_RETURN_URL_STORAGE)
+      const res = loginReturnUrl.value
+      loginReturnUrl.value == null
+      return res
+    }
+    localStorage.removeItem(LOGIN_RETURN_URL_STORAGE)
+    loginReturnUrl.value == null
+    return storedUrl
+  }
+
+  return {
+    setLoginReturnUrl,
+    getLoginReturnUrl
+  }
+})

src/types/ConfigSymbols.ts

@@ -5,8 +5,11 @@ const apiBaseURL = Symbol() as InjectionKey<string>
 const oidcProjectID = Symbol() as InjectionKey<string>
 const oidc = Symbol() as InjectionKey<OidcAuth>
 
+const LOGIN_RETURN_URL_STORAGE = "LOGIN_RETURN_URL_STORAGE"
+
 export {
     apiBaseURL,
     oidcProjectID,
-    oidc
+    oidc,
+    LOGIN_RETURN_URL_STORAGE
 }

src/views/LoginView.vue

@@ -27,37 +27,37 @@
   }
 }
 </style>
-<script lang="ts">
-import { oidc } from '@/types/ConfigSymbols';
-import { inject } from 'vue';
-import { ref } from 'vue';
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  computed: {
-    user() {
-      return inject(oidc)?.userProfile
-    },
-    claims() {
-      if (this.user) {
-        return Object.keys(this.user).map((key) => ({
-          key,
-          value: this.user[key]
-        }))
-      }
-      return []
-    }
-  }
-})
-</script>
 
 <script setup lang="ts">
+import { oidc, LOGIN_RETURN_URL_STORAGE } from '@/types/ConfigSymbols';
+import { inject } from 'vue';
+import { computed } from 'vue';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+
 const zitadel = ref(inject(oidc))
 const user = ref(zitadel.value?.userProfile)
+const claims = computed(() => {
+  if (user.value !== undefined) {
+    return Object.keys(user.value).map((key) => ({
+      key,
+      value: (user.value as Oidc.Profile)[key]
+    }))
+  }
+  return []
+})
+
 const signout = function() {
   if (user.value) {
     zitadel.value?.signOut()
   }
 }
-console.log(zitadel.value)
+
+if (!(zitadel.value?.isAuthenticated)) {
+  let routePath = useRoute().path
+  if (routePath !== undefined && routePath !== null) {
+    sessionStorage.setItem(LOGIN_RETURN_URL_STORAGE, routePath.toString())
+    zitadel.value?.signIn()
+  }
+}
 </script>

src/views/PostLoginView.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useGeneralState } from '@/stores/general'
+
+console.log(useGeneralState().getLoginReturnUrl())
+
+</script>
+
+<template>
+  <div>Hi mom</div>
+</template>

src/views/TestView.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import NewItemForm from '@/components/NewItemForm.vue';
-
 </script>
 
 <template>