Syncing Lots Of Auth Tweaks

src/views/Login.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="userinfo">
+    <div>
+      <h1>This is a login-protected page</h1>
+      <h2>
+        The following profile data is extended by information from ZITADELs userinfo endpoint.
+      </h2>
+      <p>
+      <ul class="claims">
+        <li v-for="c in claims" :key="c.key">
+          <strong>{{ c.key }}</strong
+          >: {{ c.value }}
+        </li>
+      </ul>
+      </p>
+    </div>
+    <button @click="signout">Sign Out</button>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .userinfo {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
+<script lang="ts">
+import { getCurrentInstance } from 'vue';
+import { ref } from 'vue';
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  computed: {
+    user() {
+      return this.$zitadel.oidcAuth.userProfile
+    },
+    claims() {
+      if (this.user) {
+        return Object.keys(this.user).map((key) => ({
+          key,
+          value: this.user[key]
+        }))
+      }
+      return []
+    }
+  }
+})
+</script>
+
+<script setup lang="ts">
+const zitadel = ref(getCurrentInstance()?.appContext.config.globalProperties.$zitadel!)
+const user = ref(zitadel.value.oidcAuth.userProfile)
+const signout = function() {
+  if (user.value) {
+    zitadel.value.oidcAuth.signOut()
+  }
+}
+</script>