How to Implement Custom Authentication in Astro with Lucia Auth

To implement custom authentication in an Astro application using Lucia Auth, follow this comprehensive guide that outlines the necessary steps, from setup to deployment.

Prerequisites

Before you begin, ensure you have the following:

Node.js 18 or later
A Neon account for PostgreSQL (or any other database of your choice)
A Vercel account for deployment

Step 1: Create a New Astro Application

Start by creating a new Astro project. You can do this using the following command:

npm create astro@latest

Follow the prompts to set up your project.

Step 2: Install Dependencies

Next, install Lucia Auth and any necessary database adapters. For PostgreSQL with Neon, run:

npm install lucia neon

You may also want to install Tailwind CSS for styling:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3: Set Up Database Connection

Create a connection to your PostgreSQL database. In your project, create a file named db.ts and configure your database schema:

import { defineDb, defineTable, column } from 'astro:db';

const User = defineTable({
  columns: {
    id: column.text({ primaryKey: true }),
    email: column.text({ unique: true }),
    hashed_password: column.text(),
  },
});

const Session = defineTable({
  columns: {
    id: column.text({ primaryKey: true }),
    expiresAt: column.date(),
    userId: column.text({
      references: () => User.columns.id,
    }),
  },
});

export default defineDb({
  tables: {
    User,
    Session,
  },
});

Step 4: Initialize Lucia Auth

Create a new file named auth.ts to initialize Lucia with your database adapter:

import { Lucia } from 'lucia';
import { adapter } from './db'; // Adjust the import based on your structure

export const lucia = new Lucia(adapter, {
  sessionCookie: {
    attributes: {
      secure: import.meta.env.PROD,
    },
  },
});

Step 5: Create Authentication Routes

Create a signup API route in src/pages/api/signup.ts:

import { lucia } from '@lib/auth';
import { hash } from '@node-rs/argon2';
import type { APIContext } from 'astro';

export async function POST(context: APIContext): Promise<Response> {
  const { email, password } = await context.request.json();

  const hashedPassword = await hash(password);
  const user = await lucia.createUser({ email, hashed_password: hashedPassword });

  const session = await lucia.createSession(user.id);

  context.cookies.set(session.cookie.name, session.cookie.value, session.cookie.attributes);

  return new Response(JSON.stringify({ user }), { status: 201 });
}

Create a login API route in src/pages/api/login.ts:

import { lucia } from '@lib/auth';
import type { APIContext } from 'astro';

export async function POST(context: APIContext): Promise<Response> {
  const { email, password } = await context.request.json();

  const user = await lucia.getUser(email);

  if (user && await lucia.verifyPassword(user.hashed_password, password)) {
    const session = await lucia.createSession(user.id);

    context.cookies.set(session.cookie.name, session.cookie.value, session.cookie.attributes);

    return new Response(JSON.stringify({ user }), { status: 200 });
  }

  return new Response('Unauthorized', { status: 401 });
}

Sign Out Route

Create a sign-out endpoint in src/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');
}

Step 6: Protect Routes

To protect specific routes in your application (e.g., /protected), check for an authenticated user in the request handler:

export async function GET(context: APIContext): Promise<Response> {
  if (!context.locals.session) {
    return new Response('Forbidden', { status: 403 });
  }

  // Serve protected content here
}

Step 7: Deploy to Vercel

Once you’ve completed development and testing locally, deploy your application to Vercel.

Push your code to GitHub.
Go to the Vercel dashboard and create a new project.
Link it to your GitHub repository.
Set up environment variables in Vercel that match those in your local .env file.
Deploy!

Conclusion

By following these steps, you can implement custom authentication in an Astro application using Lucia Auth. This setup allows for secure user management and access control tailored to your application’s needs. For further customization and advanced features like OAuth integration or password reset functionalities, refer to the Lucia Auth documentation for additional guidance[1][2][3][4].

Astro

Web Development

Speed Optimization

Auth