Logto auth module for Nuxt 3.
- Add
@welives/nuxt-logtodependency to your project
# Using pnpm
pnpm add @welives/nuxt-logto
# Using yarn
yarn add @welives/nuxt-logto
# Using npm
npm install @welives/nuxt-logto- Add
@welives/nuxt-logtoto themodulessection ofnuxt.config.ts
export default defineNuxtConfig({
modules: ['@welives/nuxt-logto'],
})- Configure it:
export default defineNuxtConfig({
modules: ['@welives/nuxt-logto'],
logto: {
endpoint: '<your-logto-endpoint>', // E.g. https://localhost:3001
appId: '<your-application-id>',
appSecret: '<your-app-secret-copied-from-console>',
cookieEncryptionKey: '<your-cookie-encrypt-key>',
cookieSecure: process.env.NODE_ENV === 'production',
origin: '<your-nuxt-app-origin>', // E.g. https://localhost:3000
resources: ['<your-resource-api>'], // optionally add a resource
},
})- Use the composable
<script setup lang="ts">
const { claims, userInfo, accessToken, signIn, signOut, signUp, fetchContext, fetchUserInfo, fetchAccessToken } =
useLogto()
</script>
<template>
<div>{{ JSON.stringify(claims) }}</div>
<br />
<div>{{ JSON.stringify(userInfo) }}</div>
<br />
<div>{{ JSON.stringify(accessToken) }}</div>
<br />
<div>
<button @click="() => signIn()">Sign In</button>
<button @click="() => signUp()">Sign Up</button>
<button @click="() => signOut()">Sign Out</button>
<button @click="() => fetchContext({ fetchUserInfo: true, getAccessToken: true })">fetchContext</button>
<button @click="() => fetchUserInfo()">fetchUserInfo</button>
<button @click="() => fetchAccessToken({ resource: 'https://localhost:4000/api' })">fetchAccessToken</button>
</div>
</template>That's it! You can now use Nuxt Logto in your Nuxt app ✨
export default defineNuxtConfig({
modules: ['@welives/nuxt-logto'],
logto: {
// ...
// append your api route
pathnames: {
signIn: '/logto/sign-in', // default '/sign-in'
signUp: '/logto/sign-up', // default '/sign-up'
signOut: '/logto/sign-out', // default '/sign-out'
callback: '/logto/callback', // default '/callback'
context: '/logto/context', // default '/logto/context'
userInfo: '/logto/user-info', // default '/logto/user-info'
accessToken: '/logto/access-token', // default '/logto/access-token'
},
},
})A sample project can be found at playground.
The minimal configuration to run the playground is (use .env file for example):
NUXT_LOGTO_ENDPOINT=<your-logto-endpoint>
NUXT_LOGTO_APP_ID=<your-logto-app-id>
NUXT_LOGTO_APP_SECRET=<your-logto-app-secret>
NUXT_LOGTO_COOKIE_ENCRYPTION_KEY=<random-string># Install dependencies
pnpm install
# Generate type stubs
pnpm run dev:prepare
# Develop with the playground
pnpm run dev
# Build the playground
pnpm run dev:build
# Run ESLint
pnpm run lint
# Run Vitest
pnpm run test
pnpm run test:watch
# Release new version
npm run release