feat: add full auth system

rtpa25 · May 12, 2024 · eaf8b37 · eaf8b37
1 parent 46c3e40
commit eaf8b37
Show file tree

Hide file tree

Showing 17 changed files with 340 additions and 61 deletions.
diff --git a/apps/api/src/controllers/user.controller.ts b/apps/api/src/controllers/user.controller.ts
@@ -1,28 +1,32 @@
 import { type NextFunction, type Request, type RequestHandler, type Response } from "express";
 
+import {
+  type UserCreateInputType,
+  type UserCreateOutputType,
+  type UserGetOutputType,
+} from "@repo/models";
+
 import { generateEncryptedToken, logger } from "@repo/lib";
 
-import { type UserCreateType } from "../schemas/user.schema";
 import { cookieService } from "../services/cookie.service";
 import { userService } from "../services/user.service";
 
 class UserController {
-  createUser: RequestHandler = async (
-    req: Request<object, object, UserCreateType["body"]>,
-    res: Response,
+  upsertUser: RequestHandler = async (
+    req: Request<object, object, UserCreateInputType["body"]>,
+    res: Response<UserCreateOutputType>,
     next: NextFunction,
   ) => {
     try {
-      const user = await userService.createUser(req.body.email);
-      logger.info(`User created: ${user.id}`);
+      const user = await userService.upsertUser(req.body.email);
 
       const { token } = await generateEncryptedToken({
         uid: user.id,
       });
 
       cookieService.setTokenCookie({ res, token });
 
-      res.status(201).send(user);
+      res.status(201).json({ user });
     } catch (error) {
       logger.error(error);
       next(error);
@@ -34,18 +38,22 @@ class UserController {
       const user = req.user;
       await userService.deleteUser(user.id);
       cookieService.clearTokenCookie({ res });
-      res.status(204).send();
+      res.status(204);
     } catch (error) {
       logger.error(error);
       next(error);
     }
   };
 
-  getCurrentUser: RequestHandler = async (req: Request, res: Response, next: NextFunction) => {
+  getCurrentUser: RequestHandler = async (
+    req: Request,
+    res: Response<UserGetOutputType>,
+    next: NextFunction,
+  ) => {
     try {
       const user = req.user;
-      res.status(200).send({
-        userId: user.id,
+      res.status(200).json({
+        user,
       });
     } catch (error) {
       logger.error(error);

diff --git a/apps/api/src/middlewares/auth.middleware.ts b/apps/api/src/middlewares/auth.middleware.ts
@@ -31,6 +31,8 @@ export const authenticate: RequestHandler = async (
     req.user = {
       id: res.uid,
     };
+
+    next();
   } catch (error) {
     logger.error(error);
     next(error);

diff --git a/apps/api/src/middlewares/validate.middleware.ts b/apps/api/src/middlewares/validate.middleware.ts
@@ -3,7 +3,9 @@ import { type AnyZodObject } from "zod";
 
 import { AppError } from "@repo/models";
 
-const validate = (schema: AnyZodObject) => (req: Request, res: Response, next: NextFunction) => {
+import { logger } from "@repo/lib";
+
+const validate = (schema: AnyZodObject) => (req: Request, _res: Response, next: NextFunction) => {
   try {
     const safeParse = schema.safeParse({
       query: req.query,
@@ -13,7 +15,10 @@ const validate = (schema: AnyZodObject) => (req: Request, res: Response, next: N
     });
 
     if (!safeParse.success) {
-      const errorMessages = safeParse.error.issues.map((issue) => issue.message);
+      const errorMessages = safeParse.error.issues.map(
+        (issue) => `${issue.path.join(".")} ${issue.message}`,
+      );
+      logger.error(errorMessages.join(", "));
       // not really a meaningful error message for client, but these errors should ideally be caught on the client side, for forcefull server calls this is fine
       throw new AppError({
         code: "BAD_REQUEST",
@@ -23,7 +28,7 @@ const validate = (schema: AnyZodObject) => (req: Request, res: Response, next: N
 
     next();
   } catch (e: unknown) {
-    return res.status(400).send(e);
+    next(e);
   }
 };
 

diff --git a/apps/api/src/routers/user.router.ts b/apps/api/src/routers/user.router.ts
@@ -1,16 +1,17 @@
 import { Router } from "express";
 
+import { userCreateInputSchema } from "@repo/models";
+
 import { userController } from "../controllers/user.controller";
 import { authenticate } from "../middlewares/auth.middleware";
 import validate from "../middlewares/validate.middleware";
-import { userCreateSchema } from "../schemas/user.schema";
 
 export const userRouter = Router({ mergeParams: true });
 
 /**
  * @method POST @url /users @desc create a new user and authenticate
  */
-userRouter.post("/", validate(userCreateSchema), userController.createUser);
+userRouter.post("/", validate(userCreateInputSchema), userController.upsertUser);
 
 /**
  * @method GET @url /users @desc get's the current authenticated user

diff --git a/apps/api/src/schemas/user.schema.ts b/apps/api/src/schemas/user.schema.ts
diff --git a/apps/api/src/services/user.service.ts b/apps/api/src/services/user.service.ts
@@ -1,11 +1,15 @@
 import { prismaClient } from "@repo/models";
 
 class UserService {
-  async createUser(email: string) {
-    return prismaClient.user.create({
-      data: {
+  async upsertUser(email: string) {
+    return prismaClient.user.upsert({
+      where: {
+        email,
+      },
+      create: {
         email,
       },
+      update: {},
       select: {
         id: true,
       },

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -17,8 +17,12 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@repo/models": "workspace:*",
     "@nextui-org/react": "^2.3.6",
+    "@t3-oss/env-nextjs": "^0.9.2",
+    "@tanstack/react-query": "^5.35.5",
     "autoprefixer": "^10.4.19",
+    "axios": "^1.6.8",
     "framer-motion": "^11.1.9",
     "next": "^14.1.1",
     "postcss": "^8.4.38",

diff --git a/apps/web/src/app/(auth)/login/loading.tsx b/apps/web/src/app/(auth)/login/loading.tsx
@@ -0,0 +1,10 @@
+import { Spinner } from "@nextui-org/react";
+import * as React from "react";
+
+export default function Loading() {
+  return (
+    <div>
+      <Spinner color="primary" labelColor="primary" />
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
@@ -1,29 +1,65 @@
 "use client";
 
 import { Button, Input } from "@nextui-org/react";
+import { useMutation } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
-import React from "react";
+import * as React from "react";
+
+import { api } from "~/lib/api";
+
+import Loading from "~/app/(auth)/login/loading";
+import { useUser } from "~/hook/user-user";
+
 const Login = () => {
   const router = useRouter();
+  const [email, setEmail] = React.useState("");
+
+  const { data, isLoading } = useUser();
 
-  const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
+  const loginMutation = useMutation({
+    mutationFn: api.createUser,
+    onError(error) {
+      console.error(error);
+    },
+    onSuccess() {
+      router.push("/");
+    },
+  });
+
+  const submitHandler = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    router.push("/");
+    await loginMutation.mutateAsync({ email });
   };
 
+  if (data) {
+    router.push("/");
+    return null;
+  }
+
   return (
     <main className="flex justify-center items-center h-screen">
       <div className="bg-slate-900 md:w-1/2 w-full lg:w-1/3 p-4 m-4 rounded-md shadow-2xl shadow-slate-900 flex flex-col gap-y-8">
-        <div className="flex flex-col gap-y-2">
-          <h1 className="font-bold text-4xl">Login</h1>
-          <p>Please login to continue.</p>
-        </div>
-        <form onSubmit={submitHandler} className="flex flex-col items-end gap-y-4">
-          <Input type="email" variant={"bordered"} label="Email" />
-          <Button color="primary" type="submit">
-            Login
-          </Button>
-        </form>
+        {isLoading && <Loading />}
+        {!isLoading && !data && (
+          <>
+            <div className="flex flex-col gap-y-2">
+              <h1 className="font-bold text-4xl">Login</h1>
+              <p>Please login to continue.</p>
+            </div>
+            <form onSubmit={submitHandler} className="flex flex-col items-end gap-y-4">
+              <Input
+                type="email"
+                variant={"bordered"}
+                label="Email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+              <Button color="primary" type="submit" isLoading={loginMutation.isPending}>
+                Login
+              </Button>
+            </form>
+          </>
+        )}
       </div>
     </main>
   );

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,38 +1,52 @@
 "use client";
 
 import { Button, useDisclosure } from "@nextui-org/react";
+import { useRouter } from "next/navigation";
 
 import Todo from "~/app/components/todo";
 import TodoModal from "~/app/components/todoModal";
+import { useUser } from "~/hook/user-user";
 
-export default function Page(): JSX.Element {
+export default function Page() {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const router = useRouter();
+
+  const { data, isLoading } = useUser();
 
   const addTodo = () => {
     onOpen();
   };
 
+  if (!data && !isLoading) {
+    router.push("/login");
+    return null;
+  }
+
   return (
     <main className="max-w-screen-lg mx-auto p-6 flex flex-col gap-y-12">
-      <div className="flex justify-between items-center">
-        <h1 className="font-bold text-4xl">Todos</h1>
-        <Button color="primary" variant="shadow" onClick={addTodo}>
-          Add Todo
-        </Button>
-      </div>
-
-      <ul className="flex flex-col gap-y-4">
-        <Todo />
-      </ul>
-
-      <TodoModal
-        isOpen={isOpen}
-        onOpenChange={onOpenChange}
-        heading="Add Todo"
-        onPrimaryAction={() => {
-          console.info("Add Todo");
-        }}
-      />
+      {data && (
+        <>
+          <div className="flex justify-between items-center">
+            <h1 className="font-bold text-4xl">Todos</h1>
+            <Button color="primary" variant="shadow" onClick={addTodo}>
+              Add Todo
+            </Button>
+          </div>
+
+          <ul className="flex flex-col gap-y-4">
+            <Todo />
+          </ul>
+
+          <TodoModal
+            isOpen={isOpen}
+            onOpenChange={onOpenChange}
+            heading="Add Todo"
+            onPrimaryAction={() => {
+              console.info("Add Todo");
+            }}
+          />
+        </>
+      )}
     </main>
   );
 }
diff --git a/apps/web/src/app/providers.tsx b/apps/web/src/app/providers.tsx
@@ -1,7 +1,15 @@
 "use client";
 
 import { NextUIProvider } from "@nextui-org/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  return <NextUIProvider>{children}</NextUIProvider>;
+  const [queryClient] = React.useState(() => new QueryClient());
+
+  return (
+    <NextUIProvider>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </NextUIProvider>
+  );
 }
diff --git a/apps/web/src/hook/user-user.ts b/apps/web/src/hook/user-user.ts
@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { api } from "~/lib/api";
+
+export function useUser() {
+  return useQuery({
+    queryFn: api.getUser,
+    queryKey: ["user"],
+    retry: 0,
+  });
+}