♻️ refactor(auth): replace redirect flow to popup window

shared/widgets/signin/actions/submitProviderCallback.ts

@@ -1,54 +0,0 @@
-"use server";
-
-import { backendFetch, BackendResponse } from "@/shared/helper/backendFetch";
-import { cookies } from "next/headers";
-
-export const submitProviderCallback = async (
-  providerName: string,
-  queries?: unknown
-): Promise<
-  BackendResponse<{
-    authToken: string;
-  }>
-> => {
-  try {
-    const envKey = providerName.toUpperCase() + "_CALLBACK_URL";
-
-    const authClientCallbackUrl = (await backendFetch(
-      "auth/providers/" + providerName + "/callback"
-    )) as BackendResponse<{
-      callback_url: string;
-    }>;
-
-    if (!authClientCallbackUrl.success)
-      throw new Error("Failed to get auth client callback URL");
-
-    const responseProvision = (await backendFetch(
-      `${authClientCallbackUrl.data?.callback_url!}?callbackURI=${
-        process.env.APP_URL
-      }${process.env[envKey]}&${queries}`
-    )) as BackendResponse<{
-      authToken: string;
-    }>;
-
-    if (!responseProvision.success)
-      throw new Error("Failed to submit provider callback");
-
-    (await cookies()).set({
-      name: "auth_token",
-      value: responseProvision.data?.authToken!,
-      httpOnly: true,
-      path: "/",
-      secure: process.env.NODE_ENV === "production",
-      maxAge: Number(process.env.SESSION_EXPIRE),
-    });
-
-    return responseProvision;
-  } catch (error) {
-    return {
-      success: false,
-      message: "Error submitting provider callback",
-      error: error,
-    };
-  }
-};

shared/widgets/signin/components/SignInCard.tsx

@@ -10,7 +10,7 @@ import {
 import { Input } from "@/shared/libs/shadcn/ui/input";
 import { Label } from "@/shared/libs/shadcn/ui/label";
 import { Separator } from "@/shared/libs/shadcn/ui/separator";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   getAllThirdPartyAuth,
   GetALlThirdPartyAuthCallback,
@@ -18,14 +18,13 @@ import {
 import { Icon } from "@iconify/react";
 import { Spinner } from "@/shared/libs/shadcn/ui/spinner";
 import { getOauthEndpoint } from "../actions/getOauthEndpoint";
-import { useRouter } from "next/navigation";
 
 const SignInCard = () => {
-  const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [oAuthProviders, setOAuthProviders] =
     useState<GetALlThirdPartyAuthCallback | null>(null);
 
+  // Fetch available third-party auth providers on component mount
   useEffect(() => {
     (async () => {
       const res = await getAllThirdPartyAuth();
@@ -33,6 +32,7 @@ const SignInCard = () => {
     })();
   }, []);
 
+  // Open OAuth endpoint in a new popup window
   const getOauthEndpointUrl = async (
     providerReqEndpoint: string,
     providerName: string
@@ -41,9 +41,25 @@ const SignInCard = () => {
       endpointUrl: providerReqEndpoint,
       providerName: providerName,
     });
-    router.push(res.data?.endpointUrl || "/");
+
+    setIsLoading(true);
+    window.open(res.data?.endpointUrl, "oauthPopup", "width=500,height=600");
   };
 
+  // Handle the feedback from popup window for OAuth
+  const handleMessage = useCallback((event: MessageEvent) => {
+    if (event.origin !== window.location.origin) return;
+    if (event.data.type === "oauth-success") window.location.reload();
+    if (event.data.type === "oauth-failed") setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [handleMessage]);
+
   return (
     <DialogContent showCloseButton={false}>
       <DialogHeader>