Getting started in Nuxt
Installation
Install Lucia using your package manager of your choice.
npm install lucia
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, CloudFlare 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.
This documentation often references the Copenhagen Book. This is an open-source guide on implementing auth and should come in handy when implementing anything auth, including passkeys, multi-factor authentication, and a bit of cryptography. We recommend reading it to learn more about auth in web applications.
If you have any questions, join our Discord server!