Auth2 0 (#141)

* first step of auth

* fix: auth 2.0

apps/microservices/auth/src/auth.service.ts

@@ -27,15 +27,15 @@ export class AuthService {
   async logout(req, res) {
     if (req.cookies['syncit-session-id']) {
       await prisma.session.deleteMany({
-        where: { id: req.cookies.sessionID },
+        where: { id: req.cookies['syncit-session-id'] },
       });
     }
     res.cookie('syncit-session-id', 0, {
       maxAge: -1,
       path: '/',
       httpOnly: true,
     });
-    res.status(200).end(res.getHeader('Set-Cookie'));
+    res.status(200).send({ success: true });
   }
 
   async login(req, res) {
@@ -129,13 +129,21 @@ export class AuthService {
 
   async me(req, res) {
     if (req.cookies['syncit-session-id']) {
-      const { user } = await prisma.session.findFirst({
-        where: { id: req.cookies.sessionID },
-        include: { user: true },
-      });
-      if (user?.id) {
-        res.status(200).json({ user });
-        return;
+      try {
+        const { userId } = await prisma.session.findFirstOrThrow({
+          where: { id: req.cookies['syncit-session-id'] },
+        });
+        const user = await prisma.user.findFirstOrThrow({
+          where: { id: userId },
+        });
+
+        if (user?.id) {
+          res.status(200).json({ user });
+          return;
+        }
+      } catch (e) {
+        console.error(e);
+        res.status(401).send('unauthorized');
       }
     }
     res.status(401).send('unauthorized');

apps/web/README.md

@@ -24,7 +24,7 @@ Inside your project, you'll see the following directory structure:
         └── ...
 ```
 
-- `src/routes`: Provides the directory-based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.dev/qwikcity/routing/overview/) for more info.
+- `src/routes`: Provides the directory-based routing, which can include a hierarchy of `layout.tsx` layout files, and an `_index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.dev/qwikcity/routing/overview/) for more info.
 
 - `src/components`: Recommended directory for components.
 

apps/web/eslint.config.mjs

@@ -1,10 +1,10 @@
-import typescriptEslint from "@typescript-eslint/eslint-plugin";
-import globals from "globals";
-import tsParser from "@typescript-eslint/parser";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import globals from 'globals';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -105,6 +105,7 @@ export default [
       "@typescript-eslint/no-unused-vars": ["error"],
       "@typescript-eslint/consistent-type-imports": "warn",
       "@typescript-eslint/no-unnecessary-condition": "warn",
+      'qwik/jsx-no-script-url': "off",
     },
   },
 ];

apps/web/package.json

@@ -21,14 +21,16 @@
     "start": "vite --open --mode ssr"
   },
   "dependencies": {
-    "@repo/db": "*"
+    "@repo/db": "*",
+    "set-cookie-parser": "^2.7.1"
   },
   "devDependencies": {
     "@builder.io/qwik": "^1.9.1",
     "@builder.io/qwik-city": "^1.9.1",
     "@modular-forms/qwik": "^0.28.1",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
+    "@types/set-cookie-parser": "^2.4.10",
     "@typescript-eslint/eslint-plugin": "7.16.1",
     "@typescript-eslint/parser": "7.16.1",
     "autoprefixer": "^10.4.19",

apps/web/src/components/sidebar/index.tsx

@@ -1,9 +1,10 @@
-import { component$ } from "@builder.io/qwik";
-import { Link } from "@builder.io/qwik-city";
-import Image from "~/media/cal-sync-logo.png?jsx";
-import { UserMenu } from "~/components/sidebar/user-menu";
+import { component$ } from '@builder.io/qwik';
+import { Link } from '@builder.io/qwik-city';
+import Image from '~/media/cal-sync-logo.png?jsx';
+import { UserMenu } from '~/components/sidebar/user-menu';
 
 export const Index = component$(() => {
+
   return (
     <div class="flex h-screen w-80 flex-col justify-between bg-base-200 p-4">
       <div class="flex w-full flex-col">
@@ -16,7 +17,7 @@ export const Index = component$(() => {
             <h2 class="menu-title">Settings</h2>
             <ul>
               <li>
-                <Link href="/settings/calendar">
+                <Link href="/">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"

apps/web/src/components/sidebar/user-menu.tsx

@@ -1,34 +1,36 @@
-import { component$, useContext } from "@builder.io/qwik";
-import { Link } from "@builder.io/qwik-city";
-import type { IAuthContext } from "~/providers/auth";
-import { AuthContext } from "~/providers/auth";
+import { component$ } from '@builder.io/qwik';
+import { Link } from '@builder.io/qwik-city';
+import { useSession, useSignOut } from '~/routes/plugin@auth';
 
 export const UserMenu = component$(() => {
-  const { user, logout } = useContext<IAuthContext>(AuthContext);
+  const session = useSession();
+  const signOut = useSignOut();
 
   return (
     <div class="card flex flex-row items-center justify-between bg-base-100 p-4">
       <div class="flex flex-1 items-center gap-4">
-        {user.value?.avatar ? (
+        {session.value?.avatar ? (
           <div class="avatar">
             <div class="w-24 rounded-full">
-              <img src={user.value.avatar} alt={user.value.name ?? "avatar"} />
+              <img src={session.value.avatar} alt={session.value.name ?? 'avatar'} />
             </div>
           </div>
         ) : (
           <div class="avatar placeholder">
             <div class="w-12 rounded-full bg-neutral text-neutral-content">
               <span>
-                {user.value?.name?.[0]}{" "}
-                {user.value?.name?.[user.value.name.indexOf(" ") + 1]}
+                {session.value?.name?.[0]}{' '}
+                {session.value?.name?.[session.value.name.indexOf(' ') + 1]}
               </span>
             </div>
           </div>
         )}
-        <div>{user.value?.name}</div>
+        <div>{session.value?.name}</div>
       </div>
       <div class="tooltip" data-tip="Logout">
-        <Link onClick$={() => logout()} class="btn btn-sm">
+        <Link
+          onClick$={() => signOut.submit({ redirectTo: '/auth/login' })}
+          class="btn btn-sm">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"