diff --git a/app/(auth)/auth/callback/[...provider]/page.tsx b/app/(auth)/auth/callback/[...provider]/page.tsx
index d80709a..3349c14 100644
--- a/app/(auth)/auth/callback/[...provider]/page.tsx
+++ b/app/(auth)/auth/callback/[...provider]/page.tsx
@@ -1,3 +1,4 @@
+import OauthCallbackHandler from "@/features/oauth-callback/pages/callbackHandler";
 import React from "react";
 
 interface PageProps {
@@ -6,12 +7,7 @@ interface PageProps {
 }
 
 const page = ({ params, searchParams }: PageProps) => {
-  return (
-    <>
-      <h1>Nama provider: {params.provider}</h1>
-      <h1>Data provider: {JSON.stringify(searchParams)}</h1>
-    </>
-  );
+  return <OauthCallbackHandler />;
 };
 
 export default page;
diff --git a/features/auth/pages/LoginPage.tsx b/features/auth/pages/LoginPage.tsx
index 28f4e00..c61dec4 100644
--- a/features/auth/pages/LoginPage.tsx
+++ b/features/auth/pages/LoginPage.tsx
@@ -3,8 +3,8 @@
 import { redirect } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import Login from "@/features/auth/ui/Login";
-import SecurityCheckup from "@/features/auth/ui/SecurityCheckup";
-import SecurityCheckupFailed from "@/features/auth/ui/SecurityCheckupFailed";
+import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
+import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
 
 const LoginPage = () => {
   /**
diff --git a/features/auth/pages/SignupPage.tsx b/features/auth/pages/SignupPage.tsx
index e999e14..96b8f43 100644
--- a/features/auth/pages/SignupPage.tsx
+++ b/features/auth/pages/SignupPage.tsx
@@ -2,8 +2,8 @@
 
 import { redirect } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import SecurityCheckup from "@/features/auth/ui/SecurityCheckup";
-import SecurityCheckupFailed from "@/features/auth/ui/SecurityCheckupFailed";
+import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
+import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
 import disableDevtool from "disable-devtool";
 import Signup from "../ui/Signup";
 
diff --git a/features/oauth-callback/pages/callbackHandler.tsx b/features/oauth-callback/pages/callbackHandler.tsx
new file mode 100644
index 0000000..e38ee3b
--- /dev/null
+++ b/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;
diff --git a/features/oauth-callback/ui/LoadingProcess.tsx b/features/oauth-callback/ui/LoadingProcess.tsx
new file mode 100644
index 0000000..16517cb
--- /dev/null
+++ b/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;
diff --git a/features/auth/ui/SecurityCheckup.tsx b/shared/auth/ui/SecurityCheckup.tsx
similarity index 100%
rename from features/auth/ui/SecurityCheckup.tsx
rename to shared/auth/ui/SecurityCheckup.tsx
diff --git a/features/auth/ui/SecurityCheckupFailed.tsx b/shared/auth/ui/SecurityCheckupFailed.tsx
similarity index 100%
rename from features/auth/ui/SecurityCheckupFailed.tsx
rename to shared/auth/ui/SecurityCheckupFailed.tsx