Add auth + build

Author: YummYume

bun.lockb

@@ -5,8 +5,7 @@
     "prisma"
   ],
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.0.1",
-    "@sveltejs/adapter-node": "^2.0.1",
+    "@sveltejs/adapter-node": "^2.0.2",
     "@sveltejs/enhanced-img": "^0.1.7",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tailwindcss/forms": "^0.5.7",

package.json

@@ -1,9 +1,17 @@
+import type { Auth as AuthType } from '$lib/server/auth';
+import type { PrismaClient } from '@prisma/client';
+import type { AuthRequest, Session } from 'lucia';
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
   namespace App {
     // interface Error {}
-    // interface Locals {}
+    interface Locals {
+      db: PrismaClient;
+      auth: AuthRequest;
+      session: Session | null;
+    }
     interface PageData {
       seo?: {
         title?: string;
@@ -16,6 +24,16 @@ declare global {
     // interface PageState {}
     // interface Platform {}
   }
+
+  namespace Lucia {
+    type Auth = AuthType;
+    type DatabaseUserAttributes = {
+      username: string;
+      disallowedIngredients: string | null;
+    };
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    type DatabaseSessionAttributes = {};
+  }
 }
 
 export {};

src/app.d.ts

@@ -0,0 +1,12 @@
+import { auth } from '$lib/server/auth';
+import { db } from '$lib/server/db';
+
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+  event.locals.db = db;
+  event.locals.auth = auth.handleRequest(event);
+  event.locals.session = await event.locals.auth.validate();
+
+  return resolve(event);
+};

src/hooks.server.ts

@@ -1,11 +1,8 @@
 import type { LayoutServerLoad } from './$types';
 
-export const load = (async () => {
+export const load = (async ({ locals }) => {
   return {
-    user: {
-      username: 'Carlos',
-      disallowedIngredients: ['chocolat'],
-    },
+    user: locals.session?.user,
     seo: {
       title: 'CookConnect',
       meta: {

src/routes/+layout.server.ts

@@ -7,6 +7,7 @@
 
   import type { LayoutData } from './$types';
 
+  import { enhance } from '$app/forms';
   import { page } from '$app/stores';
 
   export let data: LayoutData;
@@ -49,15 +50,17 @@
       <nav class="flex items-center lg:order-2 sm:mx-0 mx-auto">
         <ul class="contents">
           <li>
-            <button
-              type="button"
-              class="
+            <form method="POST" action="/?/logout" use:enhance>
+              <button
+                type="submit"
+                class="
                 text-gray-800 hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium
                 rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none
               "
-            >
-              Se déconnecter
-            </button>
+              >
+                Se déconnecter
+              </button>
+            </form>
           </li>
           <li>
             <a

src/routes/+layout.svelte

@@ -1,6 +1,16 @@
-import type { PageServerLoad } from './$types';
+import { fail, redirect } from '@sveltejs/kit';
+
+import { auth } from '$lib/server/auth';
+
+import type { Actions, PageServerLoad } from './$types';
+
+export const load = (async ({ locals }) => {
+  const { session } = locals;
+
+  if (!session) {
+    redirect(303, '/login');
+  }
 
-export const load = (async () => {
   return {
     seo: {
       title: 'CookConnect',
@@ -11,3 +21,24 @@ export const load = (async () => {
     },
   };
 }) satisfies PageServerLoad;
+
+export const actions = {
+  logout: async ({ locals, cookies }) => {
+    const { session } = locals;
+
+    if (!session) {
+      return fail(401, { error: "Vous n'êtes pas connecté." });
+    }
+
+    await auth.invalidateSession(session.sessionId);
+
+    const sessionCookie = auth.createSessionCookie(null);
+
+    cookies.set(sessionCookie.name, sessionCookie.value, {
+      ...sessionCookie.attributes,
+      path: sessionCookie.attributes.path ?? '/',
+    });
+
+    redirect(303, '/');
+  },
+} satisfies Actions;

src/routes/+page.server.ts

@@ -1,11 +1,17 @@
-import type { PageServerLoad } from './$types';
+import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
+import { fail, redirect } from '@sveltejs/kit';
+
+import type { Actions, PageServerLoad } from './$types';
+
+export const load = (async ({ locals }) => {
+  const { session } = locals;
+
+  if (!session) {
+    redirect(303, '/login');
+  }
 
-export const load = (async () => {
   return {
-    user: {
-      username: 'Carlos',
-      disallowedIngredients: 'chocolat',
-    },
+    user: session.user,
     seo: {
       title: 'Mon profil',
       meta: {
@@ -14,3 +20,68 @@ export const load = (async () => {
     },
   };
 }) satisfies PageServerLoad;
+
+export const actions = {
+  default: async ({ locals, request }) => {
+    const { db, session } = locals;
+    const data = await request.formData();
+
+    if (!session) {
+      redirect(303, '/login');
+    }
+
+    const username = data.get('username') as string;
+    const disallowedIngredients = data.get('disallowedIngredients') as string;
+
+    if (!username) {
+      return fail(422, { error: "Le nom d'utilisateur ne peut pas être vide." });
+    }
+
+    if (!/^[A-Za-z]+$/g.test(username)) {
+      return fail(422, {
+        error: "Le nom d'utilisateur ne doit contenir que des lettres.",
+      });
+    }
+
+    if (username.length < 3 || username.length > 20) {
+      return fail(400, {
+        error: "Le nom d'utilisateur doit être compris entre 3 et 20 caractères.",
+      });
+    }
+
+    if (disallowedIngredients) {
+      if (!/[a-zA-Z,]/.test(disallowedIngredients)) {
+        return fail(422, {
+          error: 'Les ingrédients ne doivent contenir que des lettres et des virgules.',
+        });
+      }
+    }
+
+    if (disallowedIngredients.length > 255) {
+      return fail(400, {
+        error: 'La liste des ingrédients à éviter ne peut pas dépasser 255 caractères.',
+      });
+    }
+
+    try {
+      await db.user.update({
+        where: { id: session.user.userId },
+        data: {
+          username,
+          disallowedIngredients,
+        },
+      });
+    } catch (e) {
+      if (e instanceof PrismaClientKnownRequestError && e.code === 'P2002') {
+        return fail(400, { error: "le nom d'utilisateur est déjà utilisé." });
+      }
+
+      // eslint-disable-next-line no-console
+      console.error('Error while updating user:', e);
+
+      return fail(500, {
+        error: "Oops... Quelque chose s'est mal passé. Veuillez réessayer plus tard.",
+      });
+    }
+  },
+} satisfies Actions;

src/routes/account/+page.server.ts

@@ -5,11 +5,16 @@
   import { prefersReducedMotion } from '$lib/utils/preferences';
   import { toasts } from '$lib/utils/toats';
 
-  import type { PageData } from './$types';
+  import type { ActionData, PageData } from './$types';
 
   import { enhance } from '$app/forms';
 
   export let data: PageData;
+  export let form: ActionData;
+
+  $: if (form?.error) {
+    toasts.error(form.error);
+  }
 </script>
 
 <h1 class="h1">Profil</h1>

src/routes/account/+page.svelte

@@ -1,12 +1,35 @@
+import { redirect } from '@sveltejs/kit';
+
 import type { PageServerLoad } from './$types';
-import type { Favourite, Recipe } from '@prisma/client';
 
 const ALLOWED_PER_PAGE = [10, 25, 50, 100];
 
-export const load = (async () => {
+export const load = (async ({ locals }) => {
+  const { session, db } = locals;
+
+  if (!session) {
+    redirect(303, '/login');
+  }
+
+  const [favourites, count] = await Promise.all([
+    db.favourite.findMany({
+      where: {
+        userId: session.user.userId,
+      },
+      include: {
+        recipe: true,
+      },
+    }),
+    db.favourite.count({
+      where: {
+        userId: session.user.userId,
+      },
+    }),
+  ]);
+
   return {
-    count: 0,
-    favourites: [] as (Favourite & { recipe: Recipe })[],
+    favourites,
+    count,
     allowedPerPage: ALLOWED_PER_PAGE,
     perPage: ALLOWED_PER_PAGE[0],
     totalPages: 1,