Nuxt-iron-session NPM

nuxt-iron-session

🛠 Add stateless session support for Nuxt apps using signed and encrypted cookies. Powered by iron-session.

The session data is stored in encrypted cookies ("seals"). And only your server can decode the session data. There are no session ids, making iron sessions "stateless" from the server point of view.

Demo https://nuxt-iron-session.vercel.app

Installation

npm install nuxt-iron-session

Usage

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-iron-session'],
  session: {
    cookieName: 'yourapp_cookiename',
    password: 'complex_password_at_least_32_characters_long',
    cookieOptions: {
      secure: process.env.NODE_ENV === 'production'
    }
  }
})

API Routes

// ~/server/api/login.ts
export default defineEventHandler((event) => {
  // get user from database then:
  event.context.session.user = {
    id: 69,
    admin: true,
  }
  await event.context.session.save()
  return { ok: true }
})

// ~/server/api/user.ts
export default defineEventHandler((event) => {
  return { user: event.context.session.user }
})

// ~/server/api/logout.ts
export default defineEventHandler((event) => {
  await event.context.session.destroy()
  return { ok: true }
})

Components

<script lang="ts">
const { ssrContext } = useNuxtApp()

// Available in client and server. Unique to each request.
const session = useState('session', () => ssrContext?.event?.context?.session)
</script>

Typing session data with TypeScript

declare module 'iron-session' {
  interface IronSessionData {
    user?: {
      id: number
      admin?: boolean
    }
  }
}

Usage with h3

import { createIronSessionMiddleware } from 'nuxt-iron-session/middleware'

const app = createApp()

app.use(createIronSessionMiddleware({}))
app.use('/api/user', eventHandler((event) => ({ user: event.context.session.user })))

Visit the iron-session docs to see the complete configuration.