✨ creating login popup security check

Perform security checks on the login popup to minimize bugs in unexpected situations.

features/auth/pages/LoginPage.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+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";
+
+const LoginPage = () => {
+  const componentFlowList = {
+    securityCheckup: <SecurityCheckup />,
+    securityCheckupFailed: <SecurityCheckupFailed />,
+    SecurityCheckupSuccessed: <Login />,
+  };
+
+  const [componentFlow, setComponentFlow] = useState(
+    componentFlowList.securityCheckup
+  );
+
+  useEffect(() => {
+    if (window.opener) {
+      setComponentFlow(componentFlowList.SecurityCheckupSuccessed);
+    } else {
+      setComponentFlow(componentFlowList.securityCheckupFailed);
+
+      const timer = setTimeout(() => {
+        redirect("/");
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  return (
+    <>
+      <main>{componentFlow}</main>
+    </>
+  );
+};
+
+export default LoginPage;

features/auth/ui/Login.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Login = () => {
+  return <div>This is login flow</div>;
+};
+
+export default Login;

features/auth/ui/SecurityCheckup.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const SecurityCheckup = () => {
+  return (
+    <div className="flex justify-center">
+      <div className="max-w-[60vh]">
+        <h1 className="mt-[20vh] text-2xl text-center">Please wait...</h1>
+        <p className="mt-4 text-sm text-center text-neutral-400">
+          We want to ensure a secure authentication environment before
+          proceeding for your safety.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SecurityCheckup;

features/auth/ui/SecurityCheckupFailed.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const SecurityCheckupFailed = () => {
+  return (
+    <div className="flex justify-center">
+      <div className="max-w-[60vh]">
+        <h1 className="mt-[20vh] text-2xl text-center text-red-400">
+          Your browser is not secure
+        </h1>
+        <p className="mt-4 text-sm text-center text-neutral-400">
+          Sorry, we had to stop the authentication process and return you to the
+          home page because your browser environment is not secure.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SecurityCheckupFailed;