👔 complete handler callback

Complete the logic checking and loading on the OAuth module callback handler.

features/oauth-callback/pages/callbackHandler.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+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 = () => {
+  /**
+   * 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.
+   * 2. If it passes, the login component will appear and the user will perform authentication.
+   * 3. If it fails, stop the authentication process and display the warning component, then return the user to the homepage.
+   */
+  const componentFlowList = {
+    securityCheckup: <SecurityCheckup />,
+    securityCheckupFailed: <SecurityCheckupFailed />,
+    proceedCallback: <LoadingProcess />,
+  };
+
+  // State to set the current page component
+  const [componentFlow, setComponentFlow] = useState(
+    componentFlowList.securityCheckup
+  );
+
+  useEffect(() => {
+    // Prevent opening devtools while in authentication page
+    // disableDevtool();
+
+    /**
+     * Check if the window has an opener (i.e., it was opened by another window)
+     * If it does, the security checkup has passed.
+     * If it doesn't, the security checkup has failed and user will be redirected to the homepage.
+     */
+    if (window.opener) {
+      setComponentFlow(componentFlowList.proceedCallback);
+    } else {
+      setComponentFlow(componentFlowList.securityCheckupFailed);
+
+      const timer = setTimeout(() => {
+        redirect("/");
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  return (
+    <>
+      {/* show the current component flow */}
+      <main>{componentFlow}</main>
+    </>
+  );
+};
+
+export default OauthCallbackHandler;

features/oauth-callback/ui/LoadingProcess.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { CircularProgress } from "@heroui/react";
+import React from "react";
+
+const LoadingProcess = () => {
+  return (
+    <div className="w-full flex flex-col items-center text-center mt-[26vh]">
+      <CircularProgress aria-label="Loading..." size="lg" />
+      <div className="mt-4">
+        <h1 className="text-lg text-neutral-200">Please wait...</h1>
+        <p className="text-sm text-neutral-400">
+          Your request is being processed
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingProcess;