diff --git a/web/src/layout/AuthLayout.tsx b/web/src/layout/AuthLayout.tsx index 40edf19..1d22201 100644 --- a/web/src/layout/AuthLayout.tsx +++ b/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 ( ); diff --git a/web/src/pages/Authenticate/index.tsx b/web/src/pages/Authenticate/index.tsx index c4a7d86..82fd9ae 100644 --- a/web/src/pages/Authenticate/index.tsx +++ b/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 { useSearchParams } from "react-router-dom"; +import type { FC } from "react"; 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 (