feat: save search params

web/src/layout/AuthLayout.tsx

@@ -1,12 +1,30 @@
 import { useDbStore } from "@/store/db";
 import { useAuth } from "@/store/auth";
 import { useEffect, useMemo } from "react";
-import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
+import {
+  Navigate,
+  Outlet,
+  useLocation,
+  useNavigate,
+  useSearchParams,
+} from "react-router-dom";
 import BackgroundLayout from "./BackgroundLayout";
+import { useOAuthContext } from "@/context/oauth";
 
 const AuthLayout = () => {
   const { connecting, db, connect } = useDbStore();
 
+  const [searchParams] = useSearchParams();
+  const {
+    active,
+    setActive,
+    setClientID,
+    setRedirectURI,
+    setScope,
+    setState,
+    setNonce,
+  } = useOAuthContext();
+
   const dbConnected = useMemo(() => !!db, [db]);
 
   const loadingAccounts = useAuth((state) => state.loadingAccounts);
@@ -27,7 +45,7 @@ const AuthLayout = () => {
   const navigate = useNavigate();
 
   const isAuthPage = useMemo(() => {
-    const allowedPaths = ["/login", "/register", "/authorize"];
+    const allowedPaths = ["/login", "/register", "/authenticate"];
     return allowedPaths.some((p) => location.pathname.startsWith(p));
   }, [location.pathname]);
 
@@ -51,6 +69,31 @@ const AuthLayout = () => {
     connecting,
   ]);
 
+  useEffect(() => {
+    if (!active) {
+      console.log(
+        "setting search params:",
+        Object.fromEntries(searchParams.entries())
+      );
+      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,
+  ]);
+
   useEffect(() => {
     connect();
   }, [connect]);
@@ -77,7 +120,7 @@ const AuthLayout = () => {
   if (signInRequired && !isAuthPage) {
     return (
       <Navigate
-        to={hasAccounts ? "/authorize" : "/login"}
+        to={hasAccounts ? "/authenticate" : "/login"}
         state={{ from: location.pathname }}
       />
     );

web/src/pages/Authenticate/index.tsx

@@ -1,39 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
-import { useOAuthContext } from "@/context/oauth";
 import AccountList from "@/feature/AccountList";
-import { useEffect, type FC } from "react";
+import type { FC } from "react";
-import { useSearchParams } from "react-router-dom";
 
 const AuthenticatePage: FC = () => {
-  const [searchParams] = useSearchParams();
-
-  const {
-    setActive,
-    setClientID,
-    setRedirectURI,
-    setScope,
-    setState,
-    setNonce,
-  } = useOAuthContext();
-
-  useEffect(() => {
-    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") ?? "");
-  }, [
-    searchParams,
-    setActive,
-    setClientID,
-    setNonce,
-    setRedirectURI,
-    setScope,
-    setState,
-  ]);
-
   return (
     <div className="relative z-10 flex items-center justify-center min-h-screen">
       <Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">