Log failed login attempts to the database

app/db/queries.server.ts

@@ -1,20 +1,29 @@
 import { open } from "sqlite";
 import sqlite3 from "sqlite3";
 
-/*
- * The `users` table DB schema
- */
+// The `users` table DB schema
 interface User {
   id: number;
   email: string;
   password: string;
   username: string;
 }
 
+// The `login_attempts` table DB schema
+interface LoginAttempt {
+  id: number;
+  email: string;
+  visitor_id?: string;
+  created_at: number;
+}
+
 /*
  * Loads user that matches the email and password provided
  */
-export async function findUserByCredentials(email: string, password: string) {
+export async function findUserByCredentials(
+  email: string,
+  password: string
+): Promise<User | undefined> {
   const db = await openDB();
 
   return await db.get<User>(
@@ -28,6 +37,26 @@ export async function findUserByCredentials(email: string, password: string) {
   );
 }
 
+/**
+ * Creates new `login_attempt` record in the DB
+ *
+ * @param email - email used for authentication
+ * @param visitorId - the unique browser/visitor identifier
+ */
+export async function logFailedLoginAttempt(
+  email: string,
+  visitorId: string
+): Promise<void> {
+  const db = await openDB();
+
+  await db.run(
+    "INSERT INTO login_attempts (email, visitor_id, created_at) VALUES (?, ?, ?)",
+    email,
+    visitorId,
+    Date.now()
+  );
+}
+
 const openDB = async () => {
   return await open({
     filename: "./app/db/db.sqlite",

app/routes/login.tsx

@@ -7,7 +7,10 @@ import {
 } from "@remix-run/react";
 
 import { delay } from "../utils/delay";
-import { findUserByCredentials } from "../db/queries.server";
+import {
+  findUserByCredentials,
+  logFailedLoginAttempt,
+} from "../db/queries.server";
 
 // describes the reponse type of the action
 interface FormResponse {
@@ -24,15 +27,18 @@ export const action: ActionFunction = async ({ request }) => {
   // An artificial delay for the demonstration purposes
   await delay(1000);
 
+  // parse form data provided
   const data = await request.formData();
+  const email = data.get("email") as string;
+  const password = data.get("password") as string;
 
-  const user = await findUserByCredentials(
-    data.get("email") as string,
-    data.get("password") as string
-  );
+  const user = await findUserByCredentials(email, password);
 
   // no such user found, return an error
   if (!user) {
+    const visitorId = "fake"; // TODO: replace with the real one
+    await logFailedLoginAttempt(email, visitorId);
+
     return json<FormResponse>({
       errorMessage: "Bad luck, please try different login or password!",
       errorCode: LoginErrorCode.wrongCredentials,