Better verify

src/app/verify/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import Cookies from "js-cookie";
+import axios from "axios";
+
+export default function Verify() {
+  const [email, setEmail] = useState<string>();
+  const router = useRouter();
+  const [verified, setVerified] = useState(false);
+
+  useEffect(() => {
+    const email = Cookies.get("verify_temp_email");
+    setEmail(email);
+    const password = Cookies.get("verify_temp_password");
+
+    const i = setInterval(async () => {
+      const { data } = await axios.get("/api/verify", {
+        params: { email, password },
+      });
+      const response = data as {
+        verified: boolean;
+        user_id: string;
+        access_token?: string;
+        refresh_token?: string;
+      };
+      if (response.verified) {
+        clearInterval(i);
+        if (response.access_token) {
+          setVerified(true);
+          toast.info("Email verified, redirecting...");
+          Cookies.set("token", response.access_token);
+          Cookies.remove("verify_temp_email");
+          Cookies.remove("verify_temp_password");
+          setTimeout(() => router.push("/chat"), 500);
+        } else {
+          console.log(response);
+        }
+      }
+    }, 8000);
+  }, []);
+
+  return (
+    <div className="h-screen flex items-center">
+      <Card className="w-md m-auto">
+        <CardHeader>
+          <CardTitle className="text-3xl mx-auto">Verify Email</CardTitle>
+          <CardDescription>
+            {verified ? (
+              "Successfully verified"
+            ) : (
+              <>
+                We sent you a verification email at {email}. Please verify to
+                continue.
+              </>
+            )}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="gap-3 flex flex-col">
+          Current status: {verified ? "Verified" : "Unverified"}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/auth/CreateAccount.tsx

@@ -3,13 +3,13 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { useState } from "react";
-import Cookies from "js-cookie";
-import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { CardContent, CardHeader, CardTitle } from "../ui/card";
 import { Label } from "../ui/label";
 import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import Cookies from "js-cookie";
 
 export default function CreateAccount() {
   const [username, setUsername] = useState("");
@@ -21,40 +21,8 @@ export default function CreateAccount() {
   const [feedback, setFeedback] = useState<
     undefined | { kind: "error" | "info"; message: string }
   >();
-  const [verify, setVerify] = useState<string | undefined>();
-
   const router = useRouter();
 
-  // Verify interval
-  useEffect(() => {
-    if (verify) {
-      const i = setInterval(async () => {
-        const { data } = await axios.get("/api/verify", {
-          params: { email, password },
-        });
-        const response = data as {
-          verified: boolean;
-          user_id: string;
-          access_token?: string;
-          refresh_token?: string;
-        };
-        if (response.verified) {
-          clearInterval(i);
-          setFeedback({
-            message: "Email verified, redirecting...",
-            kind: "info",
-          });
-          if (response.access_token) {
-            Cookies.set("token", response.access_token);
-            setTimeout(() => router.push("/chat"), 500);
-          } else {
-            console.log(response);
-          }
-        }
-      }, 8000);
-    }
-  }, [verify]);
-
   const validateInput = ():
     | { kind: "error" | "info"; message: string }
     | undefined => {
@@ -113,8 +81,14 @@ export default function CreateAccount() {
         toast.info(
           "We sent you a verification email. Please verify to continue."
         );
-        setFeedback(undefined);
+        setFeedback({
-        setVerify(response.user_id);
+          message:
+            "We sent you a verification email. Please verify to continue.",
+          kind: "info",
+        });
+        Cookies.set("verify_temp_email", email);
+        Cookies.set("verify_temp_password", password);
+        router.push(`/verify`);
       } else {
         setFeedback({ message: response.message, kind: "error" });
       }
@@ -133,15 +107,9 @@ export default function CreateAccount() {
   return (
     <>
       <CardHeader>
-        <CardTitle className="text-3xl mx-auto">
+        <CardTitle className="text-3xl mx-auto">Create an Account</CardTitle>
-          {verify ? "Verify" : "Create an Account"}
-        </CardTitle>
       </CardHeader>
       <CardContent className="gap-3 flex flex-col">
-        {verify ? (
-          `We sent you a verification email at (${email}). Please verify to continue.`
-        ) : (
-          <>
         <span>
           Email
           <Input
@@ -202,8 +170,6 @@ export default function CreateAccount() {
         <Button onClick={signup} disabled={loading}>
           {loading ? "Signing Up..." : "Sign Up"}
         </Button>
-          </>
-        )}
       </CardContent>
     </>
   );