Getting started in Nuxt

Installation

Install Lucia using your package manager of your choice. While not strictly necessary, we recommend installing Oslo, which Lucia is built on, for various auth utilities (which a lot of the guides use).

npm install lucia@beta oslo

Initialize Lucia

Import Lucia and initialize it with your adapter. Refer to the Database page to learn how to set up your database and initialize the adapter. Make sure you configure the sessionCookie option and register your Lucia instance type.

• Configure the sessionCookie option
• Register your Lucia instance type

// server/utils/auth.ts
import { Lucia } from "lucia";

const adapter = new BetterSQLite3Adapter(db); // your adapter

export const lucia = new Lucia(adapter, {
	sessionCookie: {
		// IMPORTANT!
		attributes: {
			// set to `true` when using HTTPS
			secure: !process.dev
		}
	}
});

// IMPORTANT!
declare module "lucia" {
	interface Register {
		Lucia: typeof lucia;
	}
}

Polyfill

If you're using Node.js 18 or below, you'll need to polyfill the Web Crypto API. This is not required in Node.js 20, CouldFlare Workers, Deno, Bun, and Vercel Edge Functions. This can be done either by importing webcrypto, or by enabling an experimental flag.

import { webcrypto } from "node:crypto";

globalThis.crypto = webcrypto as Crypto;

node --experimental-web-crypto index.js

Set up middleware

We recommend setting up a middleware to validate requests. The validated user will be available as event.context.user. You can just copy-paste the code into server/middleware/auth.ts.

It's a bit verbose, but it just reads the session cookie, validates it, and sets a new cookie if necessary. Since Nuxt doesn't implement CSRF protection out of the box, it must be implemented. If you're curious about what's happening here, see the Validating requests page.

// server/middleware/auth.ts
import { verifyRequestOrigin } from "lucia";

import type { Session, User } from "lucia";

export default defineEventHandler(async (event) => {
	if (event.method !== "GET") {
		const originHeader = getHeader(event, "Origin") ?? null;
		const hostHeader = getHeader(event, "Host") ?? null;
		if (!originHeader || !hostHeader || !verifyRequestOrigin(originHeader, [hostHeader])) {
			return event.node.res.writeHead(403).end();
		}
	}

	const sessionId = getCookie(event, lucia.sessionCookieName) ?? null;
	if (!sessionId) {
		event.context.session = null;
		event.context.user = null;
		return;
	}

	const { session, user } = await lucia.validateSession(sessionId);
	if (session && session.fresh) {
		appendResponseHeader(event, "Set-Cookie", lucia.createSessionCookie(session.id).serialize());
	}
	if (!session) {
		appendResponseHeader(event, "Set-Cookie", lucia.createBlankSessionCookie().serialize());
	}
	event.context.session = session;
	event.context.user = user;
});

declare module "h3" {
	interface H3EventContext {
		user: User | null;
		session: Session | null;
	}
}

Next steps

You can learn all the concepts and APIs by reading the Basics section in the docs. If you prefer writing code immediately, check out the Tutorials page or the examples repository.

If you have any questions, join our Discord server!