👔 create callback forwader

create a handler to forward callback requests from the OAuth provider to the main backend system.

features/oauth-callback/lib/sendCallbackToServer.ts

@@ -1,16 +1,13 @@
 "use server";
 import { api } from "@/shared/api/connector";
 
-export const SendCallbackToServer = async (data: Record<string, any>) => {
+export const SendCallbackToServer = async (data: string) => {
   try {
-    const response = await api.get("auth/google/callback", {
-      searchParams: { ...data },
-    });
-
+    const response = await api.get(`auth/google/callback${data}`);
     const result = await response.json();
-    console.log(result);
+
+    return result;
   } catch (error) {
-    console.error("Error sending callback to server:", error);
     throw error;
   }
 };

features/oauth-callback/pages/callbackHandler.tsx

@@ -1,17 +1,12 @@
 "use client";
 
-import { ParamProps } from "../types/ParamProps";
 import { redirect } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
 import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
 import LoadingProcess from "../ui/LoadingProcess";
 
-const OauthCallbackHandler = ({
-  callbackData,
-}: {
-  callbackData: ParamProps;
-}) => {
+const OauthCallbackHandler = () => {
   /**
    * Create a lit component that will be used in popp, consisting of 3 component flows:
    * 1. When the user opens it, a browser environment check will be performed.
@@ -21,7 +16,7 @@ const OauthCallbackHandler = ({
   const componentFlowList = {
     securityCheckup: <SecurityCheckup />,
     securityCheckupFailed: <SecurityCheckupFailed />,
-    proceedCallback: <LoadingProcess callbackData={callbackData} />,
+    proceedCallback: <LoadingProcess />,
   };
 
   // State to set the current page component

features/oauth-callback/types/ParamProps.ts

@@ -1,4 +1,9 @@
 export interface ParamProps {
   params: { provider: string[] };
-  searchParams: { [key: string]: string | string[] | undefined };
+  searchParams:
+    | string
+    | string[][]
+    | Record<string, string>
+    | URLSearchParams
+    | undefined;
 }

features/oauth-callback/ui/LoadingProcess.tsx

@@ -1,22 +1,21 @@
 "use client";
 
 import { CircularProgress } from "@heroui/react";
-import React, { useEffect } from "react";
-import { ParamProps } from "../types/ParamProps";
+import React, { useEffect, useRef } from "react";
 import { SendCallbackToServer } from "../lib/sendCallbackToServer";
 
-const LoadingProcess = ({ callbackData }: { callbackData: ParamProps }) => {
+const LoadingProcess = () => {
+  const calledRef = useRef(false);
   useEffect(() => {
+    if (calledRef.current) return;
+    calledRef.current = true;
+
     (async () => {
       try {
-        const response = await SendCallbackToServer(callbackData);
-        console.log(
-          `Callback data sent to server successfully: ${JSON.stringify(
-            response
-          )}`
-        );
+        await SendCallbackToServer(window.location.search);
+        window.close();
       } catch (error) {
-        console.error("Error during loading process:", error);
+        console.log(error);
       }
     })();
   }, []);
@@ -28,9 +27,6 @@ const LoadingProcess = ({ callbackData }: { callbackData: ParamProps }) => {
         <p className="text-sm text-neutral-400">
           Your request is being processed
         </p>
-        <p className="text-sm text-neutral-400">
-          {JSON.stringify(callbackData)}
-        </p>
       </div>
     </div>
   );