Created the Auth.jsx state

src/states/Auth/Auth.jsx

@@ -0,0 +1,56 @@
+import "./styles.sass";
+import SheepstarImage from "@/common/images/sheepstar.png";
+import Button from "@/common/components/Button";
+import {useEffect, useState} from "react";
+import {AUTH_URL} from "@/App.jsx";
+import {postRequest} from "@/common/util/RequestUtil.js";
+import {Navigate} from "react-router-dom";
+
+export const Auth = () => {
+    const [externalPopup, setExternalPopup] = useState(null);
+    const [redirect, setRedirect] = useState(false);
+
+    const connectClick = () => {
+        const popup = window.open(AUTH_URL, "Sheepstar - Discord Login", `width=500,height=800`);
+        popup.focus();
+
+        setExternalPopup(popup);
+    }
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (localStorage.getItem("code")) {
+                externalPopup?.close();
+                clearInterval(interval);
+                const code = localStorage.getItem("code");
+
+                localStorage.removeItem("code");
+
+                postRequest("/session/create", {code}).then(res => res.json()).then(res => {
+                    if (!res.token) return console.error("No token received");
+
+                    localStorage.setItem("token", res.token);
+
+                    setRedirect(true);
+                });
+            }
+        }, 500);
+
+        return () => {
+            clearInterval(interval);
+        }
+    }, [externalPopup]);
+
+    if (redirect || localStorage.getItem("token")) return <Navigate to="/"/>;
+
+    return (
+        <div className="auth-page">
+            <div className="auth-header">
+                <img src={SheepstarImage}/>
+                <h1>Sheepstar</h1>
+            </div>
+            <p>Please login to continue</p>
+            <Button onClick={connectClick}>Login with discord</Button>
+        </div>
+    )
+}