Integrasi dengan Nuxt 3

Berikut adalah panduan implementasi menggunakan module resmi Logto untuk Nuxt 3. Ini adalah cara yang kami gunakan pada Super App Denpasar.

Instalasi

npm install @logto/nuxt

Konfigurasi (nuxt.config.ts)

Tambahkan modul dan konfigurasi kredensial Anda:

export default defineNuxtConfig({
  modules: ['@logto/nuxt'],
  
  logto: {
    endpoint: '[https://dev-sso.denpasarkota.go.id](https://dev-sso.denpasarkota.go.id)',
    appId: '<APP_ID_DARI_KOMINFO>',
    appSecret: '<APP_SECRET_DARI_KOMINFO>',
    cookieEncryptionKey: 'generate-random-string-32-chars',
    // Pastikan path ini sesuai dengan yang didaftarkan
    pathnames: {
        signIn: '/auth/login',    // URL untuk memicu login
        signOut: '/auth/logout',  // URL untuk memicu logout
        callback: '/auth/callback' // URL penerima redirect
    },
    scopes: [email, phone, custom_data], // tambah sesuai kebutuhan scope untuk mengambil data tambahan selain data default/profile
    fetchUserInfo: true, // ubah jadi true supaya dapat mengambil data tambahan pada object custom_data 
  },
  
  // Opsi runtime config untuk keamanan (opsional tapi disarankan)
  runtimeConfig: {
    logto: {
        appSecret: process.env.LOGTO_APP_SECRET
    }
  }
})

Penggunaan di Halaman (Vue Component)

Untuk menampilkan status login dan tombol:

<script setup lang="ts">
const { user, signIn, signOut } = useLogto()
</script>

<template>
  <div>
    <div v-if="user">
      <p>Halo, {{ user.name }} ({{ user.email }})</p>
      <button @click="signOut">Keluar</button>
    </div>
    
    <div v-else>
      <p>Silakan login untuk mengakses layanan.</p>
      <button @click="signIn">Login SSO Denpasar</button>
    </div>
  </div>
</template>

Tips

Mapping Data Data user standar yang akan Anda terima biasanya meliputi: sub (ID unik), name, email, picture, dan username (jika ada).