<script setup lang="ts">
definePageMeta({
  middleware: ['auth']
})
import { ref } from "vue";
import { useAuth } from "#imports";

// const { setUserInfoStore } = useUserInfoStore();
// const { getUserInfoStore } = storeToRefs(useUserInfoStore());
const { data, status, getCsrfToken, getProviders, signOut, getSession } = useAuth()
const tokens = ref('')
onMounted(async () => {
  // $fetch(`/api/auth/protected`).then(res => console.log('ini responnya',res))
  const headers = useRequestHeaders(['cookie']) as HeadersInit
  const { data: token } = await useFetch('/api/token', { headers })
  tokens.value = token.value
})
const getUserFromComposable = () => {
}
</script>
<template>
  <v-row>
    <v-col cols="12" md="12">
      <v-card elevation="10">
        <v-card-item>
          <!-- <pre><span>Providers:</span> {{ getUserInfoStore }}</pre> -->
          <h5 class="text-h5 mb-3">Sample Page</h5>
          <p class="text-body-1">This is a sample page</p>
          <div class="mt-4">
            <!-- <v-btn @click="getUserFromComposable" color="primary" variant="outlined" block>useComposables</v-btn> -->

            <!-- <pre><span>Providers:</span> {{ tokens }}</pre> -->
          </div>
        </v-card-item>
      </v-card>
    </v-col>
  </v-row>
</template>
