44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
|
<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>
|