initial commit

src/App.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+import DailyHeader from './components/DailyHeader.vue';
+</script>
+
+<template>
+  <DailyHeader />
+
+  <RouterView />
+</template>

src/assets/main.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

src/components/DailyHeader.vue

@@ -0,0 +1,5 @@
+<template>
+  <header>
+    <div>Header</div>
+  </header>
+</template>

src/components/__tests__/DailyHeader.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import DailyHeader from '../DailyHeader.vue';
+
+describe('Header', () => {
+  it('Loads properly', () => {
+    const wrapper = mount(DailyHeader);
+    expect(wrapper).toBeDefined();
+  });
+});

src/main.ts

@@ -0,0 +1,32 @@
+import './assets/main.css';
+
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import PrimeVue from 'primevue/config';
+import Material from '@primeuix/themes/material';
+import { createLogto, type LogtoConfig } from '@logto/vue';
+
+import App from './App.vue';
+import router from './router';
+
+console.log('================', import.meta.env);
+
+const logtoConfig: LogtoConfig = {
+  endpoint: import.meta.env.VITE_LOGTO_ENDPOINT,
+  appId: import.meta.env.VITE_LOGTO_APP_ID,
+};
+
+console.log(logtoConfig);
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+app.use(PrimeVue, {
+  theme: {
+    preset: Material,
+  },
+});
+app.use(createLogto, logtoConfig);
+
+app.mount('#app');

src/router/index.ts

@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('../views/AboutView.vue'),
+    },
+    {
+      path: '/callback',
+      name: 'callback',
+      component: () => import('../views/CallbackView.vue'),
+    },
+  ],
+});
+
+export default router;

src/views/AboutView.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="about">about</div>
+</template>

src/views/CallbackView.vue

@@ -0,0 +1,12 @@
+<template>
+  <p v-if="isLoading">Redirecting...</p>
+</template>
+
+<script lang="ts" setup>
+import { useHandleSignInCallback } from '@logto/vue';
+import router from '@/router';
+
+const { isLoading } = useHandleSignInCallback(() => {
+  router.push('/');
+});
+</script>

src/views/HomeView.vue

@@ -0,0 +1,43 @@
+<template>
+  <main class="text-3x1 font-bold underline">
+    <p>home</p>
+    <button v-on:click="onClickSignOut()" v-if="isAuthenticated">Sign Out</button>
+    <button v-on:click="onClickSignIn()" v-else>Sign In</button>
+    <div v-if="isAuthenticated && user">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(value, key) in user" :key="key">
+            <td>{{ key }}</td>
+            <td>{{ typeof value === 'string' ? value : JSON.stringify(value) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</template>
+
+<script lang="ts" setup>
+import { useLogto, type IdTokenClaims } from '@logto/vue';
+import { ref } from 'vue';
+
+console.log(import.meta.env);
+
+const hostname = import.meta.env.VITE_HOSTNAME;
+const { signIn, signOut, isAuthenticated, getIdTokenClaims } = useLogto();
+const onClickSignIn = () => signIn(`${hostname}/callback`);
+const onClickSignOut = () => signOut(hostname);
+
+const user = ref<IdTokenClaims>();
+if (isAuthenticated.value) {
+  (async () => {
+    const claims = await getIdTokenClaims();
+    user.value = claims;
+  })();
+}
+</script>