enhance auth to rely on backend

package.json

@@ -17,7 +17,8 @@
     "email:dev": "email dev --dir \"./src/email/templates\"",
     "email:build": "email build --dir \"./src/email/templates\"",
     "email:start": "email start",
-    "typecheck": "tsc --project tsconfig.json --noEmit"
+    "typecheck": "tsc --project tsconfig.json --noEmit",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\""
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",

src/actions/blog.ts

@@ -0,0 +1,25 @@
+"use server";
+
+import axios from "axios";
+
+const apiUrl = process.env.API_URL;
+const fetchBlogById = async (id: string) => {
+  try {
+    const response = await axios.get(`${apiUrl}/api/v1/blogs/${id}`);
+    return response.data;
+  } catch (error) {
+    return {
+      message:
+        axios.isAxiosError(error) &&
+        error.response &&
+        error.response.data.message
+          ? error.response.data.message
+          : "Something went wrong",
+      status_code:
+        axios.isAxiosError(error) && error.response
+          ? error.response.status
+          : undefined,
+    };
+  }
+};
+export { fetchBlogById };

src/actions/userAuth.ts

@@ -0,0 +1,102 @@
+"use server";
+
+import axios from "axios";
+import * as z from "zod";
+
+import { LoginSchema } from "~/schemas";
+import { AuthResponse, ErrorResponse } from "~/types";
+
+const apiUrl = process.env.API_URL;
+
+const credentialsAuth = async (
+  values: z.infer<typeof LoginSchema>,
+): Promise<AuthResponse | ErrorResponse> => {
+  const validatedFields = LoginSchema.safeParse(values);
+  if (!validatedFields.success) {
+    return {
+      message: "Something went wrong",
+      status_code: 401,
+    };
+  }
+  const { email, password } = validatedFields.data;
+  const payload = { email, password };
+  try {
+    const response = await axios.post(`${apiUrl}/api/v1/auth/login`, payload);
+
+    return {
+      data: response.data.user,
+      access_token: response.data.access_token,
+    };
+  } catch (error) {
+    return {
+      message:
+        axios.isAxiosError(error) &&
+        error.response &&
+        error.response.data.message
+          ? error.response.data.message
+          : "Something went wrong",
+      status_code:
+        axios.isAxiosError(error) && error.response
+          ? error.response.status
+          : undefined,
+    };
+  }
+};
+
+const googleAuth = async (
+  idToken: string,
+): Promise<AuthResponse | ErrorResponse> => {
+  try {
+    const response = await axios.post(`${apiUrl}/api/v1/auth/google`, {
+      id_token: idToken,
+    });
+
+    return {
+      data: response.data.user,
+      access_token: response.data.access_token,
+    };
+  } catch (error) {
+    return {
+      message:
+        axios.isAxiosError(error) &&
+        error.response &&
+        error.response.data.message
+          ? error.response.data.message
+          : "Something went wrong",
+      status_code:
+        axios.isAxiosError(error) && error.response
+          ? error.response.status
+          : undefined,
+    };
+  }
+};
+
+const twitterAuth = async (
+  access_token: string,
+): Promise<AuthResponse | ErrorResponse> => {
+  try {
+    const response = await axios.post(`${apiUrl}/api/v1/auth/twitter`, {
+      access_token: access_token,
+    });
+
+    return {
+      data: response.data.user,
+      access_token: response.data.access_token,
+    };
+  } catch (error) {
+    return {
+      message:
+        axios.isAxiosError(error) &&
+        error.response &&
+        error.response.data.message
+          ? error.response.data.message
+          : "Something went wrong",
+      status_code:
+        axios.isAxiosError(error) && error.response
+          ? error.response.status
+          : undefined,
+    };
+  }
+};
+
+export { credentialsAuth, googleAuth, twitterAuth };

src/app/(landing-routes)/blog/[id]/_components/BlogDetailsPage.tsx

@@ -6,6 +6,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { FC, useEffect, useState } from "react";
 
+import { fetchBlogById } from "~/actions/blog";
 import Comment, {
   CommentProperties,
 } from "~/components/common/comment-component";
@@ -50,18 +51,15 @@ const BlogDetailsPage: FC<IProperties> = ({ id }) => {
     const fetchData = async () => {
       try {
         setIsLoading(true);
-        const response = await fetch(
-          `https://staging.api-csharp.boilerplate.hng.tech/api/v1/blogs/${id}`,
-        );
-        const result = await response.json();
-        setPost(result.data);
+        const response = await fetchBlogById(id);
+        setPost(response.data);
       } finally {
         setIsLoading(false);
       }
     };
 
     fetchData();
-  }, []);
+  }, [id]);
 
   const handleSubmit = () => {
     if (newComment.trim()) {