Tutorial: Username and password auth in Astro
Before starting, make sure you've set up your database and middleware as described in the Getting started page.
An example project based on this tutorial is also available. You can clone the example locally or open it in StackBlitz.
npx degit https://github.com/lucia-auth/examples/astro/username-and-password <directory_name>
Update database
Add a username
and password_hash
column to your user table.
column | type | attributes |
---|---|---|
username |
string |
unique |
password_hash |
string |
Create a DatabaseUserAttributes
interface in the module declaration and add your database columns. By default, Lucia will not expose any database columns to the User
type. To add a username
field to it, use the getUserAttributes()
option.
import { Lucia } from "lucia";
export const lucia = new Lucia(adapter, {
sessionCookie: {
attributes: {
secure: import.meta.env.PROD
}
},
getUserAttributes: (attributes) => {
return {
// attributes has the type of DatabaseUserAttributes
username: attributes.username
};
}
});
declare module "lucia" {
interface Register {
Lucia: typeof lucia;
DatabaseUserAttributes: DatabaseUserAttributes;
}
}
interface DatabaseUserAttributes {
username: string;
}
Sign up user
Create pages/signup.astro
and set up a basic form.
<!--pages/signup.astro-->
<html lang="en">
<body>
<h1>Sign up</h1>
<form method="post" action="/api/signup">
<label for="username">Username</label>
<input id="username" name="username" />
<label for="password">Password</label>
<input id="password" name="password" />
<button>Continue</button>
</form>
</body>
</html>
Create an API route in pages/api/signup.ts
. First, do a very basic input validation. Hash the password, generate a new user ID, and create a new user. If successful, create a new session with Lucia.createSession()
and set a new session cookie.
// pages/api/signup.ts
import { lucia } from "@lib/auth";
import { hash } from "@node-rs/argon2";
import { generateIdFromEntropySize } from "lucia";
import type { APIContext } from "astro";
export async function POST(context: APIContext): Promise<Response> {
const formData = await context.request.formData();
const username = formData.get("username");
// username must be between 4 ~ 31 characters, and only consists of lowercase letters, 0-9, -, and _
// keep in mind some database (e.g. mysql) are case insensitive
if (
typeof username !== "string" ||
username.length < 3 ||
username.length > 31 ||
!/^[a-z0-9_-]+$/.test(username)
) {
return new Response("Invalid username", {
status: 400
});
}
const password = formData.get("password");
if (typeof password !== "string" || password.length < 6 || password.length > 255) {
return new Response("Invalid password", {
status: 400
});
}
const userId = generateIdFromEntropySize(10); // 16 characters long
const passwordHash = await hash(password, {
// recommended minimum parameters
memoryCost: 19456,
timeCost: 2,
outputLen: 32,
parallelism: 1
});
// TODO: check if username is already used
await db.table("user").insert({
id: userId,
username: username,
password_hash: passwordHash
});
const session = await lucia.createSession(userId, {});
const sessionCookie = lucia.createSessionCookie(session.id);
context.cookies.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
return context.redirect("/");
}
Argon2id should be your first choice for hashing passwords, followed by Scrypt and Bcrypt. Hashing is by definition computationally expensive so you should use the most performant option for your runtime.
- For Node.js we recommend using
@node-rs/argon2
. - For Bun, we recommend using
Bun.password
. - Use Deno-specific packages for Deno.
- For other runtimes (e.g. Cloudflare Workers), your choice is very limited.
@noble/hashes
provides pure-js implementations of various hashing algorithms, but because it's written in JS, you may hit into CPU limitations of your service. If possible, avoid these runtimes when you need to hash passwords.
Make sure to check the recommended minimum parameters for your hashing algorithm.
Sign in user
Create pages/login.astro
and set up a basic form.
<!--pages/login.astro-->
<html lang="en">
<body>
<h1>Sign in</h1>
<form method="post" action="/api/login">
<label for="username">Username</label>
<input id="username" name="username" />
<label for="password">Password</label>
<input id="password" name="password" />
<button>Continue</button>
</form>
</body>
</html>
Create an API route as pages/api/signup.ts
. First, do a very basic input validation. Get the user with the username and verify the password. If successful, create a new session with Lucia.createSession()
and set a new session cookie.
// pages/api/login.ts
import { lucia } from "@lib/auth";
import { verify } from "@node-rs/argon2";
import type { APIContext } from "astro";
export async function POST(context: APIContext): Promise<Response> {
const formData = await context.request.formData();
const username = formData.get("username");
if (
typeof username !== "string" ||
username.length < 3 ||
username.length > 31 ||
!/^[a-z0-9_-]+$/.test(username)
) {
return new Response("Invalid username", {
status: 400
});
}
const password = formData.get("password");
if (typeof password !== "string" || password.length < 6 || password.length > 255) {
return new Response("Invalid password", {
status: 400
});
}
const existingUser = await db
.table("username")
.where("username", "=", username.toLowerCase())
.get();
if (!existingUser) {
// NOTE:
// Returning immediately allows malicious actors to figure out valid usernames from response times,
// allowing them to only focus on guessing passwords in brute-force attacks.
// As a preventive measure, you may want to hash passwords even for invalid usernames.
// However, valid usernames can be already be revealed with the signup page among other methods.
// It will also be much more resource intensive.
// Since protecting against this is non-trivial,
// it is crucial your implementation is protected against brute-force attacks with login throttling etc.
// If usernames are public, you may outright tell the user that the username is invalid.
return new Response("Incorrect username or password", {
status: 400
});
}
const validPassword = await verify(existingUser.password, password, {
memoryCost: 19456,
timeCost: 2,
outputLen: 32,
parallelism: 1
});
if (!validPassword) {
return new Response("Incorrect username or password", {
status: 400
});
}
const session = await lucia.createSession(userId, {});
const sessionCookie = lucia.createSessionCookie(session.id);
context.cookies.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
return context.redirect("/");
}
Validate requests
You can validate requests by checking locals.user
. The field user.username
is available since we defined the getUserAttributes()
option. You can protect pages, such as /
, by redirecting unauthenticated users to the login page.
const user = context.locals.user;
if (!user) {
return context.redirect("/login");
}
const username = user.username;
Sign out
Sign out users by invalidating their session with Lucia.invalidateSession()
. Make sure to remove their session cookie by setting a blank session cookie created with Lucia.createBlankSessionCookie()
.
// pages/api/logout.ts
import { lucia } from "@lib/auth";
import type { APIContext } from "astro";
export async function POST(context: APIContext): Promise<Response> {
if (!context.locals.session) {
return new Response(null, {
status: 401
});
}
await lucia.invalidateSession(context.locals.session.id);
const sessionCookie = lucia.createBlankSessionCookie();
context.cookies.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
return context.redirect("/login");
}
<form method="post" action="/api/logout">
<button>Sign out</button>
</form>