튜토리얼: 암호키를 Nuxt.js에 통합하는 방법

.
├── .env
├── package.json
├── nuxt.config.ts
├── pages
|   ├── index.vue 
|   └── profile.vue
└── layouts 
    └── default.vue

npx nuxi@latest init passkeys-demo-nuxtjs
cd passkeys-demo-nuxtjs
npm install
npm run dev

VITE_CORBADO_PROJECT_ID=<your-project-id>

npm i @corbado/web-js
npm i -D @corbado/types

<script setup lang="ts">
  import Corbado from "@corbado/web-js"
  import { onMounted } from "vue";const isInitialized = useState('isInitialized', () => false);
  const projectId = import.meta.env.VITE_CORBADO_PROJECT_ID;
  onMounted(async () => {
    await Corbado.load({
      projectId: projectId,
      darkMode: "off"
    });
    isInitialized.value = true;
  });
</script>
<template>
  <div v-if="isInitialized">
    <slot/>
  </div>
</template>

<script setup lang="ts">
  import Corbado from "@corbado/web-js"
  import { onMounted } from "vue";const authElement = useState<HTMLDivElement | undefined>('authElement', () => undefined);
  onMounted(() => {
    if (authElement.value) {
      Corbado.mountAuthUI(authElement.value, {
        onLoggedIn: () => {
          navigateTo("/profile");
        },
      });
    }
  });
</script>
<template>
  <div ref="authElement"></div>
</template>

<script setup lang="ts">
  import Corbado from "@corbado/web-js"const user = Corbado.user;
  async function handleLogout() {
    await Corbado.logout();
    await navigateTo("/");
  }
</script>
<template>
  <div>
    <div v-if="user">
      <h1>Profile Page</h1>
      <p>
        User-ID: {{ user.sub }}
        <br />
        Email: {{ user.email }}
      </p>
      <button @click="handleLogout">Logout</button>
    </div>
    <div v-else>
      <p>You're not logged in.</p>
      <p>
        Please go back to <NuxtLink href="/">home</NuxtLink> to log in.
      </p>
    </div>
  </div>
</template>

npm run dev