OAuth2 implementation

README.md

@@ -10,18 +10,34 @@ OAuth 2.0 authorization server implementation. Follows specification defined in:
 
 ## Local Development
 
-Steps to run the app:
-1. Create the `.env` file: `cp .dev.env .env`
-2. Start up the database docker container: `docker-compose up -d`
-3. Set up the dev database: `npm run dev-db`
-4. Start the local server: `npm run dev`
-5. If working on css styles run `npm run styles -- --watch` separately.
-6. Access in browser on `http://127.0.0.1:3000/`
+### First time setup
+
+1. Create the `.env` file: `cp .dev.env .env`.
+2. Install npm packages: `npm ci`.
+3. `npx playwright install --with-deps` to install Playwright browsers for e2e testing.
+
+### Starting the server 
+
+1. Start up the database docker container: `docker-compose up -d`.
+2. Set up the dev database: `npm run dev-db`.
+3. Start the local server: `npm run dev`.
+4. If working on css styles run `npm run styles -- --watch` separately.
+5. Access in browser on `http://127.0.0.1:3000/`.
+
+### Testing
+
+To run unit and integration tests: `npm t`
+
+To run end to end tests:
+1. ***Optional*** `npm run dev` to start up the dev server. Playwright will do this automatically if the server is not running, but this is useful if you wish to see server errors in the console.
+2. `npm run e2e` to run the tests.
 
 ## Tech used
 
 - Fastify web framework
 - PostgreSQL for database
 - ejs for templating
 - Tailwind for styles
+- Vitest for unit and integration testing
+- Playwright for e2e testing
 - biome.js for linting and enforcing code style

biome.json

@@ -8,10 +8,12 @@
 		"rules": {
 			"recommended": true,
 			"complexity": {
-				"useArrowFunction": "off"
+				"useArrowFunction": "off",
+				"noForEach": "off"
 			},
 			"suspicious": {
-				"useAwait": "error"
+				"useAwait": "error",
+				"noExplicitAny": "off"
 			}
 		}
 	},

database/createDummyData.ts

@@ -1,17 +1,24 @@
 import * as argon2 from "argon2";
 import { query, transactionQuery } from "../database/database.js";
 
