fix direct transition to auth routes

src/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import Faq from "./pages/Faq/Faq";
 import Wallet from "./pages/Wallet";
@@ -41,18 +41,21 @@ const App = () => {
         });
     }, [userId]);
 
-    const state = (location.state as { backgroundLocation?: Location; });
+    if (location.state?.redirectTo === "/signin") return <Navigate to="/signin" replace state={{ backgroundLocation: location }} />;
+    if (location.state?.redirectTo === "/signup") return <Navigate to="/signup" replace state={{ backgroundLocation: location }} />;
 
     return (
         <>
-            {state?.backgroundLocation &&
+            {location.state?.backgroundLocation &&
                 <Routes>
                     <Route path="/signin" element={<SigninDialog />} />
                     <Route path="/signup" element={<SignupDialog />} />
                 </Routes>
             }
-            <Routes location={state?.backgroundLocation || location}>
+            <Routes location={location.state?.backgroundLocation || location}>
                 <Route path="/" element={<Landing />} />
+                <Route path="/signin" element={<Navigate to="/" replace state={{ redirectTo: "/signin" }} />} />
+                <Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />
                 <Route element={<Layout />}>
                     <Route path="/tariffs" element={<Tariffs />} />
                     <Route path="/tariffs/time" element={<TariffPage />} />

src/pages/auth/Signin.tsx

@@ -9,9 +9,9 @@ import PenaLogo from "@components/PenaLogo";
 import { enqueueSnackbar } from "notistack";
 import { Link as RouterLink } from "react-router-dom";
 import { object, string } from "yup";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { LoginRequest, LoginResponse } from "@root/model/auth";
-import { setUserId } from "@root/stores/user";
+import { setUserId, useUserStore } from "@root/stores/user";
 
 
 interface Values {
@@ -31,6 +31,7 @@ const validationSchema = object({
 
 export default function SigninDialog() {
     const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true);
+    const user = useUserStore(state => state.user);
     const theme = useTheme();
     const upMd = useMediaQuery(theme.breakpoints.up("md"));
     const navigate = useNavigate();
@@ -49,8 +50,8 @@ export default function SigninDialog() {
                 useToken: false,
                 withCredentials: true,
             }).then(result => {
-                setUserId(result._id);
                 navigate("/tariffs");
+                setUserId(result._id);
             }).catch((error: any) => {
                 enqueueSnackbar(error.response?.data?.message ?? error.message ?? "Unknown error");
             }).finally(() => {
@@ -59,6 +60,10 @@ export default function SigninDialog() {
         },
     });
 
+    useEffect(function redirectIfSignedIn() {
+        if (user) navigate("/tariffs", { replace: true });
+    }, [navigate, user]);
+
     function handleClose() {
         setIsDialogOpen(false);
         setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);

src/pages/auth/Signup.tsx

@@ -9,9 +9,9 @@ import { enqueueSnackbar } from "notistack";
 import { authStore } from "@stores/makeRequest";
 import { Link as RouterLink } from "react-router-dom";
 import { object, ref, string } from "yup";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { RegisterRequest, RegisterResponse } from "@root/model/auth";
-import { setUserId } from "@root/stores/user";
+import { setUserId, useUserStore } from "@root/stores/user";
 
 
 interface Values {
@@ -34,6 +34,7 @@ const validationSchema = object({
 
 export default function SignupDialog() {
     const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true);
+    const user = useUserStore(state => state.user);
     const theme = useTheme();
     const upMd = useMediaQuery(theme.breakpoints.up("md"));
     const navigate = useNavigate();
@@ -54,8 +55,8 @@ export default function SignupDialog() {
                 useToken: false,
                 withCredentials: true,
             }).then(result => {
-                setUserId(result._id);
                 navigate("/tariffs");
+                setUserId(result._id);
             }).catch((error: any) => {
                 enqueueSnackbar(error.response?.data?.message ?? error.message ?? "Unknown error");
             }).finally(() => {
@@ -64,6 +65,10 @@ export default function SignupDialog() {
         },
     });
 
+    useEffect(function redirectIfSignedIn() {
+        if (user) navigate("/tariffs", { replace: true });
+    }, [navigate, user]);
+
     function handleClose() {
         setIsDialogOpen(false);
         setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);