feat: parse url search params on load in authlayout

web/src/layout/AuthLayout.tsx

@@ -9,21 +9,13 @@ import {
   useSearchParams,
 } from "react-router";
 import BackgroundLayout from "./BackgroundLayout";
-import { useOAuthContext } from "@/context/oauth";
+import { useOAuth } from "@/store/oauth";
 
 const AuthLayout = () => {
   const { connecting, db, connect } = useDbStore();
 
   const [searchParams] = useSearchParams();
-  const {
-    active,
-    setActive,
-    setClientID,
-    setRedirectURI,
-    setScope,
-    setState,
-    setNonce,
-  } = useOAuthContext();
+  const parseSearchParams = useOAuth((state) => state.parseSearchParams);
 
   const dbConnected = useMemo(() => !!db, [db]);
 
@@ -45,7 +37,8 @@ const AuthLayout = () => {
   const navigate = useNavigate();
 
   const isAuthPage = useMemo(() => {
-    return location.pathname.startsWith("/auth");
+    const pathname = location.pathname.replace(/\/$/i, "");
+    return pathname !== "/auth" && pathname.startsWith("/auth");
   }, [location.pathname]);
 
   const loading = useMemo(() => {
@@ -68,37 +61,28 @@ const AuthLayout = () => {
     connecting,
   ]);
 
+  // OAuth
   useEffect(() => {
-    if (!active) {
-      setActive(true);
-      setClientID(searchParams.get("client_id") ?? "");
-      setRedirectURI(searchParams.get("redirect_uri") ?? "");
-      const scope = searchParams.get("scope") ?? "";
-      setScope(scope.split(" ").filter((s) => s.length > 0));
-      setState(searchParams.get("state") ?? "");
-      setNonce(searchParams.get("nonce") ?? "");
-    }
-  }, [
-    active,
-    searchParams,
-    setActive,
-    setClientID,
-    setNonce,
-    setRedirectURI,
-    setScope,
-    setState,
-  ]);
+    console.log(
+      "parsing url search params:",
+      Object.fromEntries(searchParams.entries()),
+    );
+    parseSearchParams(searchParams);
+  }, [parseSearchParams, searchParams]);
 
+  // Database
   useEffect(() => {
     connect();
   }, [connect]);
 
+  // Account Manager
   useEffect(() => {
     if (dbConnected) {
       loadAccounts();
     }
   }, [dbConnected, loadAccounts]);
 
+  // Fetch Profile
   useEffect(() => {
     if (dbConnected && !loadingAccounts && activeAccount) {
       authenticate();