feat: redirection after verification

web/src/layout/VerificationLayout.tsx

@@ -3,7 +3,7 @@ import { useAuth } from "@/store/auth";
 import { useVerify } from "@/store/verify";
 import { Eye, MailCheck, ScanFace } from "lucide-react";
 import { useEffect, type FC } from "react";
-import { Navigate, Outlet, useLocation } from "react-router";
+import { Navigate, Outlet, useLocation, useNavigate } from "react-router";
 
 const steps = [
   {
@@ -33,10 +33,27 @@ const VerificationLayout: FC = () => {
   const step = useVerify((s) => s.step);
   const loadStep = useVerify((s) => s.loadStep);
 
+  const redirect = useVerify((s) => s.redirect);
+  const setRedirect = useVerify((s) => s.setRedirect);
+
+  const navigate = useNavigate();
+
   useEffect(() => {
     if (profile) loadStep(profile);
   }, [loadStep, profile]);
 
+  useEffect(() => {
+    if (location.state?.from) {
+      setRedirect(location.state.from);
+    }
+  }, [location.state?.from, setRedirect]);
+
+  useEffect(() => {
+    if (step === false) {
+      navigate(redirect ?? "/", { state: { reset: true } });
+    }
+  }, [navigate, redirect, step]);
+
   if (step === "email" && !location.pathname.startsWith("/verify/email")) {
     return <Navigate to="/verify/email" />;
   }
@@ -53,7 +70,9 @@ const VerificationLayout: FC = () => {
     <div className="w-full h-screen max-h-screen overflow-y-auto flex flex-col items-center sm:justify-center bg-white/50 dark:bg-black/50">
       <div className="w-full h-full sm:w-auto sm:h-auto">
         {location.pathname.replace(/\/$/i, "") !== "/verify" &&
-          step != null && <Stepper steps={steps} currentStep={step} />}
+          typeof step === "string" && (
+            <Stepper steps={steps} currentStep={step} />
+          )}
         <Outlet />
       </div>
     </div>