+/** Only for use in tests. */
+export const DUMMY_CLIENT_ID = "23f0706a-f556-477f-a8cb-808bd045384f";
+export const DUMMY_CLIENT_NAME = "Lumon Industries";
+export const DUMMY_CLIENT_REDIRECT_URI = "http://127.0.0.1:3000/";
+export const DUMMY_CLIENT_SECRET = "secret_123";
+
 /**
  * Fills the database with dummy data.
  *
  * For use in automated tests and local testing. Deletes all existing data.
  */
 export async function createDummyData() {
 	const password = "test";
-	await query("TRUNCATE clients");
-	await query("TRUNCATE sessions, users");
 
-	console.log("Creating dummy data ");
+	console.log("Deleting all existing data");
+	await query("TRUNCATE clients, authorization_tokens, access_tokens, sessions, users");
+
+	console.log("Creating dummy data");
 
 	await transactionQuery(
 		async (client) => {
@@ -27,7 +34,24 @@ export async function createDummyData() {
 			hash = await argon2.hash(password);
 			await client.query(queryText, ["Irving", "Bailiff", "IrvingB", hash]);
 			console.log("Created user IrvingB");
+			await client.query(queryText, ["Dylan", "George", "DylanG", hash]);
+			console.log("Created user DylanG");
 			console.log('All users use same password: "test"');
+			console.log("---");
+
+			console.log("Creating clients");
+			await client.query(
+				"INSERT INTO clients(id, name, redirect_uri, secret, description) VALUES($1, $2, $3, $4, $5) RETURNING id",
+				[
+					DUMMY_CLIENT_ID,
+					DUMMY_CLIENT_NAME,
+					DUMMY_CLIENT_REDIRECT_URI,
+					await argon2.hash(DUMMY_CLIENT_SECRET),
+					"A dummy client used for testing and development purposes.",
+				],
+			);
+			console.log(`Created a test client ${DUMMY_CLIENT_NAME} (id: ${DUMMY_CLIENT_ID})`);
+			console.log(`Client redirect URI: ${DUMMY_CLIENT_REDIRECT_URI}`);
 		},
 		{ destroyClient: true },
 	);

database/database.test.ts

@@ -1,29 +1,36 @@
 import type { QueryResult } from "pg";
 import { v4 as uuidv4 } from "uuid";
-import { beforeAll, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it } from "vitest";
 import { query, transactionQuery } from "./database.js";
 
 const passwordHash =
 	"$argon2id$v=19$m=65536,t=3,p=4$P5wGfnyG6tNP2iwvWPp9SA$Gp3wgJZC1xe6fVzUTMmqgCGgFPyZeCt1aXjUtlwSMmo";
 
 describe("database adapter", () => {
-	beforeAll(async () => {
-		await query("TRUNCATE users CASCADE");
+	const usersForCleanup: string[] = [];
+
+	afterEach(async () => {
+		for (const username of usersForCleanup) {
+			await query("DELETE FROM users WHERE username = $1", [username]);
+		}
 	});
 
 	it("should support storing and fetching data from database", async () => {
 		await query(
 			'INSERT INTO users(firstname, lastname, username, "password") VALUES($1, $2, $3, $4)',
-			["Mark", "Scout", "MarkS", passwordHash],
+			["Harmony", "Cobel", "HarmonyC", passwordHash],
 		);
+		usersForCleanup.push("HarmonyC");
+
 		const result = await query(
 			"SELECT firstname, lastname, username, password FROM users WHERE username = $1",
-			["MarkS"],
+			["HarmonyC"],
 		);
+
 		expect(result.rowCount).toEqual(1);
-		expect(result.rows[0].username).toEqual("MarkS");
-		expect(result.rows[0].firstname).toEqual("Mark");
-		expect(result.rows[0].lastname).toEqual("Scout");
+		expect(result.rows[0].username).toEqual("HarmonyC");
+		expect(result.rows[0].firstname).toEqual("Harmony");
+		expect(result.rows[0].lastname).toEqual("Cobel");
 		expect(result.rows[0].password).toEqual(passwordHash);
 	});
 
@@ -45,9 +52,10 @@ describe("database adapter", () => {
 			expectedUserId = uuidv4();
 			return await client.query(
 				'INSERT INTO users(id, firstname, lastname, username, "password") VALUES($1, $2, $3, $4, $5) RETURNING id',
-				[expectedUserId, "Helly", "Riggs", "HellyR", passwordHash],
+				[expectedUserId, "Seth", "Milchick", "SethM", passwordHash],
 			);
 		})) as QueryResult;
+		usersForCleanup.push("SethM");
 
 		expect(result.rowCount).toEqual(1);
 		expect(result.rows[0].id).toEqual(expectedUserId);

e2e/authentication.spec.ts

@@ -52,6 +52,59 @@ test("Login validation error", async ({ page }) => {
 	await expect(page.getByRole("heading", { name: "Welcome Mark Scout! 🎉" })).toBeVisible();
 });
 
+test("Login should preserve query parameters on validation error", async ({ page }) => {
+	await page.goto(
+		"/login?client_id=123&response_type=code&redirect_uri=https://www.example.com&scope=openid",
+	);
+
+	// Everything empty.
+	await page.getByRole("button", { name: "Sign in" }).click();
+	await expect(page.getByText("Wrong username or password.")).toBeVisible();
+	expectQueryParametersToBePreserved(page.url());
+
+	// Unknown username
+	await page.getByLabel(/Username/).fill("notMarkS");
+	await page.getByLabel(/Password/).fill("test");
+	await page.getByRole("button", { name: "Sign in" }).click();
+	await expect(page.getByText("Wrong username or password.")).toBeVisible();
+	expectQueryParametersToBePreserved(page.url());
+
+	// Correct username, wrong password.
+	await page.getByLabel(/Username/).fill("MarkS");
+	await page.getByLabel(/Password/).fill("wrong password");
+	await page.getByRole("button", { name: "Sign in" }).click();
+	await expect(page.getByText("Wrong username or password.")).toBeVisible();
+	expectQueryParametersToBePreserved(page.url());
+});
+
+test("Login should remove error query parameter once user inputs correct credentials", async ({
+	page,
+}) => {
+	await page.goto(
+		"/login?client_id=123&response_type=code&redirect_uri=https://www.example.com&scope=openid",
+	);
+
+	// Cause the error by submitting invalid data.
+	await page.getByRole("button", { name: "Sign in" }).click();
+	await expect(page.getByText("Wrong username or password.")).toBeVisible();
+	expect(page.url()).toContain("error=1");
+
+	// Enter correct credentials.
+	await page.getByLabel(/Username/).fill("MarkS");
+	await page.getByLabel(/Password/).fill("test");
+	await page.getByRole("button", { name: "Sign in" }).click();
+	expectQueryParametersToBePreserved(page.url());
+	expect(page.url()).not.toContain("error=1");
+});
+
+function expectQueryParametersToBePreserved(url: string) {
+	const loginPageSearchParams = new URL(url).searchParams;
+	expect(loginPageSearchParams.get("client_id")).toEqual("123");
+	expect(loginPageSearchParams.get("response_type")).toEqual("code");
+	expect(loginPageSearchParams.get("redirect_uri")).toEqual("https://www.example.com");
+	expect(loginPageSearchParams.get("scope")).toEqual("openid");
+}
+
 test("Create new account happy path", async ({ page, browserName }) => {
 	await page.goto("/");